구조 분해 할당 - 배열

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다.

 

과제에서 나왔던 내용을 바탕으로 구조분해할당을 공부해 보려고 한다. (MDN 순서를 따름)

내가 답을 채워 넣었을 때 했던 생각을 그대로 정리해보고 나중에 피드백을 받으면 수정할 예정이다.

 

1. 배열 구조 분해

기본 변수 할당

describe('구조 분해 할당(Destructing Assignment)에 관해서', () => {

  it('배열을 분해합니다', () => {
    const array = ['code', 'states', 'im', 'course']

    const [first, second] = array   // 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의
    expect(first).to.eql(FILL_ME_IN)
    expect(second).to.eql(FILL_ME_IN)

    const result = []
    function foo([first, second]) {
      result.push(second)
      result.push(first)
    }

    foo(array)
    expect(result).to.eql(FILL_ME_IN)
  })

[first, second] = ['code', 'states', 'im', 'course'] 가 되고

first === 'code',

second === 'states' 가 된다.

 

function foo 에서 first, second를 역순으로 result에 푸쉬했으니까 result = ['states', 'code'] 가 될 것 이다.

 

변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있다.

var one, two;			// 변수의 선언이 분리되어도
[one, two] = [1,2];		// 구조 분해를 통해 값을 할당할 수 있다.

console.log(one)	//1
console.log(two)	//2

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

var one, two;
[one = 1, two = 2] = [5]

console.log(one) // 5
console.log(two) // 2 // 분해한 값이 undefined 일 때 기본값을 대신 사용한다.

두 변수의 값을 교환할 수 있다.

var one = 1;
var two = 2;

[one, two] = [two, one];

console.log(one) // 2
console.log(two) // 1

함수가 반환한 배열의 값을 분석할 수 있다.

function f() {
return [1,2];		// f()는 출력으로 배열 [1,2]를 반환한다.
}

var one, two;
[one, two] = f();	// 구조 분해를 통해 값을 분석할 수 있다.

console.log(one) // 1
console.log(two) // 2

필요하지 않은 반환값을 무시할 수 있다.

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

var [one, ,three] = f();

console.log(one) // 1
console.log(three) // 3

//반환값을 모두 무시할 수도 있다.
[,,] = f()

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

it('rest/spread 문법을 배열 분해에 적용할 수 있습니다', () => {
    const array = ['code', 'states', 'im', 'course']
    const [start, ...rest] = array
    expect(start).to.eql(FILL_ME_IN)
    expect(rest).to.eql(FILL_ME_IN) // 분해하고 남은 부분을 하나의 변수에 할당할 수 있다.
    })
    
 // 나머지 요소의 오른쪽 뒤에 쉼표가 있으면 syntaxError가 발생한다.
 // const [first, ...middle, last] = array  // syntaxError