3.4.4 [화면 구현] JavaScript: ES6

Spread Syntax

 

• 나머지 매개변수 (rest parameter)

function mergeAll(arg1, arg2, arg3) {
    var msg = '';
    msg = arg1 + arg2 + arg3;
    return msg;
}

console.log(mergeAll('안녕하세요!'));
console.log(mergeAll('안녕하세요!', '반갑습니다~'));
console.log(mergeAll('안녕하세요!', '반갑습니다~', '맹구입니다 :)'));
console.log(mergeAll('안녕하세요!', '반갑습니다~', '맹구입니다 :)', '화이팅!!!'));
/* 
안녕하세요!undefinedundefined
안녕하세요!반갑습니다~undefined
안녕하세요!반갑습니다~맹구입니다 :)
안녕하세요!반갑습니다~맹구입니다 :)
*/


// function mergeInformation(nickname, hobby1, hobby2, hobby3) {
//     var msg = '';
//     hobbies = hobby1 + hobby2 + hobby3;
//     return `나 ${nickname}, 취미는 ${hobbies}죠!`;
// }

function mergeInformation(nickname, ...hobbies) {
    var msg = '';
    for (var hobby of hobbies) {
        msg += hobby;
    }
    return `나 ${nickname}, 취미는 ${msg}죠!`;
}

console.log(mergeInformation('맹구', '놀기', '먹기', '자기'));
console.log(mergeInformation('맹구', '놀기'));
/* 
나 맹구, 취미는 놀기먹기자기죠!
나 맹구, 취미는 놀기죠!
*/


// 나머지 매개변수는 항상 마지막에 있어야 함
// function func(arg1, arg2, ...args) {}

 

• 스프레드 문법 (전개 문법 / spread syntax)

console.log(Math.max(10, 30, 20, 123981));

var arr = [10, 20, 30, 2931, 202, 391];
console.log(Math.max(arr));
console.log(Math.max(arr[0], arr[1], arr[2], arr[3], arr[4], arr[5]));
console.log(Math.max(...arr));

var arr1 = [1, 2, 3, 4, 5];
var arr2 = [-1, -2, -3, -4, -5];
console.log(Math.min(...arr1, ...arr2));

console.log(Math.min(...arr1, -2025, 10, 2, ...arr2, 9, 33));

// 배열 병합에 사용 가능
var mergedArr = [...arr1, ...arr2];
// mergedArr = arr1 + arr2;
// mergedArr = arr1.concat(arr2);
console.log(mergedArr);

// Array.from()처럼 이터러블 배열 변환에 사용 가능
var str = "JavaScript";
console.log(Array.from(str));
console.log([...str]);

 

• 스프레드 문법을 이용한 배열/객체 복사

// 배열 복사
var arr = [2025, 10, 2];
var arrCopy1 = arr;         // 얕은 복사
var arrCopy2 = [...arr];    // 깊은 복사

arrCopy1.push(944);
console.log(arr, arrCopy1); // [ 2025, 10, 2, 944 ] [ 2025, 10, 2, 944 ]

arrCopy1.push(945);
console.log(arr, arrCopy2); // [ 2025, 10, 2, 944, 945 ] [ 2025, 10, 2 ]

// 객체 복사
var obj = {
    name: '맹구',
    job: '떡잎마을 방범대'
};

var objCopy1 = obj;
var objCopy2 = {...obj};

objCopy1["job"] = '선생님';
console.log(obj, objCopy1);     // { name: '맹구', job: '선생님' } { name: '맹구', job: '선생님' }

objCopy2["job"] = '뮤지컬배우';
console.log(obj, objCopy2);     // { name: '맹구', job: '선생님' } { name: '맹구', job: '뮤지컬배우' }

 

 

Distructuring Assignment (구조 분해 할당)

 

구조 분해 할당을 사용하면 배열이나 객체를 변수로 '분해'하여 연결할 수 있다.

 

• Array Distructuring Assignment (배열 구조 분해 할당)

// [ 기본 문법 ]
let nameArr = ['Maenggu', 'Lee'];

// let firstName = nameArr[0];
// let lastName = nameArr[1];

let [firstName, lastName] = nameArr;

console.log(`저는 ${lastName}가 ${firstName} 입니다.`);

// 일부 추출
let lunchSet = ['더블비프치즈버거', '감자튀김', '콘샐러드', '제로콜라'];
let [burger, , , drink] = lunchSet;
console.log(`나는 다이어트 중이라 ${burger}랑 ${drink}만 먹을게 ^_^!`);



// 활용 1: 객체 프로퍼티 할당
let user = {};
[user.lastName, user.firstName] = "Nam Yunjin".split(" ");
console.log(user);

// 활용 2: Object.entries()와 조합
console.log(Object.entries(user));

for (let [key, value] of Object.entries(user)) {
    console.log(value);
}

// 활용 3: 변수 교환
let cup1 = '아샷추';
let cup2 = '카페라떼';

// 불가
// cup1, cup2 = cup2, cup1;

// 구조 분해 할당을 하지 않을 때의 기존 방식
// let temp = cup1;
// cup1 = cup2;
// cup2 = temp;

[cup1, cup2] = [cup2, cup1];
console.log(cup1, cup2);

// 활용 4: rest parameters와 조합
let [king, queen, jack, ace, ...numbers] = ['KING', 'QUEEN', 'JACK', 'ACE', 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(king);
console.log(queen);
console.log(jack);
console.log(ace);
console.log(numbers);

// 활용 5: 기본값 설정 가능
let userArr = ['맹구', 190, '서울시 금천구'];
let [name, height, address, job='떡잎마을 방범대', skill='LLM'] = userArr;
console.log(name, height, address, job, skill);

 

• Object Distructuring Assignment (객체 구조 분해 할당)

// [ 기본 문법 ]
let toy = {
    productName: '티니핑 인형',
    color: '분홍',
    price: 35000
};

// 프로퍼티 key (순서 무관)
let {productName, color, price} = toy;
console.log(`${productName}은 ${color}색이고 ${price}원이다...`);

// 별칭 부여
let {productName: pn, color: co, price: pr} = toy;
console.log(`${pn}은 ${co}색이고 ${pr}원이다...`);

// 일부 추출
let {productName: pname} = toy;
console.log(`${pname} 사러 갈래...?`);

// 기본값 설정
let {productName: pron, color: col, price: prc, subName: sub='하츄핑'} = toy;
console.log(`${pron}중에서도 ${sub}은 ${col}색이고 ${prc}원이다...`);



// 활용: rest parameters와 조합
let {productName: prn, ...rest} = toy;
console.log(prn);
console.log(rest);

// 만약 let 없이 쓴다면?
let product_name, color_, price_;

({productName: product_name, color: color_, price: price_} = toy);
console.log(product_name, color_, price_);