리액트 ES6 문법 - 전개 연산자

아래 책을 읽고 정리한 내용입니다.

https://m.yes24.com/Goods/Detail/87631428

Do it! 리액트 프로그래밍 정석 - 예스24

전개 연산자

⇒ 전개 연산자 사용 방법

• 배열이나 객체, 변수명 앞에 마침표 세 개(…)를 입력한다.
• 다만 배열, 객체, 함수 인자 표현식( [], {}, () )안에서만 사용해야 한다.

ES6의 배열 전개 연산자 사용 방법 알아보기

// ES5 문법
var array1 = ['one', 'two'];
var array2 = ['three', 'four'];
var combined = [array1[0], array1[1], array2[0], array2[1]];
var combined = array1.concat(array2);
var combined = [].concat(array1, array2);
var first = array1[0];
var second = array1[1];
var three = array1[2] || 'empty';

function func() {
  var args = Array.prototype.slice.call(this, arguments);
  var first = args[0];
  var others = args.slice(1);
}

• ES6 전에는 배열의 일부 요소를 자르거나 연결하려면 배열 인덱스와 함께 배열 내장 함수들을 이용해야 했음
• concat()함수로 두 배열을 합침
  • ex) array1.concat(array2);
• 인덱스로 배열 요소를 추출함
  • ex) var second = array1[1];
• 특정 변수(arguments)를 사용해 함수 내 인자 항목들을 배열로 변환함
• || 논리 연산자와 조합하면 추출할 배열 요소가 없을 때 기본 값을 정할 수 있음

 

• 논리 연산자 예시
• 논리 연산자(||)는 왼쪽 피연산자가 true로 평가될 때 왼쪽 피연산자의 값을 반환한다. 그러나 논리 연산자는 '거짓으로 평가되는 값'을 찾을 때까지 계속해서 우측 피연산자를 평가한다. 만약 왼쪽 피연산자가 true로 평가되면, 그 값을 바로 반환하고 우측 피연산자는 평가하지 않는다. 그래서 배열 요소를 추출할 때, 배열의 특정 인덱스에 값이 없으면 undefined가 반환되고, undefined는 논리적으로 false로 평가된다. 따라서 || 연산자를 사용하면 기본값이 설정된다. 만약 왼쪽 피연산자가 true로 평가되는 값이라면, 우측 피연산자는 평가되지 않는다.

var arr = [1, 2, 3];
var element = arr[5] || 'Default';

console.log(element);  // 'Default'

• 여기서 **arr[5]**는 undefined이며, 이 값은 논리적으로 false로 평가된다. 그러므로 || 연산자는 undefined 대신에 'Default' 값을 반환한다.

 

// ES6 문법
var array1 = ['one', 'two'];
var array2 = ['three', 'four'];
var combined = [...array1, ...array2];
// combined = ['one', 'two', 'three', 'four'];
var [first, second, three = 'empty', ...others] = array1;
// first = 'one', second = 'two', three = 'empty', others = []

function func(...args) {
  var [first, ...others] = args;
}

function func(first, ...others) {
  var firstInES6 = first;
  var othersInES6 = others;
}

// 올바르지 못한 예
// var wrongArr = ...array1;

• 두 배열을 전개 연산자로 합침!
  • [...array1, ...array2]
• 전개 연산자를 배열 표현식 없이 쓰면 잘못 사용한 것임
  • var wrongArr = ...array1;

ES6의 객체 전개 연산자 사용 방법 알아보기

// ES5 예제
var objectOne = { one: 1, two: 2, other: 0 };
var objectTwo = { three: 3, four: 4, other: -1 };

var combined = {
  one: objectOne.one,
  two: objectOne.two,
  three: objectTwo.three,
  four: objectTwo.four,
};
var combined = Object.assign({}, objectOne, objectTwo);
// combined = { one: 1, two: 2, three: 3, four: 4, other: -1}
var combined = Object.assign({}, objectTwo, objectOne);
// combined = { one: 1, two: 2, three: 3, four: 4, other: 0}
var others = Object.assign({}, combined);
delete others.other;
// others = { one: 1, two: 2, three: 3, four: 4 }

• 객체 내장 함수 assign()을 사용해 두 객체를 병합함
• assign의 첫 번째 인자인 {}는 결과로 반환할 객체!
• 중복되는 값 (other)이 있으면 가장 나중 값으로 덮어씌워짐
• 삭제 연산자 delete로 특정 데이터를 추출한 다음 새로운 객체를 만듦

// ES6 예제
var combined = {
  ...objectOne,
  ...objectTwo,
};
// combined = { one: 1, two: 2, three: 3, four: 4, other: -1} 
var combined = {
  ...objectTwo,
  ...objectOne,
};
// combined = { one: 1, two: 2, three: 3, four: 4, other: 0}
var { other, ...others } = combined;
// others = { one: 1, two: 2, three: 3, four: 4}

• 두 객체를 병합할 때 전개 연산자 역시 마지막에 사용한 객체의 값으로 덮어씌워짐
• 특정값을 추출하려는 키 이름(other)만 맞추고 나머지는 전개 연산자로 처리해버림