2024. 07. 25.(JavaScrip 기본 문법 정리 - ES6)

ES6문법 : javascript의 버전 중 하나로, 2015년에 발표되었다.

1. let(변수), const(상수) : 이전에는 var만 사용되었다.

const는 재할당이 안되나, let은 재할당이 안된다는 점이 다르다.

var는 선언도 다시 할 수 있으나 let, const는 재선언이 불가하다.

 

2. 화살표함수 (arrow function)

var add = (x) => {
return 1;
};

var add = x => 1;

 

3. 삼항연산자

condition ? true인 경우 : false인 경우

console.log(true ? "참" : "거짓"); -> 참

console.log(false ? "참" : "거짓"); -> 거짓

console.log(1 === 1 ? "참" : "거짓"); -> 참

console.log(1 !== 1 ? "참" : "거짓"); -> 거짓

 

4. 구조분해할당 : destructuring(de + structure + ing)

구조를 없애버려서 각각 다 할당을 해버린다.

-> 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해준다.

 

4-1. 배열의 경우

let [value1, value2] = [1, "new"]

console.log("1", value1); -> 1 1이 출력된다.

console.log("2", value2); -> 2 new가 출력된다.

 

let arr = ["value1", "value2", "value3"];

let [a, b, c] = arr;

-> a는 value1, b는 value2, c는 value3 이므로 value1 / value2 / value3 이 각각 출력된다.

-> 만약 let [a, b, c, d]로 출력값을 냈을 경우, d에 해당하는 객체가 없기 때문에 d는 undefined로 출력된다.

-> let [a, b, c, d = 4]로 d값을 지정해 놓았을 경우에는 4로 들어오지만 4로 지정한 후에 배열에 "value4"를 추가했을 경우 "value4"로 출력된다.

 

4-2. 객체인 경우

let {name, age} = {

name : "abc", 

age : 30,

};

console. log(name)

console. log(age)

-> 위의 경우 각각 abc, 30이라는 결과값이 나오며, 각각의 속성은 arr가 아닌 string과 numbers가 나온다.

 

* 새로운 이름으로 할당

let user = {

name :  "abc",

age : 30,

};

let {name : newname, age : newage} = user;

console. log(newname);

console. log(newage);

-> key를 새로운 이름으로 바꾸었으므로 newname, newage를 출력해야 해당값이 나온다.

console. log(birthday)

-> 객체의 경우에도 배열과 동일하게 새로운 출력값을 추가하면, 그 출력값이 존재하지 않기 때문에 undefined로 나온다.

let {name, age, birthday = "today"} = user;

-> 값을 지정해 놓은 경우 undefined 대신에 "today"라는 값이 출력 되지만

객체에 birthday : "yesterday"로 있는 경우 "yesterday"로 값이 출력된다.

 

5. 단축 속성명 : property shorthand

key와 value값이 같으면, 굳이 2개를 쓸 필요없이 생략이 가능하다.

ex) const obj = {name, age};

-> 언듯보기엔 배열같지만 name : "name", age : "age" 인 객체이다.

 

6. 전개구문 (spread operator) -> destructuring과 함께 가장 많이 사용되는 문법 중 하나.

6-1. 배열 전개구문

let arr = [1, 2, 3];

console. log(...arr);

-> 배열([1, 2, 3])을 풀어서 객체로 1, 2, 3이라는 값이 나온다.

 

배열에 내용을 추가하고 싶을 때 쓰이기도 하는데, push를 써도 되지만. ...arr를 사용하여 푼 다음 추가하여 다시 묶을 수도 있다.

ex) let arr = [1, 2, 3];

      let newArr = [...arr, 4];

      console. log(newArr);

-> 결과값으로 [1, 2, 3, 4]가 나온다.

 

6-2. 객체 전개구문

let user = {

name : "abc",

age : 30

};

let user2 = {...user};

-> 위의 객체를 다 풀어서 다시 중괄호로 묶어라는 의미이므로 결국 위와 아래 결과값은 똑같다.

 

6-3. 매개변수 전개구문(rest parameter)

function exampFunc(a,b, c, ...args) {

console.log(a, b, c);

console.log(...args);

}

exzmpleFunc(1, 2, 3, 4, 5, 6, 7);

-> 결과값으로 a, b, c 는 1, 2, 3으로 나오고

     ...args는 나머지 값인 4, 5, 6, 7이 나온다.

* 이 때 console.log(args); 만 입력하게 되면 배열에 묶인 [4, 5, 6, 7]값이 출력된다.

 

7. 템플렛 리터럴(Template Literal) : 보통 문자열을 출력할 때 ""를 사용하는데, 백틱을 쓰기도 한다.