[TIL] ES6문법(1)

ES6란?

2015년에 발표된 자바스크립트 버전으로 대규모 문법적 향상 및 변경이 있어서

새로운 문법과 기능을 도입해 개발자들이 보다 쉽고

효율적으로 코드 작성할 수 있도록 개선한 버전

 

1. let, const

이 둘의 차이점은 처음선언한 후 재할당을 할 수 있냐 없냐의 차이가 있다.

 

2. 화살표 함수

 

기존 함수 생성 2가지

 

2-1.

function ex() {}

 

2-2.

var ex = function() {};

 

화살표 함수 생성

 

var ex = () => {};

 

중괄호 안 코드가 한 줄이면 중괄호 생략 가능하고

매개변수를 넣으면 소괄호도 생략 가능하다.

 

3. 삼항 연산자

생성법

aaa ? true일 때 : false일 때

 

4. 구조분해할당

 

구조를 반대로 찢어서 다 할당한다는 의미이다.

배열이나 객체의 속성을 분해해서 그 값을 변수에 할당할 수 있게 하는 것

 

4-1. 배열의 경우

예시

 

//1

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

console.log(value1);

console.log(value2);

//2

let arr = ["value3", "value4", "value5"];

let [a, b, c] = arr;

console.log(a);

console.log(b);

console.log(c);

이렇게 두 가지 예시로 들 수 있다.

코드로 직접 보니 좀 더 이해가 된다.

 

만약 기존 배열에 속성 값은 3개인데

새로 할당할 배열을 생성할 때 4칸의 배열을 생성하면

어떻게 될까?

 

0부터 순차적으로 할당이 되는데

마지막 4번째 값에 넣을 값이 없으므로

undefined가 된다.

 

4-2. 객체인 경우

예시

 

let user = {

    name: "moon",

    age: 25,

    gender: "male"

};

let {name, age} = user;

console.log(name);

console.log(age);

이렇게 짜면 된다.

유의할 점은 새로 선언할 변수명이 가져올 key이름과 동일해야

속성값을 가져올 수 있다.

 

객체 이름을 새로운 이름으로 할당

예시

 

let user = {

    name: "moon",

    age: 25,

    gender: "male"

};

let {

    name: newname,

    age: newage

} = user;

console.log(newname);

console.log(newage);

이렇게 바꿔주면 

새로운 이름을 변경이 가능하다.

 

배열에서처럼 없는 값을 가져오라고 한다면

똑같이 undefined가 나온다.