나를 위한 개발일지

ES

: ECMAScript로 Ecma lnternational이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다.

자바스크립트에서 변수는 var , let , const 세 가지 방법으로 선언할 수 있다.

var은 예전부터 사용되던 방법이며, let 과 const 는 ECMAScript 6(ES6)에서 새로 도입 된 방법이다.

// var로 변수 선언
var myVar = 'Hello JavaScript'
console.log(myVar) // 'Hello JavaScript'
// let으로 변수 선언
let myLet = 'Hello JavaScript'
console.log(myLet) // 'Hello JavaScript'
// const로 상수 선언
const myConst = 'Hello JavaScript'
console.log(myConst) // 'Hello JavaScript'

ECMAScript 6 (ES6)는 JavaScript의 버전 중 하나로, 2015년에 발표되었어요. ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여 JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성 할 수 있도록 개선했다.

기존에 변수 선언을 위해 존재하던 var 를 대체해서 나온 변수 선언이다.

ES6 문법

1.  let, const : 새로 도입

- let : 재할당은 가능하고, 재선언은 불가

- const : 재할당, 재선언이 불가능, 초기값이 없으면 선언 불가능

2. 화살표 함수 (Arrow Function) : 처음 소개된 개념

- function 이나 return 키워드 없이 함수를 만드는 방법

- this : function 은 호출을 할 때 this 가 정해지지만, 화살표 함수는 선언할 때 this 가 정해짐

3. 삼항 연산자 (ternary operator)

4. 구조 분해 할당 (Destructuring)

- 배열 [] 이나 객체 {} 의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

5. 단축 속성명 (property shorthand)

- 객체의 key와 value 값이 같다면, 생략 가능

6. 전개 구문 (Spread)

- 배열이나 객체를 전개하는 문법. 구조분해할당과 함께 정말 많이 사용됨

7. 나머지 매개변수(rest parameter)

8. 템플릿 리터럴 (Template literals)

