2020/10/20 - TIL (구조 분해 할당, this, call, apply, bind)

오늘 했던 일

• 구조 분해 할당

 

 

구조 분해 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

 

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(a);//10
console.log(b);//20
console.log(rest);//[30, 40, 50]

 

 

 

배열 구조 분해

기본 변수 할당

 

let arr = ['one', 'two', 'three'];

let [one, two, three] = foo;

console.log(one);// 'one'
console.log(two);// 'two'
console.log(three);// 'three'

 

Default

변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용합니다.

let a, b;

[a = 5, b = 7] = [1];

console.log(a);// 1
console.log(b);// 7

 

함수가 반환한 배열

function foo() {
  return [1, 2];
}

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

 

 

변수에 배열의 나머지를 할당

배열을 구조 분해할 경우, spread syntax를 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있습니다.

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

 

 

 

객체 구조 분해

기본 할당

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

console.log(p); // 42
console.log(q); // true

 

 

새로운 변수 이름으로 할당하기

객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수에 할당할 수 있습니다.

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

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

 

 

default

객체로부터 해체된 값이 undefined인 경우, 변수에 기본값을 할당할 수 있습니다.

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

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

 

 

 

 

this, call apply, bind 내용 정리

kkopark73.tistory.com/22?category=841120

2020/10/01 - TIL (this, call, apply, bind)