[JavaScript] 7. JS 심화 문법(1) Destructuring : 구조 분해

Destructing이란, 구조(자료 구조)를 할당하면 좌항에 맞게 알아서 분해해서 할당해주는 것을 말합니다.

let arr = [1, 2, 3];
let [n1, n2, n3] = arr;
console.log(n1, n2, n3);

 

 

활용 1. 객체 프로퍼티 값 참조

let person = {
  name: "홍길동",
  age : 25,
  introduce(){
      console.log(`이름은 ${this.name}이고, 나이는 ${this.age}입니다.`);
  }
}

//var은 window에 선언하는 변수
//let(지역변수)으로 쓰면 this가 window라서 introduce의 이름, 나이값 출력X
var {name, age, introduce} = person;
console.log(name, age);
introduce();

 

 

활용 2. 함수의 파라미터로 전달

func = ({name, age})=>{
  console.log(name, age);
}

let person = {
  name: "홍길동",
  age : 25,
}
func(person);

 

 

---

 

Rest elements를 활용한 구조 분해

Rest elements란, Rest(...)를 이용해 구조를 분해해주는 것을 말한다.

console.log(...[1, 2, 3]);
console.log(...'hello');
//1  2  3
//h  e  l  l  o

 

활용 1. 배열 조작

let arr1 = [1, 2, 3];

//기존 배열 + 새로운 배열 (기존 배열은 변화X)
console.log(arr1.concat([4, 5, 6]));
console.log([...arr1, 4, 5, 6]);

//기존 배열 뒤에 추가
let arr2 = [4, 5, 6];
arr2.push(...arr1);
console.log(arr2);

//기존 배열 앞에 추가
let arr3 = [4, 5, 6];
arr3.unshift(...arr1);
console.log(arr3);

//기존 배열 중간에 추가
let arr4 = [4, 5, 6];
arr4.splice(1, 0, ...arr1); //1번 인자로, 0개 삭제하고 arr1를 넣어라
console.log(arr4);

 

 

활용 2. 객체 조작

const p1={'name':"홍길동", 'age':25, 'address':"서울"}
const p2={...p1, 'address':"대구"}
console.log(p2); //{name: '홍길동', age: 25, address: '대구'}
const p3={'address':"대구", ...p1}
console.log(p3); //{address: '서울', name: '홍길동', age: 25}

 

 

활용 3. 함수의 파라미터로 전달

func = (...rest)=>{
  for(let data of rest){
    console.log(data);
  }
}

func(1, 2, 3);
func(1, 2, 3, 4, 5);