[JavaScript] ES6 Syntax

오늘은 JavaScript 최신 문법인 ES5 Syntax에 대해서 공부했다.

자바스크립트 최신 문법은 코딩을 더욱 편리하게 해 줄 뿐만 아니라 가독성에도 좋다.
여러 가지 예제들을 통해 ES6 최신 문법들에 대해서 알아보겠다.

• Destructuring

  • Destructuring은 구조 분해 할당 구문으로 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다.

// ES5
var user = {
  name: 'Leo',
  age: 25,
  address: '안양'
};

var name = user.name;
var age = user.age;

console.log(name + ', ' + age); // Leo, 25

// ES6
let user = {
  name: 'Leo',
  age: 25,
  address: '안양'
};

let {name, age} = user;
console.log(`${name}, ${age}`); // Leo, 25

원래의 객체를 분해해 각 변수에 어떠한 값을 담을지 정의해준다.

// ES5
var numbers = [1, 2, 3, 4];

var uno = numbers[0];
var dos = numbers[1];
var tres = numbers[2];

console.log(uno + ', ' + dos + ', ' + tres); // 1, 2, 3

// ES6
let numbers = [1, 2, 3, 4];
let [uno, dos, tres] = numbers;
console.log(`${uno}, ${dos}, ${tres}`); // 1, 2, 3

이렇게 배열에서도 활용 할 수 있다. (할당이 훨씬 간편해진다.)

더 자세히

[JavaScript] 구조 분해 할당 구문

• Spread Operator

  • Spread Operator는 전개 구문으로 배열이나 문자열 같이 반복 가능한 문자를 0개 이상의 인수 또는 요소로 확장하여 0개 이상의 키-값의 쌍의 객체로 확장시킬 수 있게 해 준다.

// ES5
function someFunc(a, b, c, d){
  console.log(a + ', ' + b + ', ' + c + ', ' + d);
}

var arr = [1, 2, 3, 4];
someFunc.apply(null, arr); // 1, 2, 3, 4

// ES6
function someFunc(a, b, c, d){
  console.log(`${a}, ${b}, ${c}, ${d}`);
 }
 
 let arr = [1, 2, 3, 4];
 someFunc(...arr); // 1, 2, 3, 4
 

배열을 함수에 할당하는 방법이 훨씬 간단해진 것을 볼 수 있다.

더 자세히

[JavaScritp] Spread syntax (...) 전개 구문

• Rest Parameters

  • Rest Parameters는 정해지지 않은 수의 인수들을 배열로 나타낼 수 있도록 해준다.

// ES5
var mul = function(x) {
  var nums = Array.prototype.slice.call(arguments, 1);
  nums.forEach(function(num){
    console.log(x * num);
  });
};

console.log(mul(2)); // undefined
console.log(mul(2, 4)); // 8
console.log(mul(3, 5, 4)); // 15  12

//ES6
let mul = function(x, ...nums) {
  nums.forEach(function(num){
    console.log(x * num);
  });
};

console.log(mul(2)); // undefined
console.log(mul(2, 4)); // 8
console.log(mul(3, 5, 4)); // 15  12

이렇게 함수에 들어오는 인자 개수를 모를 때 편하게 대입할 수 있다.

• Default Parameters

  • Default Parameters는 함수의 매개변수에 기본값을 사용하여 매개변수로 값이 들어오지 않았을 때 (또는 undefined 일 때) 기본값으로 초기화할 수 있게 해 준다.

// ES5
var userAddress = function(address, country){
  country = country === undefined ? 'USA' : country; // undefined 일 때 'USA'로 설정
  return address + ', ' + country;
}

console.log(userAddress('주소')); // 주소, USA
console.log(userAddress('주소', '나라')); // 주소, 나라

// ES6
let userAddress = function(address, country = 'USA'){
  return address + ', ' + country;
}

console.log(userAddress('주소')); // 주소, USA
console.log(userAddress('주소', '나라')); // 주소, 나라

기본값을 할당하는 구문이 훨씬 간결해졌음을 알 수 있다. 

더 자세히

[JavaScript] 매개변수에 기본값 지정하기

• Template Literals

  • Template Literals은 내장된 표현식을 허용하는 문자열 리터럴로 여러 줄로 이루어진 문자열을 좀 더 편리하게 사용할 수 있다.

// ES5
var name = 'Leo';
var age = 25;
console.log('name : ' + name + '\n' + 'age : ' + age); 
// name : Leo
// age : 25

// ES6
let name = 'Leo';
let age = 25;
console.log(`name : ${name} 
age : ${age}`);
/*
name : Leo
age : 25
*/

// ${} 안에 변수를 넣어주는데 간단한 연산도 가능하다.
console.log(`name : ${name} 
age : ${age + 2}`);
/*
name : Leo
age : 27
*/

템플릿 리터럴을 사용하면 + 없이도 변수와 변수를 이을 수 있으며 \n 없이 여러 줄을 출력 하는 것이 가능하다. 
(DOM을 다룰 때 태그를 사용할 시 유용하다.)

// ES5
var message = 'ES5'
var html = [
'<div>',
'  <span>',
    message,
'  </span>',
'</div>'
].join('\n');

console.log(html);
/*
<div>
  <span>
ES5
  </span>
</div>
*/

// ES6
let message = 'ES6';
let html =
`<div>
  <span>
    ${message}
  </span>
</div>`;

console.log(html);
/*
<div>
  <span>
    ES6
  </span>
</div>
*/

• Arrow Functions

  • Arrow Functions 은 화살표 함수라고도 불리며 function 표현에 비해 구문이 간결해진다. 그러나 this, arguments, super 등을 바인딩하지 않고 항상 익명 함수이기 때문에 메서드 함수가 아닌 곳에 가장 적합하며 화살표 함수가 쓰인 곳에는 this 사용을 피하거나 bind를 이용해서 this를 넘겨주어야 한다.

// ES5
var multi = function = (x, y){
  return x * y;
}


// ES6
let multi = (x, y) => x * y;
// return문과 {}가 생략 가능하다.


// ES5
var dobleValues = function (values){
  return values.map(function (values){
    return value * 2;
  });
};

// ES6
let dobleValues = values => values.map(value => value * 2);
// 연속적인 return도 가능하다.

더 자세히

[JavaScript] 화살표 함수에 대해서

• for... of loop

  • for of loop 구문은 배열이나 객체를 반복문으로 순회하고 싶을 때 사용하면 아주 유용하다. 

// ES5 
var nums = [1, 2, 3, 4, 5];

for(let i=0; i<nums.length; i++){
  console.log(nums[i]);
}

// ES6 for...of
let nums = [1, 2, 3, 4, 5];

for(let el of nums){
  console.log(el);
}

/*
ES5 ES6 동일하게 출력
1
2
3
4
5
*/

배열을 순회하면서 값을 다룰 수도 있고 forEach와 다르게 break가 간편하다는 이점이 있다. (열거 가능한 객체는 모두 순회 가능.)

 

이렇게 다양한 ES6의 문법에 대해서 알아보았다.
ES6문법에는 향상된 코드를 위한 다양한 문법들이 존재했다.
앞으로도 적극 사용할 수 있도록 노력해야겠다.