Destructuring Assignment & Rest parameter

Destructuring Assignment (구조분해 할당)

객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조입니다.

키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용하죠.

개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 합니다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 하죠.

이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment) 을 사용할 수 있습니다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘합니다.

배열 분해하기

배열이 어떻게 변수로 분해되는지 예제를 통해 살펴봅시다.

// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]

*// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surname] = arr;*alert(firstName); // Bora
alert(surname);  // Lee

이제 인덱스를 이용해 배열에 접근하지 않고도 변수로 이름과 성을 사용할 수 있게 되었습니다.

아래 예시처럼 split 같은 반환 값이 배열인 메서드를 함께 활용해도 좋습니다.

구조 분해 할당이란?

• MDN 정의에 따르면 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식
• js 뿐만 아니라 C언어에도 있는 문법인 것 같다

예시를 살펴보자.

기본값

MDN에 따르면 변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용한다고 한다.

let x,y

[x=1, y=2] = [1]
console.log(x) // 1
console.log(y) // 2

위의 경우 배열에 1이라는 값이 들어갔기 때문에 x는 1이다.null이나 0이 들어가는 경우는 어떻게 될까?

let x,y

[x=1, y=2] = [null]
console.log(x) // null
console.log(y) // 2

null 대신 0을 넣어도 x는 0이 나온다.빈 배열을 넣었을 때도 0이 나올줄 알았는데, x의 값이 1로 잘 나온다.분해한 값이 undefined일때 그 값을 대신 사용한다는 말이 이 말인가보다.

객체에서 변수 재할당

const basket = {
  shineMusket : 12000,
  tangerine: 8000
}

basket 객체 안의 tangerine이라는 property를 grapeFruit으로 바꾸고 싶음

구조분해 할당 없이 변수명 재할당

const grapeFruit = basket.tangerine

걍 새로운 변수명에 basket의 tangerine과 같은 값을 대입해준다.그러면 구조 분해 할당 없이 재할당 가능쓰!

구조분해 할당을 이용해 변수명 재할당

const { tangerine: grapeFruit } = basket

console.log(grapeFruit) //8000
console.log(basket) // let basket = { shineMusket : 12000, tangerine: 8000}

basket이라는 원본 객체의 값은 변하지 않지만, grapeFruit 변수에 basket.tangerine과 동일한 값을 적용했다!

흔하디 흔한 리액트 객체 구조 분해 할당 예시

// 생략
this.state = {
  like: 0,
  follow: 0
}
// 생략

const { like, follow } = this.state;

props를 받아오거나 클래스형 컴포넌트에서의 state 값을 쓸 때 구조 분해 할당을 이용해주면반복되는 당연한 단어들을 줄여줘서 좀 더 편리하다

배열에서 변수 재할당

const cafeMenu = ['iceLatte', 'iceDolceLatte']

cafeMenu 배열에서 myPick이라는 변수에 iceLatte를, yourPick이라는 변수에 iceDolceLatte를 할당하고 싶을때

구조분해 할당 없이 변수명 재할당

const myPick = cafeMenu[0];
const yourPick = cafeMenu[1];

걍 새로운 변수명에 cafeMenu 배열 안의 값을 대입해준다.그러면 구조 분해 할당 없이 재할당 가능쓰!

구조분해 할당을 이용해 변수명 재할당

const [myPick,yourPick] = cafeMenu
console.log(myPick) // 'iceLatte'
console.log(yourPick) // 'iceDolceLatte'
console.log(cafeMenu) // ['iceLatte', 'iceDolceLatte']

cafeMenu라는 원본 배열 값의 변화 없이 새로운 변수에 basket.tangerine과 동일한 값을 적용했다!이걸 실제로 어디다 쓰긴 쓸까 의문이었는데 쓰이더라...!

로그인 로직에서의 배열 구조 분해 할당 예시

// 생략
  const [shouldBeBearer, token] = req.headers.authorization.split(' ');
