[JavaScript/TypeScript] 펼침 연산자 효과적으로 사용하기

[JavaScript/TypeScript] 펼침 연산자 효과적으로 사용하기

지금까지 펼침 연산자를 일부 데이터를 수정하는데에만 사용하고 있었다.

const emp = { name: 'kim', age: 20, nick: 'bom' }; function setPerson(emp: { name: string; age: number; nick: string }) { return [{ ...emp, age: 30 }]; } const newEmp = setPerson(emp);

하지만 펼침 연산자는 더 많은 쓰임이 있다.

코드를 알아보기 쉽게 만들어준다는것과 원본 데이터 조작을 막을 수 있다는 것이 있다.

먼저 첫번째 쓰임을 예를들어보면

const fruits = ['apple', 'banana', 'cherry']; function removeFruite(fruits: any[], willRemove: string) { const index = fruits.indexOf(willRemove); return fruits.slice(0, index).concat(fruits.slice(index + 1)); // 이 방법보다는 return [...fruits.slice(0, index), ...fruits.slice(index + 1)] // 이 방법이 알아보기 쉽다 } removeFruite(fruits, 'banana');

혹은

const fruits = ['apple', 'banana', 'cherry']; const copied = fruits.slice(); // 리스트 복사 됨 const copied = [...fruits]; // 직관적

이처럼 concat이나 slice 메서드를 사용해 배열을 조작하는 경우에 그 메서드를 모른다면 코드를 알아보기 어려울 수 있다.

펼침 연산자를 사용한다면 훨씬 직관적인 코드 작성이 가능하다.

펼침 연산자의 또 다른 이점인 원본 데이터의 변경을 피하고 데이터를 조작하는것의 예를 들어보자면

과일가게의 모든 고객에게 10%할인을 해줄것이고 과일을 3개 이상 산 고객에게는 덤으로 오렌지를 하나씩 줄 것이다.

const fruits = [ { kind: 'apple', price: 200 }, { kind: 'banana', price: 400 }, { kind: 'cherry', price: 500 }, ]; const bonus = { kind: 'orange', price: 100 }; function addFruit(fruits: { kind: string; price: number }[]) { fruits.push(bonus); // 원본 데이터인 fruits 변경됨 return fruits; } function discount(fruits: { kind: string; price: number }[]) { const totalPrice = fruits .map(function (x) { return x.price * 0.9; }) .reduce(function (a, b) { return a + b; }, 0); return totalPrice; } function saleEvent(fruits: any[]) { let cart: any[] = fruits; if (fruits.length >= 3) { cart = addFruit(fruits); // 덤을 줌 } console.log(fruits.length); // 4 출력 const totalPrice = discount(fruits); // 10% 할인 return { cart: cart, totalPrice: totalPrice }; } const yourCart = saleEvent(fruits); console.log(yourCart); // totalPrice: 1080

이 코드에서는 덤을 줄 때 fruits에 push를 한다.

이렇게하면 원본 데이터인 fruits가 변경되어서 마지막에 결과 yourCart를 출력해보면 totalPrice에 덤으로 준 오렌지까지 합쳐진 가격이 나온다.

이럴 때 펼침 연산자를 사용하여 원본 변경을 피할 수 있다.

const fruits = [ { kind: 'apple', price: 200 }, { kind: 'banana', price: 400 }, { kind: 'cherry', price: 500 }, ]; const bonus = { kind: 'orange', price: 100 }; function addFruit(fruits: { kind: string; price: number }[]) { return [...fruits, bonus]; } function discount(fruits: { kind: string; price: number }[]) { const totalPrice = fruits .map(function (x) { return x.price * 0.9; }) .reduce(function (a, b) { return a + b; }, 0); return totalPrice; } function saleEvent(fruits: any[]) { let cart: any[] = fruits; if (fruits.length >= 3) { cart = addFruit(fruits); // 덤을 줌 } console.log(fruits.length); // 3 출력 const totalPrice = discount(fruits); // 10% 할인 return { cart: cart, totalPrice: totalPrice }; } const yourCart = saleEvent(fruits); console.log(yourCart); // totalPrice: 990

이처럼 addFruit메소드에서 펼침 연산자로 새 배열을 반환해주면 fruits의 변경 없이 덤이 추가된 배열을 얻을 수 있다.

최종 가격도 990으로 원래 구매한 3개의 과일의 가격만 출력된다.

from http://bomoto.tistory.com/81 by ccl(A) rewrite - 2021-11-30 15:28:01