「웹해킹을 위한 자바스크립트(Javascript) 훑어보기」- 6. 전개(spread)와 분해

본 글은 Udemy(유데미)에서 제공하는 Colt Steele님의 「The Web Developer 부트캠프 2023」 강의를 수강하며 배운 내용을 바탕으로 작성했습니다.
웹 해킹 및 보안에 쓰이는 자바스크립트 코드를 보고 이해할 수 있는 수준에 다다르기 위해 전반적인 내용을 가볍게 훑어보는 기획입니다.

spread

spread는 전개 구문으로, 내응을 하나하나 분리합니다.

---

함수 호출 시

const nums = [13,4,5,21,3]
Math.max(nums) //NaN
Math.max(...nums)  //21

위 코드에서 Math.max() 함수는 개별적인 숫자 인수를 받아 최댓값을 반환합니다.

그냥 nums 배열을 넘겨주게 되면 배열 자체를 숫자로 변환할 수 없으므로 NaN(Not a Number)을 반환합니다.

이 문제를 해결하려면 ...이라는 전개 연산자를 사용합니다. 전개 연산자를 사용하면 배열의 요소를 '전개'해 개별적인 인수로 전달하므로 원하는 결과값인 21을 반환합니다.

---

전개 연산자 활용

const num1 = [1,2,3]
const num2 = [4,5,6]
const num3 = [...num1, ...num2] //[1,2,3,4,5,6]

전개 연산자를 이용하여 num3에 num1과 num2의 원소를 분해해 추가할 수 있습니다.

---

객체 spread

const person = {
    name : 'Jack',
    age : 20
}
const newPerson = {...person, job: 'teacher'}
//{name: 'Jack', age: 20, job: 'teacher'}

앞서 새 배열을 만들 때 전개연산자를 이용해 기존 배열의 원소를 복사했듯이, 객체 역시 같은 방법으로 내용을 복사할 수 있습니다.

---

rest 매개변수

인수 객체

function sum() {
    console.log(arguments)
}

sum(1,2,3)
/*
Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
0: 1
1: 2
2: 3
*/

인수 객체는 배열과 유사한(array-like) 객체입니다. 함수가 호출될 때 넣은 인수가 배열처럼 0부터 번호가 매겨저 들어갑니다.
다만 배열은 아니므로 reduce 등의 메서드는 사용할 수 없습니다.

---

rest 매개변수

function sum(...nums) {
    console.log(nums)
}

sum(1,2,3)
//(3) [1, 2, 3]

rest 매개변수는 자동으로 나머지 인수를 모아서 배열로 만들어줍니다. 함수의 인자에 ... 연산자를 추가해 명시합니다.

---

분해

...연산자를 이용하면 객체를 분해할 수도 있습니다.

 

배열 분해

const nums = [1,2,3,4,5]
const [one, two, ...otherNums] = nums;
//one: 1, two: 2, otherNums: [3,4,5]

위의 코드에서는 nums 배열 중 두 번째 원소까지는 one, two라는 이름을 주었고, 나머지 원소는 ... 연산자를 이용해 otherNums라는 배열에 묶어서 저장합니다.

---

객체 분해

const person = {
    name : 'Jack',
    age : 20
}
//const name = person.name
const {name} = person
const {name: firstName} = person //firstName이라는 변수에 값 저장

객체는 위와 같은 방식으로 분해합니다.

기본 문법은 아래와 같습니다.

let {var1, var2} = {var1:…, var2:…}

대입 연산자 좌측에 분해한 결과와 짝지을 변수를, 우측에 분해하고자 하는 객체를 넣습니다.

let {name, age} = person;
//name = 'Jack', age = 20

---

매개변수 분해

const person = {
    name : 'Jack',
    age : 20
}

function fullName({name, age}) {
    return `${name}, ${age}`
}

fullName(person)
//'Jack, 20'

매개변수 모두를 객체에 모아 함수에 전달합니다. 함수에 객체를 전달하면 객체를 분해해 변수에 할당합니다.