ES6 문법(2)

단축 속성명

정말 많이 쓰이는 방법이다.

 

기존 객체 생성법 예시로

 

const name = "abc";

const age = "25";

const obj = {

    name: name,

    age: age

}

 

이렇게 객체를 만들 수 있다.

key값을 먼저 변수나 상수로 선언한 후 속성 안에 그 이름을 사용할 수 있는데

단축 속성명은 만약 key이름과 key값의 이름명이 같을 경우

 

const name = "abc";

const age = "25";

const obj = { name, age };

 

이렇게 줄여서 사용할 수 있다.

반드시 이름이 동일해야 줄여서 사용할 수 있으니

이 점 유의하자.

 

전개 구문

간단하게 말하면 배열이나 객체를 전개하는 문법이다.

 

배열 예시

 

let arr = [1, 2, 3];

console.log(arr);

console.log(...arr);

 

결과는

[1, 2, 3]

1, 2, 3

이 나온다.

변수명 앞에... 을 붙여 사용한다

이걸 사용할 때는 기존 배열구조를 벗고 새 배열로 다시 구성할 때 사용한다.

비슷한 방법으로 이전에 배운 push가 있다.

 

사용 예시

 

let arr = [1, 2, 3];

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

 

이렇게 말이다

그럼 출력은

[1, 2, 3, 4]

이렇게 4가 추가된 새로운 newarr가 생성된다.

 

객체 예시

 

let user = {

    name: "moon",

    age: 25

};

let newuser = { ...user, gender: "male" };

 

이렇게 배열과 동일한 방식으로 생성할 수 있다.

 

나머지 매개변수

 

args

주로 함수에 사용되며

기존 매개변수값에 나머지 매개변수를 넣고 싶을 때 사용한다.

 

사용 예시

 

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

    console.log(a, b, c);

    console.log(...args);

}

add(1, 2, 3, 4, 5, 6, 7, 8, 9);

 

이렇게 사용할 수 있다.

앞에 스프레드... 을 붙이는 것이 핵심이며

console.log뒤에 스프레드를 생략하면

args는 배열상태로 출력된다.

 

템플릿 리터럴

활용도가 어마어마한 문법이다.

기존 문자열을 출력할 때 ''나 ""를 사용하는데

ES6는 `` 어퍼스트로피를 사용해서도 문자열 출력이 가능한데

추가 기능들이 있다.

첫 번째로

기존에는 문자열 그 자체를 출력한다면

어퍼스트로피 ``를 사용하면 연산기능이나 자바스크립트 코드도

넣을 수 있다.

 

사용 예시

 

console.log(`안녕 ${3 * 3}`);

 

이렇게 작성하면

문자열 안녕과 함께 뒤에는 3*3 연산이 적용된 9가 출력이 된다.

자바스크립트 코드를 넣을 때는 ${} 사용이 핵심이다.

유용한 문법 같으니 사용 숙지를 하는 게 앞으로 좋을 것이다.

 

두 번째로

기존 문자열은 멀티라인을 지원하는데

멀티라인은 코드 문자열 작성 시 띄어쓰기나 줄 넘김

모두 반영해서 출력한다는 얘기이다.

 

사용 예시

 

console.log(`안녕

                          만나서

                                반가워

                            앞으로

                      잘부탁해!`);

 

이런 식을 작성한다면

 

$ node 05.js
안녕
               만나서
                            반가워
                    앞으로
            잘부탁해!

 

이렇게 출력이 된다는 뜻이다.

나중에 정말 유용하게 쓸 문법 같다.