[JavaScript] ES6 Usage 알아보기

Dico·2020년 7월 4일
0

[JavaScript]

목록 보기
6/21
post-custom-banner

모두가 아는let이나 const 이외에 ES6 이후 개선된 부분을 한눈에 보기쉽게 요약 정리해보고자 한다.


객체표기법(Object Literal)

객체를 보다 간결하게 쓸 수 있게한 syntactic sugar로, 불필요한 프로퍼티의 기재를 최소화한다.
프로퍼티의 key와 value을 모두 쓰던 x:x에서 x로 대체해 key와 value가 같다면 한 번만 기재할 수 있게 하였다.
+Syntactic Sugar(문법적 설탕): 중복되는 표현을 줄이고 보다 간결하고 명확한 표현이 가능하게 하는 프로그래밍 문법

const createPerson = (name, age, gender) => {
  "use strict";
  return {
    name: name,
    age: age,
    gender: gender
  };
};

위 코드는 아래 코드와 동일하다.

const createPerson = (name, age, gender) => {
  "use strict";
  return {
    name,
    age,
    gender
  };
};

객체 내 함수선언 간략화

객체 내에 메소드로 함수를 선언할 때 ES5까지는 아래와 같이 쓰였다면,

const person = {
  name: "Taylor",
  sayHello: function() {
    return `Hello! My name is ${this.name}.`;
  }
};

ES6 이후로는 같은 코드를 아래와 같이 function키워드와 colon(:)을 생략할 수 있게 되었다.

const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};

객체 구조 분해 할당(Destructuring Assignment)

이전에는 아래와 같이 객체를 분해했다면,

const obj = {
    a: "apple", 
    b: "banana", 
    c: "carrot"
};

const a = obj.a;                    //"apple"
const b = obj.b;                    //"banana"
const c = obj.c;                    //"carrot"


//함수의 매개변수로 전달되는 객체
function myCat(infos) {
	 infos = infos === undefined ? {} : infos;
 	var name = infos.name === undefined ? "Sogeum" : infos.name;
 	var color = infos.color === undefined ? "white" : infos.color;
 	var age = infos.age === undefined ? 3 : infos.age; 
 	var toys = infos.toys === undefined ? ["kasha-kasha", " wool-ball", " bugs"] : infos.toys; 
	console.log(`My cat is ${age} year-old ${color} Persian. Her name is ${name} and she loves to play with ${toys}.`); 
}

myCat();
//My cat is 3 year-old white Persian. Her name is Sogeum and she loves to play with kasha-kasha, wool-ball, bugs.

ES6 이후부터는 중괄호{} 및 대괄호[]를 사용해 보다 간단히 분해할 수 있게 되었다.

//예제1.
const obj = {
    a: "apple", 
    b: "banana", 
    c: "carrot"
};

const { a, b, c } = obj;
console.log(a, b, c);    //apple banana carrot


//함수의 매개변수로 전달되는 객체
function myCat({name = "Untitled", color = "white", age = 3, toys = []}) { 
	console.log(`My cat is ${age} year-old ${color} Persian. Her name is ${name} and she loves to play with ${toys}.`); 
}

const infos = { 
    name: "Sogeum", 
    toys: ["kasha-kasha", " wool-ball", " bugs"]
};

myCat(infos);
//My cat is 3 year-old white Persian. Her name is Sogeum and she loves to play with kasha-kasha, wool-ball, bugs.



//예제2.
const HIGH_TEMPERATURES = { 
  yesterday: 75, 
  today: 77, 
  tomorrow: 80 
};

const { today, tomorrow } = HIGH_TEMPERATURES;  
console.log(today);                 //77 
console.log(tomorrow);              //80

배열 분해 할당(Array Destructuring)

이전에는 인덱스를 사용해 아래와 같이 배열을 분해했다면,

const array = [1, 2, 3, 4, 5, 6]; 

const a = array[4];    	            //[5]
const b = array[array.length - 1];  //[6]

