자바스크립트 ES6 사용법 정리

ECMAScript6 (ES6)

ES6?

 

ES란 ECMA스크립트의 줄임말이며, 표준화된 스크립트 프로그래밍 언어를 말합니다. 자바스크립트를 표준화하기 위해 만들어졌습니다. 기존의 자바스크립트의 부족한 점을 보완하고자 2015년 ECMAScpript(ES2015)인 ES6가 출판되었고, 기존보다 효율적으로 코드를 작성할 수 있게 되었습니다. 그중 가장 많이 쓰이는 ES6 문법들에 대해 정리해보았습니다. 아래 정리 내용은 자바스크립트 최신문법~  내용을 보며 정리한 내용입니다.

 

~ES6 (2015)

• Shorthand property names
• Destructuring assingnment
• Spread Syntax
• Default parameters
• Ternary Operator
• Template Literals

 

Shorthand property names

 

첫번째로 알아볼 문법은 Shorthand preperty names입니다. 제목에 링크를 걸어놨으니 더 자세히 알아보고 싶다면 해당 링크를 확인하시면 됩니다. 자바스크립트에서 Object는 항상 key와 value로 이루어져 있습니다.

 

{
  const nathan1 = {
    name: 'Nathan',
    age: '30',
  };
  console.log(nathan1) // {name: "nathan", age: "30"}
  
  const name = 'Nathan';
  const age = '30';
  
  // bad case
  const nathan2 = {
    name: name,
    age: age,
  };
  console.log(nathan2) // {name: "nathan", age: "30"}
 
  // good case
  const nathan3 = {
    name,
    age,
  };
  console.log(nathan3) // {name: "nathan", age: "30"}
};

 

위와같이 이름과 나이라는 변수가 미리 정의 되어져 있을때, 앞에서 정의한 변수를 이용하여 새로운 Object를 만들어 보겠습니다. bad case를 먼저 살펴보면, Nathan2의 name이라는 키(key)의 값(value)은  name에 변수가 가르키고 있는 'Natahn'의 값이 들어오고 age라는 키의 값은 age에 변수가 가르키고 있는 '30'의 값이 들어옵니다.
Key와 value의 이름이 동일한 경우 good case와 같이 깔끔하게 축약해서 작성이 가능합니다.

 

Destructuring assingnment

 

두번째로 알아볼 문법은 Destucturing assingment입니다.

 

{
  // object
  const student = {
    name: 'Tyrion',
    level: 69,
  };
  
  // bad case
  {
    const name = student.name;
    const level = student.level;
    console.log(name, level); // Tyrion 69
  }
   
   // good case
  {
    const {name, level} = student;
    console.log(name, level); // Tyrion 69
    
    const {name: studentName, level: studentLevel} = student;
    console.log(studentName, studentLevel); // Tyrion 69
  }
}

 

Object의 Key와 value에 접근하기 위해서는 bad case와 같이 student. name, student.level 이런 식으로 작성해야 했습니다. 하지만 Destucturing assingment를 이용한다면, good case와 같이 Object에 있는 Key의 이름을 괄호안에 정의해주고 student라고 작성하면, student에 있는 Key와 value들이 각각 name와 level에 맞게 할당이 됩니다.

만약, 다른 이름으로 선언하고 싶다면 기존의 Key와 value 오른쪽에 : (콜론)을 작성하면 됩니다.

 

{
  // array
  const animals = ['dog', 'cat']
  
  // bad case
  {
    const first = animal[0];
    const second = animal[1];
    console.log(first, second); // dog cat
  }
  
  // good case
  {
    const[first, second] = animals;
    console.log(first, second); // dog cat
  }
}

 

Object뿐만 아니라 Array에서도 동일하게 사용 가능합니다.

 

Spread Syntax

 

다음으로 알아볼 문법은 Spread Syntax입니다. 활용도가 정말 많은 중요한 문법입니다.

 

{
  const obj1 = {key: 'key1'};
  const obj2 = {key: 'key2'};
  const array = [obj1, obj2];
  console.log(array); // [{key: 'key1'}, {key: 'key2'}]
  
  // array copy
  const arrayCopy = [...array];
  console.log(arrayCopy); // [{key: 'key1'}, {key: 'key2'}]
                                 
  const arrayCopy2 = [...array, {key: 'key3'}];
  console.log(arrayCopy2); // [{key: 'key1'}, {key: 'key2'}, {key: 'key3'}]
  
  // object copy
  const obj3 = {...obj1};
  console.log(obj3); // {key: 'key1'}
  
  // array concatenation
  const fruits1 = ['apple','banana'];
  const fruits2 = ['kiwi', 'peach'];
  const fruits = [...fruits1, ...fruits2];
  cosole.log(fruits); // ['apple', 'banana', 'kiwi', 'peach']
  
  // object merge
  const dog1 = {dog1: 'Border Collie'}
  const dog2 = {dog2: 'Golden Retriever'}
  const dog = {...dog1, ...dog2}
  console.log(dog); // {dog1: 'Border Collie', dog2: 'Golden Retriever'}
  
  // object merge (키 값이 같을 경우)
  const dog1 = {dog: 'Border Collie'}
  const dog2 = {dog: 'Golden Retriever'}
  const dog = {...dog1, ...dog2}
  console.log(dog); // {dog:'Golden Retriever'}  
}

 

