Destructuring Assignment (구조분해할당)

구조분해 할당 

구조분해 할당은 배열이나 객체의 속성을 해체해서  그 값을 개별 변수에 담을수 있게 하는 자바스크립트 표현식이다

 

1.문법

구조분해의 기본 문법은 아래와 같습니다.

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

const [c, d, ...rest] = [1, 2, 3, 4, 5, 6, 7];
console.log(c); // 1
console.log(d); // 2
console.log(rest); // [3, 4, 5, 6, 7]

const { e, f } = { e: 1, f: 2 };
console.log(e); // 1
console.log(f); // 2

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

구조분해 할당의 좌변 은 값을 담을 변수, 우변 에는 값을 널을 변수가 됩니다. 이 문법을 처음에는 어떤식으로 이해해야하는지 몰랐는데 천천히 보고 밑에 글을 다 정리한후 보니까 이해가 같다  

 

 

2.배열의 구조분해 할당

배열의 구조 분해 할당을 할때는 위치,순서가 중요하다 그에 따라 담기는 값이 달라진다 만약에 중간에 값이 비거나 변수가 비면 그 안에 담길 값들이 내가 생각한데로 이루어지지 않고 밀리거나 당겨져서 들어가므로 원한는 결과가 일어나지 않는다 

 

기본 변수 분리한 할당

 

배열 구조분해 변수에 값을 할당하는 기본 방법은 아래와 같습니다.

var foo = ['one', 'two', 'three'];
var [one, two, three] = foo;

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

foo에 one, two, three를 각각 저장한 후, 변수 one two three에 구조분해로 할당되어 출력되는 것을 확인 할 수 있습니다. 

 

선언에서 분리한 할당

 

변수 선언과 할당을 분리하여 배열 구조분해 할당을 할 수 있습니다.

var a, b;

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

 

기본값 설정

 

배열 구조분해는 기본값 설정이 가능합니다.

var a, b;

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

a=5, a=7로 기본값을 할당하였습니다. a에는 1이 할당되었고, b에는 값이 할당되지 않았기 때문에 기본값인 7이 할당된 것을 확인 할 수 있습니다.

 

값 교환 

 

스와핑, 두개의 값 교환을 배열 구조분해를 사용하면 한줄로 표현이 가능합니다. 

이건 약간 이해했는데 실무에서 어떤식으로 쓰일지 가늠이 안간다 

var [a, b] = [1, 3];

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

함수의 반환된 배열

 

함수에서 반횐된 배열로도 구조분해 할당이 가능합니다. => 자바스크립트의 함수는 1급함수 이기 때문입니다.

여기서 말하는 1급 함수는 다음에 찾아봐야겠다

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

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

foo() 에서 배열 [1,2]를 리턴합니다. 이 리턴 값으로 구조분해 할당하여 변수 a와 b에 값이 출력되는 것을 확인 할 수 있습니다.

 

값 무시하기

이걸 잘 이용하면 내가 원하는 데로 어느정도 자유롭게 출력할수 있을거 같다 

function foo() {
  return [1, 2, 3];
}
var [a, , b] = foo();
console.log(a); // 1
console.log(b); // 3

[a, , b] = [4, 5, 6];
console.log(a); // 4
console.log(b); // 6

리턴된 값 2와 할당된 값 5를 무시한 상태로 할당되는 것을 확인할 수 있습니다.
아래 처럼 모든 값을 무시하는 것도 가능합니다.

[,,] = [1, 2, 3, 4, 5];

 

 

전개연산자를 이용해 저장

 

...(전개연산자)를 이용해 나머지 배열을 변수에 할당이 가능합니다.

var [a, ...b] = [1, 2, 3];

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

 

3. 객체 구조 분해 할당

 

기본변수 할당

var a = { p: 42, q: true };
var { p, q } = a;

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

선언에서 분리한 할당

var { a, b } = { a:1, b:2 };

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

새로운 변수 이름에 할당

var a = { p: 42, q: true };
var { p: foo, q: bar };

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

중첩된 객체와 구조 분해 할당

var metadata = {
  title: 'Scratchpad',
  translations: [
    {
      locale: 'de',
      localization_tags: [],
      last_edit: '2014-04-14T08:43:37',
      url: '/de/docs/Tools/Scratchpad',
      title: 'JavaScript-Umgebung',
    },
  ],
  url: '/en-US/docs/Tools/Scratchpad',
};

var {
  title: englishTitle,
  translations: [{ title: localeTitle }],
} = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"

 

fot...of 문에서 구조 분해

var people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith',
    },
    age: 35,
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones',
    },
    age: 25,
  },
];
for (var {
  name: n,
  family: { father: f },
} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
}
// "Name: Mike Smith, Father: Harry Smith" 
// "Name: Tom Jones, Father: Richard Jones"

매개변수에서 구조분해

개인적으로 이 구조분해는 많이 쓰이는 것 같습니다.

var user = {
  id: 42,
  displayName: 'jdoe',
  fullName: { firstName: 'John', lastName: 'Doe' },
};

function userId({ id }) {
  return id;
}

console.log(userId(user)); // 42

동적 변수 이름 사용

let target = "z"; 
let { [target]: foo } = { z: "bar" };

console.log(foo); // "bar"

 

 

 

https://charming-kyu.tistory.com/23 참조