// 생략

로그인 시 나오는 token은Bearer hbTeF4m9hwXiojVHl3OobCOpunP-Rcas <- 길어서 좀 자름이런식으로 Bearer 띄어쓰고 토큰값이 string 형태로 온다.그래서 띄어쓰기 단위로 split해준 다음에 Bearer와 token을 분리해준다.그러면 앞에 Bearer는 필요 없으니까 뒤의 token값만 가져다 쓰면 짱짱 편리!

rest가 들어갈 경우

MDN 설명에 따르면.. 배열을 구조 분해할 경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있다고 한다.예시를 보자!

const [a, ...maybe] = ['보건', '보건교사다', '나를아느냐', '나는안은영']
console.log(a) // '보건'
console.log(maybe) // [ '보건교사다', '나를아느냐', '나는안은영' ]

나름 심화 - for of 문에서 구조 분해 할당

Object.entries를 이용해 객체에서 각각의 key, value를 뽑아내려고 할 때

const user = {
  userName: 'dooreplay',
  level: 6445
}

for(let [key, val] of Object.entries(user)) {
  console.log(`${key} : ${val}`)
}

// 'userName : dooreplay'
// 'level : 6445'

이렇게 할 경우 콘솔을 찍어보면 userName과 level 정보가 차례로 찍힌다.근데 user가 여러명일 경우에는 어떻게 될까?

const userInfo = [{
  userName: 'dooreplay',
  level: 6445
},{
  userName: 'OSPark',
  level: 7630
},{
  userName: 'soooni',
  level: 1245
}]

이 경우에는 객체 구조 분해 할당을 이용해준다.

const showUserInfo = arr => {
  for(let {userName: n, level: l} of arr) {
  console.log(`캔디크러쉬 사용자 정보를 알려드립니다. 사용자 이름은 ${n}이고, 레벨은 ${l} 입니다`)
  }
}

showUserInfo(userInfo)

콘솔에 깔끔하게 잘 나오고 있다. 굿굿

TMI : 내 캔디크러쉬 사가 실제 레벨은 2020-10-26 오전 1:19 기준 실제로 6445 이다.박옥숙님과 1위를 앞다투다 이제 박옥숙님의 레벨이 넘사가 되었다. 언젠가는 다시 따라 잡을거다.캔디크러쉬 사가 전국 1등으로 정복 전에 리덕스 사가 정복이 먼저!

---

Rest 파라미터 (Rest Parameter)

Rest 파라미터는 Spread 연산자(...)를 사용하여 함수의 파라미터를 작성한 형태를 말한다.

즉, Rest 파라미터를 사용하면 함수의 파라미터로 오는 값들을 "배열"로 전달받을 수 있다.

(Java에서 public static void func(String... strs){...} 이런식의 가변인자와 유사)

사용 방법은 파라미터 앞에 (...)을 붙인다.

ES5에서도 가변 인자 함수의 경우 arguments 객체를 통해 인자값을 확인할 수 있었다.

그렇다면 arguments와 rest파라미터의 차이점은 무엇일까?

답부터 말하면 arguments는 유사 배열 객체고 rest는 배열이다.

유사 배열 객체(array-like object)는 간단하게 순회가능한(iterable) 특징이 있고 length 값을 알 수 있는 특징이 있는 것이다. 즉, 배열처럼 사용할 수 있는 객체를 말한다.

무슨 말이냐면 arguments는 유사배열객체이기 때문에 Array 오브젝트의 메서드를 사용할 수 없다.

따라서 ES6에서는 arrow function에 arguments는 사용할 수 없을 뿐더러 Rest 파라미터를 사용하면 더 유연한 코드를 작성할 수 있는 것이기 때문에 Rest 파라미터 사용을 권장한다.

출처:

https://jeong-pro.tistory.com/117

[기본기를 쌓는 정아마추어 코딩블로그]