자바스크립트8 - 구조 분해 할당 & 전개 구문

 

이번 포스팅에서는 자바스크립트에서의 구조 분해 할당에 대해 다뤄보고자 한다.

---

 

 

구조 분해 할당(Destructuring assignment)

• 배열 or 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 js 표현식
• 배열과 객체를 편하게 사용하기 위함
• 배열 or 객체에 저장된 데이터의 일부를 가지고 오고 싶을 때 주로 사용
• 배열 구조 분해, 객체 구조 분해

 

 

 

배열 구조 분해

• const[변수명] = 배열;
• [ ]에 들어간 각 변수에 배열의 인덱스 순으로 대응
• 구조 분해시 변수의 값이 undefined일 때, 기본값 할당 가능
• 구조 분해 없이 두 변수의 값 교환 가능(임시변수 temp를 선언하여 값을 임시로 저장하고 교환하여야 함)

/* 1. 배열의 구조 분해 할당 */
const arr2 = ['빨', '주', '노', '초'];
// '노'는 저장하고 싶지 않으면 변수명을 비워두면 됨
const [red, orange, ,green] = arr2;
console.log(red, green); // '빨' '초'

// 두 변수의 값을 쉽게 교환 가능
let x='first';
let y='second';
[x, y] = [y, x];
console.log(x, y); // 'second' 'first'

 

 

 

 

객체 구조 분해 할당

• const{변수} = 객체;
• 객체의 속성 값을 변수명으로 사용
• 콜론(:)을 이용해 새 변수명을 선언하고, 원래의 값을 새 변수명에 할당 가능
• 변수 선언 순서에 따라 값이 할당(배열 구조 분해~)되는 것이 아닌, key의 이름에 따라서 변수에 값이 할당됨
• 객체의 속성 값을 객체의 key로 접근하는 것이 아닌, 변수로 접근하기 위해서 사용

/* 2. 객체의 구조 분해 할당 */
const obj = {
    title:'제목',
    content:'내용',
    number:0
};

// 객체 구조 분해 할당(title은 t2 변수명으로-)
const {content, title:t2, number} = obj;
console.log(t2); // '제목'

 

 

 

 

전개구문(spread) ...

• 전개구문을 사용할 객체 앞에 연산자 ...를 붙여서 사용
• 반복 가능한 객체(배열, 유사 배열, 문자열 등)에 사용하는 문법
• 객체의 요소에 접근해서 요소들을 하나씩 분리해 전개

/* 전개 구문... */
const arr3 = [1,2,3,4,5];
const arr4 = ['a', 'b', 'c'];

// arr3와 arr4 두 배열 합치기
// M1 - concat() 함수 사용
const arr5 = arr3.concat(arr4);
console.log(arr5); // [1, 2, 3, 4, 5, 'a', 'b', 'c']

// M2 - 전개구문 사용
const arr6 = [...arr3, ...arr4]
console.log(arr6); // [1, 2, 3, 4, 5, 'a', 'b', 'c']

// 문자열 -> 배열
const str = 'alliehigh';

// M1 - split() 함수 사용
let strToArr1 = str.split(""); // ['a', 'l', 'l', 'i', 'e', 'h', 'i', 'g', 'h']
console.log(strToArr1);
// M2 - 전개구문 사용
let strToArr2 = [...str];
console.log(strToArr2); // ['a', 'l', 'l', 'i', 'e', 'h', 'i', 'g', 'h']


// object spread
const me1 = {
    name:'hy',
    height:165,
    friend:null,
    married:false
};

const me2 = {
    name:'hyhy',
    like:['게임하기', '놀러가기'],
    greeting: function(){
        console.log(`안녕하세요, 제 이름은 ${this.name}, 키는 ${this.height}입니다.`); // 객체 자기자신
    }
};

// 두 오브젝트 합치기
let me = {...me1, ...me2}; // 두 객체의 키가 중복된다면, 뒤에 합쳐지는 키로 반영됨
me.greeting(); // 안녕하세요, 제 이름은 hyhy, 키는 165입니다.

 

 

위의 예제 코드를 봐보자. 맨 아래에 작성된 object에서의 spread를 보면, spread를 사용할 두 객체 me1과 me2에 name key가 중복된다는 것을 알 수 있다. 하지만, 두 객체가 합쳐진 me는 name:'hyhy'가 된다. 그 이유는, 합쳐질 두 객체의 key 중에서 중복되는 key가 있다면, 뒤에 오는 me2의 value값으로 반영되기 때문이다.

 

 

// rest
const obj2 = {
    title:'제목',
    content:'내용',
    num:0,
    key4:'value4',
    key5:'value5'
}

const {title:a, content:b, num:c, ...obj3} = obj2; // 나머지 key는 obj3로 들어감
console.log(obj3); // { key4: 'value4', key5: 'value5' }

function test(...value){
    console.log(value); // [ 1, 2, 3, 4, 5, 6 ]
    const [a, b, ...rest] = value;
    console.log(rest); // [ 3, 4, 5, 6 ]
}

test(1, 2, 3, 4, 5, 6);

 

 

spread vs rest

• spread 파라미터 - 호출하는 함수의 파라미터에 사용
• rest 파라미터 - 호출받는 함수의 파라미터에 사용
  • 호출하는 함수의 파라미터 순서에 맞춰 값 설정 후 남은 파라미터 값을 배열로 설정