JS 단축속성명 / ... / ...args / ` `

1. 단축속성명 (property shorthand)

아래와 같이 변수로 설정된 것과, 객체가 있다. 

 

const name = "nbc";

const age = 30;

 

const obj = {

     name : name

     age : age

};

 

key - value 로 이루어진 객체를 보면

값에 오는건 실질적인 데이터 이다 .

그래서 값에 오는 이름과  변수로 선언된 이름이 같을 수도 있다. 

그런 경우에는 생략이 가능한데 아래와 같다.

 

const obj = { name, age };

 

근데 이거 얼핏 보면 마치 배열같다. 

그런데 이건 배열이 아니라 단축속성명 으로 이루어진 하나의 객체라는 점을 명심하장

 

2. ...  전개구문 (spread operator)

 destructuring과 함께 가장 많이 사용되는 es6 문법 중 하나.

기존 구조를 벗어버리고, 새로운 구조로 덧입혀야 할때 많이 사용한다. 

 

1) 배열에서 사용된 전개구문

만약 arr라는 변수에 4를 추가해야 한다고 생각해 보자.

물론 push 기능을 이용해서 할 수 있지만, 좀더 눈에 잘 보일수 있게 코드를 짤 수 있다. 

바로 이 전개구문을 이용해서.

 

let arr = [1, 2, 3];

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

console.log(newArr);

 

결과값은 이렇다 [ 1, 2, 3, 4 ]

 

애초에 전개구문만을 사용해서 출력하면

저렇게 대괄호가 씌워지지 않고 안에 내용물만 출력된다는 점도 기억하자. 

 

2) 객체에서 사용된 전개구문

 

let user = {

     name : "nbc";

     age : 30;

};

 

let user2 = {...user};

 

위 코드에서 user, 그리고 user2는 동일하다.

 

위처럼 다시 묶지 않아도  spread 만으로도 활용도는 굉장히 높다. 

 

 

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

매개변수의 개수를 정확히 모를때에, 사용하기 좋다. 

 

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

     console.log(a, b, c);

     console.log(...args);

}

 

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

 

출력값은 아래와 같다. 

1 2 3
4 5 6 7

 

 

 

4.  `  `  템플릿 리터럴 (Template Literal)

 

쌍따옴표와 기능은 같으나 좀더 기능이 다양하다.  엄청 많이 쓰임.

java script 코드를 넣을수도,   변수를 넣을수도 있고, 멀티라인을 지원한다. 

 

java script 코드를 넣으려면 $ { }  이걸 쓰면 된다. 

 

console.log(`Hello World ${3+3}`);

 

멀티라인 지원은 무슨말이냐면

console.log(`

     Hello

          my name is java. script

          nice to meet you!

`);

 

이게 가능하다는 말.