- 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현. 백틱( ` ) 과 ${} 로 표현

9. named export vs default export

- default Export

- named export

1. 객체 메소드

-  Object.keys() : 객체의 속성 이름을 배열로 반환

let fruit = {
name: 'apple',
clolr: 'red'
}
let keys = Object.keys(fruit)
console.log(keys)   // ['name', 'clolr']

-  Object.values() : 객체의 속성 값들을 배열로 반환

let fruit = {
name: 'apple',
clolr: 'red'
}
let values = Object.values(fruit)
console.log(values)   // ['apple', 'red']

-  Object.entries() : 객체의 속성 이름과 속성값들을 2차원 배열로 반환

-  Object.assign() : 기존 객체를 복사하여 새로운 객체를 만듦

let fruit = {
name: 'apple',
clolr: 'red'
}
let newFruit =  Object.assign({}, fruit, { clolr: 'red' })
console.log(newFruit)   // {name: 'apple', clolr: 'red'}

2. 배열 메소드

- push() : 배열의 끝에 요소를 추가

- pop() :  배열의 마지막 요소를 삭제

- shift() : 배열의 첫 번째 요소를 삭제

- unshift() :  배열의 맨 앞에 요소를 추가

- splice() : 배열의 요소를 삭제하거나, 새로운 요소를 추가

let country = ["한국", "호주", "미국"]
country.splice(1, 2, "파리") // (시작, 끝-삭제, 추가)
console.log(country) // ["한국", "파리"]

- slice() :  배열의 일부분을 새로운 배열로 만듦

let country = ["한국", "호주", "미국"]
let slicedCountry = country.slice(0, 1)
console.log(slicedCountry) // ["한국"]

- forEach() : 배열 numbers의 모든 요소를 출력.  배열의 각 요소에 대해 콜백 함수를 실행

- map() : 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환

let numbers = [1, 4, 6, 8, 9]
let squaredNumbers = numbers.map(function(number) {
return number * number
})
console.log(squaredNumbers) // [1, 16, 36, 64, 81]

- filter() : 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소만 새로운 배열로 반환

let numbers = [1, 4, 6, 8, 9]
let evenNumbers = numbers.filter(function(number) {
return number < 8
})
console.log(evenNumbers) // [1, 4, 6]

- reduce()

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum);

- find() :  배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번째 요소를 반환

- some() : 배열의 각 요소에 대해 콜백 함수를 실행, 그 결과가 true인 요소가 하나라도 있는지 확인

- every() : 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 모든 요소인지 확인

- sort() : 메소드는 배열의 요소를 오름차순으로 정렬

- reverse() : 배열의 요소를 역순으로 정렬. 순서를 뒤집는다

새로 알게되는 메소드

.splice() 메소드 이해하기

https://www.freecodecamp.org/korean/news/javascript-splice-method/

.reduce() 메소드 이해하기

https://bigtop.tistory.com/69

다양한 자료형을 다룰 수 있다. 이 자료형들은 서로 형변환이 가능(형태 > 바꾼다)

1. 암시적 형 변환(implicit coercion)

: 자바스크립트에서 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생

1-1. 문자열 변환

: 문자열과 다른 데이터 타입이 더하기 연산자로 만나면 문자열이 우선 시 된다

  { }, null, nuderfined + '1' => 문자열

console.log(1 + "2") // "12"
console.log("1" + true) // "1true" // 더하기 연산자, 두가지 타입을 결합함
console.log("1" + {}) // "1[object Object]"
console.log("1" + null) // "1null"
console.log("1" + undefined) // "1undefined"

1-2. 숫자 변환

: 다른 연산자(-, / ,,,)가 나왔을 때는 항상 숫자가 우선 시 된다

:  문자열을 숫자로 변환. 이때, 빈 문자열("")이나 공백 문자열(" ")은 0으로 변환

console.log(1 - "2") // -1
console.log("2" * "3") // 6
console.log(4 + +"5") // 9

2. 명시적 형 변환(explicit coercion)

: 개발자가 직접 자료형을 변환

2-1. 불리언 변환

:  Boolean() 함수를 사용하여 불리언 값으로 변환

   0, 빈 문자열(""), null, undefined, NaN은 false로 변환. 그 외의 값은 true로 변환

console.log(Boolean(0)) // false
console.log(Boolean("")) // false
console.log(Boolean(null)) // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)) // false
console.log(Boolean("false")) // true
console.log(Boolean({})) // true // 객체는 값이 비어있더라도 true

2-2. 문자열 변환

: String() 함수를 사용하여 다른 자료형을 문자열로 변환

console.log(String(123)) // "123"
console.log(String(true)) // "true"
console.log(String(false)) // "false"
console.log(String(null)) // "null"
console.log(String(undefined)) // "undefined"
console.log(String({})) // "[object Object]"

2-3. 숫자 변환

console.log(Number("123")) // 123
console.log(Number("")) // 0
console.log(Number(" ")) // 0
console.log(Number(true)) // 1
console.log(Number(false)) // 0

1. 숫자(Number)

- 정수형 숫자(Integer)

let num1 = 27
console.log(num1) // 27
console.log(typeof num1) // 'number'

- 실수형 숫자(Float)

let num2 = 1.997
console.log(num2) // 1.997
console.log(typeof num2) // 'number'

- 지수형 숫자(Exponential)

let num3 = 2.7e8 // 2.7 x 10^8
console.log(num3) // 270000000
console.log(typeof num3) // 'number'

- NaN(Not a Number)

: 숫자가 아님을 나타내는 값. 수학적으로 정의되지 않는 계산, 숫자가 아닌 값을 숫자로 변환하려고 할 때 발생

let num4 = 'nminy' / 2
console.log(num4) // NaN
console.log(typeof num4) // 'number'

- Infinity : 무한대를 나타내는 숫자 값

let num6 = -1 / 0
console.log(num6) // -Infinity
console.log(typeof num6) // 'number'

2. 문자열(String)

: 문자의 나열. 작은 따옴표(' '), 큰 따옴표(" ")로 표현

- 문자열 길이(length)

let str = 'Apples are delicious!'
console.log(str.length) // 21

- 문자열 결합(concatenation)

let str1 = "WONPIL, "
let str2 = "행운을 빌어 줘"
let result = str1.concat(str2)
console.log(result) // "WONPIL, 행운을 빌어 줘"

- 문자열 자르기(substr, slice) 

let str = "Hello, world!";
console.log(str.substr(7, 5)); // "world" //시작위치부터 몇개까지 자를건지
console.log(str.slice(7, 12)); // "world" //시작위치부터 끝 위치까지

- 문자열 검색(search)

let str = "Hello, world!"
console.log(str.search("world")) // 7

- 문자열 대체(replace)

let str = "Cherries are delicious!"
let result = str.replace("Cherries", "JavaScript")
console.log(result) // "JavaScript are delicious!"

- 문자열 분할(split)

let str = "apple, banana, cherry"
let result = str.split(",")
console.log(result) // ["apple", "banana", "cherry"]

3. 불리언(Boolean)
: 불리언은 참(true)과 거짓(false)을 나타내는 데이터 타입.

let bool1 = true
console.log(bool1) // true
console.log(typeof bool1) // "boolean"

let bool2 = false
console.log(bool2) // false
console.log(typeof bool2) // "boolean"

: 조건문(if, else, switch 등)과 논리 연산자(&&,||, !)와 함께 사용

let x = 10
let y = 5
if (x > y) {
console.log("x is greater than y")
} else {
console.log("x is less than or equal to y")
}
let a = true
let b = false
console.log(a && b) // false
console.log(a || b) // true
console.log(!a) // false

4. undefinde

: 값이 할당되지 않은 변수

let x
console.log(x) // undefined

5. null : 값이 존재하지 않음을 의미. nudefined와는 다름

let y = null
console.log(y) // null

6. 객체(Object)💛

: 매우 중요한 역할!!! 속성과 메소드를 가지는 컨테이너. 중괄호{ }를 사용하여 객체 생성

let person = { name: 'Pororo', age: 9 }
person.name // 'Pororo'
person.age // 9

7. 배열(Array)

: 여러 개의 데이터를 순서대로 저장하는 데이터 타입. 대괄호[ ]를 사용하여 배열을 생성

let numbers = [1, 2, 3, 4, 5]
let color = ['red', 'green', 'blue']

1. 산술연산자

+ (더하기) : 문자열 우선순위

- (빼기) : 숫자 우선순위

* (곱하기) : 숫자 우선순위

/ (나누기) : 숫자 우선순위

% (나머지) : 숫자 우선순위 console.log (5%2) //1

2.할당연산자

= (등호연산자) : 변수에 값을 할당

+= (더하기 등호연산자) : 변수에 값을 더함

-= (빼기 등호연산자) : 변수에서 값을 뺌

*= (곱하기 등호연산자) : 변수에 값을 곱함

/= (나누기 등호연산자) : 변수에서 값을 나눔

%= (나머지 등호연산자) : 변수에서 값을 나눈 나머지

3. 비교연산자

=== (일치 연산자) : 두 값이 같은지 비교, 자료형까지 비교

!== (불일치 연산자) :두 값이 다른지 비교, 자료형까지 비교

< (작다 연산자) : 두 값 비교. 숫자와 문자열 함께 사용할 경우, 자동으로 숫자 변환

> (크다 연산자) : 두 값 비교. 숫자와 문자열 함께 사용할 경우, 자동으로 숫자 변환

<= (작거나 같다 연산자) : 두 값 비교. 숫자와 문자열 함께 사용할 경우, 자동으로 숫자 변환

>= (크거나 같다 연산자) : 두 값 비교. 숫자와 문자열 함께 사용할 경우, 자동으로 숫자 변환

4. 논리 연산자

&& (논리곱 연산자) : 두 값 비교. 두 값이 모두 true일 경우에만 true를 반환

|| (논리합 연산자) : 두 값 비교. 두 값 중 하나라도 true일 경우에만 true를 반환

! (논리부정 연산자) : 값을 반대로 바꿈. true를 false로, false를 true로 바꿈

5. 삼향 연산자

?: (삼향 연산자) : 조건에 따라 값을 선택. 조건식 ? true일 때의 값 : false일 때의 값 형태로 사용

let x = 7
let result = (x > 10) ? '크다' : '작다'
console.log(result) // '작다'

6. 타입 연산자

typeof 연산자 : 값의 자료형을 확인. 원시 자료형의 경우, 해당 자료형의 이름을, 객체나 함수의 경우, 'object' or 'tunction'을 반환. typeof null의 경우 'object'를 반환하는 버그가 있음!

console.log(typeof null) // 'object'
console.log(typeof {}) // 'object'
console.log(typeof fuction(){}) // 'fuction'