Spread 연산자 (Spread 문법)

스프레드 연산자는 배열이나 객체의 모든 요소를 개별적으로 펼친다. 문자열로 변환하는 게 아닌, 각 요소가 개별적으로 다룰 수 있게 되는 것이다.

만약 a가 다음과 같고, console.log(a)를 출력해 본다면 배열이 사라지고 각 요소를 개별적으로 다루게 된다.

a = ["하나", "둘", "셋", "넷", "다섯"];
console.log(a); // ["하나", "둘", "셋", "넷", "다섯"]
console.log(...a); // "하나", "둘", "셋", "넷"

Spread 연산자를 사용하는 예시는 크게 네 가지로, 배열 복사와 배열 합치기, 객체 복사 및 병합과 함수 인자가 있다.

배열 복사

Spread 연산자를 통해 아래와 같이 배열을 쉽게 복사할 수 있다.

let arr = [1, 2, 3];
let copy = [...arr]; // [1, 2, 3]

배열 합치기

Spread 연산자를 통해 여러 배열을 합쳐서 한 배열로 만들 수 있다.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

객체 복사 및 병합

Spread 연산자는 객체에서도 사용할 수 있으며, 아래와 같이 객체를 복사 또는 병합할 때 사용될 수 있다.

let obj1 = {a: 1, b: 2};
let obj2 = {c: 3, d: 4};

// 객체 복사
let copy = {...obj1}; // {a: 1, b: 2}

// 객체 병합
let combined = {...obj1, ...obj2}; // {a: 1, b: 2, c: 3, d: 4}

함수 인자

Spread 연산자는 함수 인자를 배열로 받을 때 사용된다.

function sum(...args) {
    return args.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

indexOf()

배열에서 indexOf() 사용하기

배열에서 n번 째 index에 놓인 요소를 출력하려면 array[n] 처럼 작성하면 된다. 이와 반대로 해당 요소가 몇 번째 index인지를 출력하기 위해선 indexOf() 함수를 사용해야 하는데 그 예시는 아래와 같다.

let arr = [1, 2, 3, 4, 5];
arr.indexOf(3); // 4

추가로 배열에서 가장 큰 숫자의 인덱스를 알기 위해선 indexOf()와 Spread 문법(...)을 사용해서 아래와 같이 구할 수 있다.

let arr = [1, 2, 3, 4, 5];
arr.indexof(Math.max(...arr)); // 4

반드시 Spread 문법 (...)을 통해 배열을 펼친 후, 그 펼쳐진 배열에서 큰 숫자의 인덱스를 출력하는 방식으로 진행해야 한다.

문자열에서도 동일하게 작동하며, 꼭 한 개의 문자만 입력하지 않고 단어를 입력해도 된다. 아래는 문자열에서 사용한 방식이다.

let a = "abcdefghi";
console.log(a.indexOf("c") // 2
console.log(a.indexOf("efg")) // 4

문자열에서 indexOf() 사용하기

문자열에서도 indexOf()를 사용할 수 있는데 문자열 안에 특정한 문자가 포함되어 있는지도 확인할 수 있다. 아래는 문자열의 몇 번째 index에 해당 문자가 있는지 확인하는 코드이다.

let a= "안녕하세요";
a.indexOf("하") // 2

이와 비슷하게 문자열에 특정 문자가 있는지 또는 공백이 있는지 확인할 수 있다.

let a = "안녕하세요";
a.indexOf(" ") // -1

이 때, -1은 부정을 의미한다.

join()

join()은 배열의 모든 요소를 연결하여 새 문자열을 만들어 반환한다. 원본 배열을 변경하지 않으며, 구분자는 어떤 것이든 지정 할 수 있다. join()의 기본 구문은 아래와 같으며 separator는 선택적 매개변수로, 매개변수를 넣으면 요소 사이사이에 매개변수가 들어가게 된다.

array.join(separator)

join()의 사용 예시는 아래와 같다.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = fruits.join(); // "Banana,Orange,Apple,Mango"
let textAnd = fruits.join(" and "); // "Banana and Orange and Apple and Mango"

만약 아래처럼 구분자를 지정하지 않고, ("")를 사용한다면 단어들이 합쳐진다.

let a = [1, 2, 3, 4, 5];
console.log(a.join("")); // 12345