ES6 이후로는 보다 간단히, 그리고 다양한 방법(Trailing Commas, Rest Parameters, etc.)으로 배열을 분해하는 것이 가능해졌다!

/*Trailing Commas a.k.a Final Commas*/
//Ex.1
const array = [1, 2, 3, 4, 5, 6]; 

var [ , , , , a, b] = [1, 2, 3, 4, 5, 6];
console.log(a);                      //[5]
console.log(b);                      //[6]

var [ a, b, , , , ] = [1, 2, 3, 4, 5, 6];
console.log(a);                      //[1]
console.log(b);                      //[2]

//Ex.2
const arr = [7, 8, 9, , , ];
arr.length;                          //5



/*Rest Parameters*/
//Ex.1
[c, d, ...rest] = [1, 2, 3, 4, 5, 6]; //<-'rest'가 새로 만들어지는 배열의 이름이 된다.
console.log(c);   		     //[1]
console.log(d);   		     //[2]
console.log(rest);              //[3, 4, 5, 6]

//Ex.2
const source = [1,2,3,4,5,6,7,8,9,10]; 

function removeFirstTwo(list) { 
  const [a, b,...arr] = list; //<-여기서 source의 인덱스 2~나머지가 'arr'라는 새로운 배열을 생성한다.
  return arr; 
}

removeFirstTwo(source);        //[3, 4, 5, 6, 7, 8, 9, 10]

더불어 아래의 방법으로 값을 서로 swap 하는 것도 가능해졌다!

let a = 5; 
let b = 9; 
[a, b];                             //[5, 9]
//a와 b의 값 swap
[a, b] = [b, a];                    //[9, 5]              
console.log(a);                      //[9]
console.log(b);                      //[5]

Class-constructor 키워드로 생성자함수 만들기

function키워드로 아래와 같이 생성자함수의 표현식을 기재했다면,

var SpaceShuttle = function(targetPlanet){
  this.targetPlanet = targetPlanet;
}

var zeus = new SpaceShuttle('Jupiter');

ES6 이후로는 같은 코드를 classcostructor라는 키워드를 이용해 표현할 수 있게 되었다.

class SpaceShuttle {
  constructor(targetPlanet) {
    this.targetPlanet = targetPlanet;
  }
}
const zeus = new SpaceShuttle('Jupiter');

extends로 프로퍼티 상속하기

ES6부터는 extends 키워드를 사용해서 다른 객체의 메소드를 상속받는 것이 가능해졌다.
예를 들어 아래와 같이 Shape라는 생성자함수가 있을 때,


class Shape {
  constructor(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color; 
  }
}

Shape의 모든 기존 메소드를 상속받는 Rectagle 인스턴스를 새롭게 만들고 싶다면,
아래와 같이 한다:

class Rectangle extends Shape {} 

const rectangle = new Rectangle (20, 20, 'blue'); 

console.log(rectangle.width);  //20
console.log(rectangle.height); //20 
console.log(rectangle.color);   //blue 

매개변수 기본값(default parameter)설정하기

이전에는 아래와 같이 매개변수의 기본값을 설정했다면,

//방법 1.
function calcAge (year) {
	if (!year) {
      year = 1998;
    }
  return 2020 - year;
}

calcAge();            //22
      
      
//방법2.
function calcAge (year) {
  year = year || 1998;
  return 2020 - year;
}

calcAge();            //22

ES6 이후로는 매개변수가 들어가는 괄호 안에 기본값을 할당해줌으로써 같은 코드를 표현할 수 있게 되었다.

function calcAge (year = 1998) {
  return 2020 - year;
}

calcAge();            //22

Reference

*본 게시글은
freecodecamp.org 의 ES6 파트와
https://www.zerocho.com/category/ECMAScript/post/575d20a97d96d81700508ccd
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
를 참고 및 번역하여 작성되었습니다.
학습단계로 잘못된 정보가 있을 수 있습니다. 잘못된 부분에 대해 알려주시면 곧바로 정정하도록 하겠습니다 😊

profile
프린이의 코묻은 코드가 쌓이는 공간
post-custom-banner

0개의 댓글