modern Javascript 문법

Arrow function

 

기존의 함수 표현식을 사용할때

let add = function(x,y){
	return x+y;
}

arrow function을 사용하여 간단하게 표현했을때

let add = (x,y) => { return x + y; }

arrow function에 return줄만 존재한다면 return과 {}생략 가능 생략가능

let add = (x,y) => x + y;

arrow function의 매개변수가 1개라면 소괄호 생략 가능

let get_arr_length = x => x.length;

arrow function을 사용하여 간단한 익명함수 생성후 실행

(() => {console.log('hi')})()

 

 

(정말 간단하고 사용하기 좋아보이지만 Arrow function은 this를 가지지 않기때문에 신중히 사용!)

 

Destructuring Assignment

 

이름은 구조 분해 할당으로 배열이나 객체의 요소를 다시 할당할 수 있는 구문이다.

let a, b;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

let o = {p: 42, q: true};
let {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true

 

할당시 기본값을 주어 분해한 값이 undefined 일경우 기본값을 가지게 할 수 있다.

let a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

let {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

 

임시 저장 공간 없이 두 변수의 값을 교환할 수도 있다.

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

 

 

새로운 이름의 변수 할당 가능

let {a: aa, b: bb = 5} = {a: 3};

console.log(aa); // 3
console.log(bb); // 5

 

Spread 문법을 사용하며 배열 형태로 받는것도 가능하다

let [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10 
b; // 20 
rest; // { c: 30, d: 40 }

(구조분해할당에서 Spread 문법을 사용하면 나머지가 요소가 새로운 객체의 형태로 들어가게 됨)

 

Rest / Spread 문법

 

argument가 parameter보다 많을때

const add = (a, b, ...rest) => { // 반드시 마지막 파라미터에 ...을 붙여서 사용해야 합니다.
  console.log(a)    // 5
  console.log(b)    // 3
  console.log(rest) // [ 9, 2, 1, 6 ]
}
add(5, 3, 9, 2, 1, 6)

 

배열이나 객체의 요소를 풀어서 표현함

 

let a = [1,2,3];
console.log(...a); //1,2,3

let obj1 = {a:1, b:2};
let obj2 = {b:3, c:4};
let obj3 = {...obj1, ...obj2} //{a:1, b:3, c:4}

 

 

배열이나 객체 복사에 사용

let arr = [1,2,3];
let new_arr = [...arr];

let obj = { a: 1, b: 'hi'}
let new_obj = {...obj}