[JavaScript / ES6] Spread Operator

💡 실습 포인트!

💜 Spread Operator

• 연달아서 마침표를 3개 찍으면 그것이 spread operator!
• spread operator 는 항상 대괄호 안, 중괄호 안, 함수 안의 소괄호에서만 사용이 가능

---

💜 Spread Operator 의 역할 알아보기

🤍 Array 에 붙이면 대괄호 제거

let arr = ["hello", "world"];

console.log(arr); // ['hello', 'world']

console.log(...arr); // hello world
console.log("hello", "world"); // hello world

---

🤍 String 에 붙이면 String 을 하나씩 분리

let str = "hello";

console.log(str); // hello

console.log(...str); // h e l l o
console.log("h", "e", "l", "l", "o"); // h e l l o

---

💜 Spread Operator 의 활용 알아보기

🤍 두 개 이상의 Array 를 합치거나 복사할 때 사용 가능

let a = [1, 2, 3];
let b = [4, 5];

let c = [...a];
let d = [...a, ...b];

console.log(c); // [1, 2, 3]
console.log(d); // [1, 2, 3, 4, 5]

let e = [1, 3, 5];
let f = e; // 그냥 등호를 이용하여 복사하면 값을 공유(shallow copy)

e[3] = 7;

console.log(e); // [1, 3, 5, 7]
console.log(f); // [1, 3, 5, 7]

let g = [2, 4, 6];
let h = [...g]; // spread operator 를 이용하여 복사하면 독립적인 값을 가짐(deep copy)

g[3] = 8;

console.log(g); // [2, 4, 6, 8]
console.log(h); // [2, 4, 6]

---

🤍 두 개 이상의 Object 를 합치거나 복사할 때 사용 가능

// copy 하다가 갑 중복이 발생하면 가장 뒤에 위치하는 값을 적용

let o1 = { a: 1, b: 2 };
let o2 = { ...o1, c: 3 };
let o3 = { ...o1 };
let o4 = { ...o1, a: 2 };
let o5 = { a: 2, ...o1 };

console.log(o2); // {a: 1, b: 2, c: 3}
console.log(o3); // {a: 1, b: 2}
console.log(o4); // {a: 2, b: 2}
console.log(o5); // {a: 1, b: 2}

---

🤍 함수에서 파라미터를 넣을 때 사용 가능

function add(a, b, c) {
    console.log(a + b + c);
}

add(1, 2, 3); // 6

let nums = [10, 20, 30];

add(nums[0], nums[1], nums[2]); // 60 => 주먹구구식
add.apply(undefined, nums); // 60 => 옛날방식
add(...nums); // 60 => 요즘방식

---

📌 apply() 와 call()

let person = {
    hello: function () {
        console.log(this.name + " hello");
    },
    age: function (age) {
        console.log(this.name + " " + age);
    },
};

let person2 = {
    name: "Seoyun",
};

person.hello(); // undefined hello

// person2 에 person.hello() 를 적용하고 싶을 때 apply(), call() 사용 가능!
person.hello.apply(person2); // Seoyun hello
person.hello.call(person2); // Seoyun hello

// person2 에 person.age() 를 적용할 때 apply(), call()의 파라미터를 넣는 방법이 다름!
person.age.apply(person2, [30]); // Seoyun 30
person.age.call(person2, 30); // Seoyun 30