전개 연산자 사용하기

전개 연산자

전개 연산자는 배열이나 객체 변수를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법이다. 변수 앞에 …(마침표 3개)를 입력해서 사용한다.

 

배열 합치기

ES5

• 기존 ES5에서 배열 2개를 합치기 위해선느 배열 각각에 인덱스로 접근해 값을 가져오거나 concat 함수를 이용한다.
• varArray1, varArray2 배열에 각각 인덱스 (0,1)로 접근해 인자 값(num1, num2, num3, num4)을 가져와 새로운 배열 sumVarArr에 하나씩 넣는다.

ES6

• ES6에서는 전개연산자 …(마침표 3개)을 배열 앞에 붙여 여러 개의 배열을 합칠 수 있다.
• sumLetArr 배열의 값을 추출해 개별 변수에 넣는다. 순서대로 변수 sum1에 sumLetArr[0] 값, sum2에 sumArrLet[1] 값을 대입한다. 나머지 배열 값을 마지막에 전개 연산자 처리된 …remain 변수에 넣는다.

객체 합치기

ES5

• 기존 ES5에서 객체 2개를 합치기 위해서는 Object.assign() 함수를 이용해야 한다. 첫 번째 인자 {}는 함수의 return 값이고 뒤의 인자에 객체들을, (콤마)로 연결해 나열하면 여러 개의 객체를 합칠 수 있다.

ES6

• ES6에서는 …(마침표 3개)을 객체명 앞에 붙여 여러 개의 객체를 합칠 수 있다.
• sumLetObj 객체의 키와 값을 추출해 키와 동일한 명칭의 개별 변수에 넣는다. 나머지는 마지막에 전개 연산자 처리된 …others 변수에 넣는다.

 

예제코드

App.js

import React from 'react';
import './App.css';
import SpradOperator from './R011_SpreadOperator';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <SpradOperator/>
    </div>
  );
}

export default App;

R011_SpreadOperator.js

import React, {Component} from "react";

class R011_SpreadOperator extends Component {

  constructor(props){
    super(props);
    this.state = {};
  }

  componentDidMount() {
    //javascript Array
    var varArray1 = ['num1', 'num2'];
    var varArray2 = ['num3,', 'num4'];
    var sumVarArr = [varArray1[0], varArray1[1], varArray2[0], varArray2[1]];
    // var sumVarArr = [].concat(varArray1, varArray2);
    console.log('1.sumVarArr : '+sumVarArr);
    //ES6 Array
    let sumLetArr = [...varArray1, ...varArray2];
    console.log('2. sumLetArr : '+sumLetArr);
    const [sum1, sum2, ...remain] = sumLetArr;
    console.log('3. sum1 : '+sum1+', sum2 : '+sum2+', remain : '+remain);

    var varObj1 = {key1 : 'var1', key2 : 'val2'};
    var varObj2 = {key2 : 'new2', key3 : 'val3'};
    //javascript object
    var sumVarObj = Object.assign({}, varObj1, varObj2);
    console.log('4. sumVarObj : '+JSON.stringify(sumVarObj));
    //ES6 Object
    var sumLetObj = {...varObj1, ...varObj2};
    console.log('5. sumLetObj : '+JSON.stringify(sumLetObj));
    var {key1, key3, ...others} = sumLetObj;
    console.log('6. key1 : '+key1+', key3 : '+key3+', others : '+JSON.stringify(others));
  }

  render(){
    return(
      <h2>[THIS IS SpreadOperator]</h2>
    )
  }
}

export default R011_SpreadOperator;

결과 화면