Destructuring assignment(구조분해할당)

8003 단어 JavaScriptJavaScript

destructuring assignment(구조분해할당)
: 배열,객체의 각 요소를 한번에 개별 변수로 담을 수 있음.
:원래 변수에서 어떤 값을 분해해 할당할지 정의함.

<배열 구조 분해>

// 예제1 - 기본예제
      const [a, b, c, d, e] = [1, 2, 3, 4, 5];

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

// 예제2 - 변수에 배열의 나머지를 할당하기
      let [first, ...x] = ['a', 'b', 'c', 'd'];

      console.log(first, x); // a, [b,c,d]

// 예제3 - 해당값이 없을때 기본값 설정해주기
      let [a, b, c = 'cherry'] = ['apple', 'banana'];

      console.log(a, b, c); // apple, banana, cherry

// 예제4 - a,b의 각 값을 바꾸기
      let a = 1;
      let b = 2;
      [b, a] = [a, b];

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

<객체 구조 분해>

  • 배열은 받을 변수의 인덱스 순서를 생각해야 하는데
    객체는 프로퍼티명만 맞으면 되서 순서 신경쓸 필요x
// 객체 예제1
      let { age, name } = { name: 'jihyun', age: 20 };
      console.log(name, age); // jihyun,20

//객체 예제2
      let { a, b, ...x } = { a: 10, b: 20, c: 30, d: 40 };
      console.log(a, b, x); // 10, 20, {c:30,d:40}

//객체 예제3 - 새로운 변수 이름으로 할당
      let obj = { p: 42, q: true };
      let { p: foo, q: bar } = obj;
      console.log(foo, bar); // 42,true

좋은 웹페이지 즐겨찾기