위와같이 Object를 담고있는 Array가 있습니다. 이 배열을 복사하기 위해서는 여러가지 방법이 있습니다. 하나하나씩 복사해 올때는 배열에 들어있는 array.map이나 array.foreach를 이용할 수 있겠지만, Spread Syntax를 이용한다면 ...array 이런식으로 간단하게 배열을 복사해 올 수 있습니다. ... 은 Array에 들어있는 item들을 하나하나씩 낱개로 가져와서 복사하는 것을 말합니다.

 

새로운 item을 추가하고 싶다면, Spread Syntax 쓴 다음에 추가하고자하는 item을 작성해주면 됩니다.

 

Object의 값도 Spread Syntax를 이용하여 복사할 수 있습니다.

 

또한, Spread Syntax를 이용하여 Array, Obeject를 위와같이 합칠 수 있습니다.

 

※주의) 만약 Key가 동일한 Object를 merge한다면 제일 뒤에 value가 앞에 value를 덮어 씌웁니다.

 

{
  const obj1 = {key: 'key1'};
  const obj2 = {key: 'key2'};
  const array = [obj1, obj2];
  console.log(array); // [{key: 'newKey'}, {key: 'key2'}]
  
  // array copy
  const arrayCopy = [...array];
  console.log(arrayCopy); // [{key: 'newKey'}, {key: 'key2'}]
                                 
  const arrayCopy2 = [...array, {key: 'key3'}];
  obj1.key = 'newKey'; // 원래의 obj.key값을 변경하게 되는경우 키값이 전부 바뀌게 됨.
  console.log(arrayCopy2); // [{key: 'newKey'}, {key: 'key2'}, {key: 'key3'}]
  
  
  //object copy
  const obj3 = {...obj1};
  console.log(obj3); // {key: 'newKey'}
}

 

※ 주의 ) Spread syntax는 Object안에 들어있는 것들을 하나씩 복사해 오는 것이 아니라, 이 Object가 가르키고 있는 주소의 참조값만 복사해 오기 때문에, Spread operator를 이용하여 복사해 온다고 해도 원래의 Object를 변경하게 되면 전부 다 영향이 가게 됩니다.

 

Default parameters

 

다음으로 알아볼 문법은 Default parameters입니다.

 

{
  // bad case
  {
    function printMessage(message) {
    console.log(message); // Hi
    }
    
    printMessage('Hi');
  }
}

 

함수를 호출할 때 정상적으로 인자를 전달하는 경우에는 message가 제대로 출력됩니다.

 

{
  // bad case
  {
    function printMessage(message) {
      console.log(message); // undefined
    }
    
    printMessage();
  }
}

 

아무런 인자를 전달하지 않으면 undefined이 출력됩니다.

 

{
  // bad case
  {
    function printMessage(message) {
      if (message === null) {
        message = 'default message';
      }
      console.log(message); // default message
    }
    
    printMessage();
  }
}

 

인자가 전달되지 않았을때 default message를 출력하고 싶으면 위와같이 코드를 작성했습니다.

 

{
  // good case
  {
    function printMessage(message = 'default message') {
      console.log(message); // Hi
                            // default message
    }
    
    printMessage('Hi');
    printMessage();
  }
}

 

Default parameters를 활용한다면 인자 다음에 초기값을 지정해 둠으로써, 인자가 전달될 때는 인자의 값을 출력하고 인자가 전달되지 않을때는 초기값을 출력합니다.

 

Ternary Operator

 

다음으로는 많은 프로그래밍 언어에서도 공통적으로 가지고있는 Ternary Operator에 대해 알아보겠습니다.

 

{
  const isCat = true;
  
  // bad case 
  {
    let comeponet;
    if (isCat) {
      component = 'cat';
    } else {
      component = 'dog';
    }
    console.log(component); // cat
  }
  
  // good case
    const component = isCat ? 'cat' : 'dog';
    console.log(component); // cat
    console.log(isCat ? 'cat' : 'dog'); // cat
}

위와같이 isCat이라는 변수가 true인지 false인지 따라 다른 component를 정의하고 싶다면 위와같이 if else를 사용하여 component의 할당하는 방식으로 코드를 작성 했습니다.

Ternary Operator를 사용한다면 good case와 같이 true인지 false인지에 따라 간단하게 표현할 수 있습니다. ? 다음에 나오는 값이 true인경우 : 뒤에 나오는 값은 false인 경우입니다.

 

Template Literals

 

다음으로는 Template Literals에 대해 알아보겠습니다.

 

{
  const weather = "Clear Sky";
  const temperature = '21°C'
  
  // bad case
  console.log(
    'Today weather is ' + weather + ' and temperature is ' + temperature  + '.'
  ); // Today weather is Clear Sky and temperature is 21°C
  
  // good case
  console.log(`Today weather is ${weather} and temperature is ${temperature}.`);
  // Today weather is Clear Sky and temperature is 21°C
}

 

문자열을 조합할 때 + 연산자를 사용하여 합칠 경우 위와같이 코드를 작성해야하는데, 띄어쓰기도 신경써야 하고 단어 마다 ' '을 붙여줘야 합니다. 이럴 경우 실수 할 가능성도 높고 무엇보다 가독성이 좋지 않습니다.

Template Literals을 사용할 경우 이렇게 ` `(backtick)안에 문자를 넣고 변수는 ${ } 안에 넣으면 위와같이 깔끔하게 코드가 작성되고 무엇보다 가독성이 높아집니다. 문자가 짧은 경우가 아닌 이상 아래와 같이 사용하는 것이 좋습니다.