34. 스프레드(Spread)

스프레드(Spread) 연산자 -> 전개구문

- 모든 Iterable은 Spread가 될 수 있음
- 순회가능한 데이터는 펼쳐 질 수 있음

function 함수명(...Iterable)
    [...Iterable]
    {...obj}

스프레드 연산자 사용

function add(num1, num2, num3) {
    return num1 + num2 + num3;
}

const nums = [10,20,30];
console.log(add(nums[0], nums[1], nums[2])); // 60
// 스프레드 연산자 사용
console.log(add(...nums)); // 60

매개변수에서 스프레드 연산자 사용

// 매개변수에서 스프레드 연산자 사용
function sum(num1, num2, ...nums) {
    console.log(nums);
}

sum(1, 3, 7, 10, 4, 8, 9); // [7, 10, 4, 8, 9]

const fruits1 = ['🍓','🍉'];
const fruits2 = ['🍊','🍌'];
let arr = fruits1.concat(fruits2);
console.log(arr); // (4) ['🍓', '🍉', '🍊', '🍌']
arr = [...fruits1, '🎁',...fruits2];
console.log(arr); // (5) ['🍓', '🍉', '🎁', '🍊', '🍌']

object에서 스프레드 연산자 사용

const apple = {name:"김사과", age:20, address:{si:'seoul'}};
console.log(apple); // {name: '김사과', age: 20, address: {…}}
// object에서 스프레드 연산자 사용
const apple_update = {...apple, job:'프로그래머'}; 
console.log(apple); // {name: '김사과', age: 20, address: {…}}
console.log(apple_update); // {name: '김사과', age: 20, address: {…}, job: '프로그래머'}

function display({name, age, job}) {
    console.log('이름', name);
    console.log('나이', age);
    console.log('직업', job);
}
console.log(apple_update); // {name: '김사과', age: 20, address: {…}, job: '프로그래머'}
display(apple_update);
/*
이름 김사과
나이 20
직업 프로그래머
*/

const {name,age,pet="루시",job:hobby} = apple_update;
console.log(name); // 김사과
console.log(age); // 20
console.log(pet); // 루시
console.log(hobby); // 프로그래머

const component = {
    name:'button',
    styles:{
        size:20,
        color:"black"
    }
};

function changeColor({styles:{color}}) {
    console.log(color);
}
changeColor(component); // black

배열에서 스프레드 연산자 사용

// 배열에서 스프레드 연산자 사용
// 구조 분해 할당
const fruits = ['🍌', '🍊', '🍉', '🍓', '🍋']
const [fruit1, fruit2, ...outhers] = fruits;
console.log(fruit1); // 🍌
console.log(fruit2); // 🍊
console.log(outhers); // (3) ['🍉', '🍓', '🍋']

const point = [1,2];
// z의 값은 0으로 들어감
const [x, y, z=0] = point;
console.log(x); // 1
console.log(y); // 2
console.log(z); // 0

function sendImoji() {
    return ['🍌', '🍊', '🍉', '🍓', '🍋'];
}

const [banana, orange, watermelon, berry, lemon] = sendImoji();
console.log(banana); // 🍌
console.log(orange); // 🍊
console.log(watermelon); // 🍉
console.log(berry); // 🍓
console.log(lemon); // 🍋