ES6 (ECMAScript 2015) 는 무엇인가?

IN DUCK KANG·2020년 12월 23일
ES6JavaScript
0

JavaScript

목록 보기
2/2

ES6

  • ECMAScript 2015 와 동일한 용어
  • 최신 FE Framework인 Vue, React, Angular에서 권고하는 형식
  • ES5에 비해 문법이 간결함
  • ES6를 지원하지 않는 구 버전 브라우저가 있음으로 transpiling이 필요하며, Babel 컴파일러를 이용하면 ES6의 문법을 각 브라우저 별 호환이 가능한 ES5로 변환

let, const

값scope변수 재선언변수 값변경
varfunction-scopeOO
letblock-scopeOX
constblock-scopeXX
  • js에서의 block scope 개념은 ES6의 const, let과 함께 도입되었다.
function foo(){
    if(true) {
        var fruit1 = 'apple';        //function scope
        const fruit2 = 'banana';     //block scope
        let fruit3 = 'strawberry';   //lock scope
    }
    console.log(fruit1);
    console.log(fruit2);
    console.log(fruit3);
}

foo();
//result:
//apple
//error: fruit2 is not defined
//error: fruit3 is not defined

var

  • 호이스팅으로 인해 어디서든 변수 선언은 최상위에 선언한 것과 동등합니다. 이것은 변수가 선언되기 전에 사용 될 수 있다는 것을 의미합니다.
  • 변수 재선언이 가능하기 때문에 의도하지 않은 변수값의 변경이 일어날 수 있습니다.
  • 사용하지 않는 것을 것을 권장합니다.

cf. const도 객체나 배열의 내부는 변경이 가능합니다.

Arrow Functions

Arrow Functions은 함수 표현식을 더욱 짧게 작성할 수 있습니다.
function return 키워드와 중괄호(curly brackets)를 사용할 필요가 없습니다.

함수를 정의하는 방법에는 함수 선언식과 함수 표현식이 존재하는데
함수 표현식은 익명함수를 변수에 할당하는 방식입니다.

// 함수 선언식
function foo(x, y) {
   return x * y;
}

// 함수 표현식
// ES5
var foo = function(x, y) {
   return x * y;
}

// ES6
const foo = (x, y) => x * y;
  • 익명 함수로만 사용할 수 있습니다.
    따라서 Arrow Function를 호출하기 위해서는 함수 표현식을 사용합니다.
  • 콜백 함수로 사용할 수 있습니다.
  • Arrow Function은 자신만의 this가 없습니다.
    따라서 object methods를 정의하는데에 적합하지 않습니다.
  • Arrow Function 자체는 호이스팅 되지 않습니다.
    따라서 반드시 사용되기 전에 정의되어야 합니다.
  • const를 사용하는 것이 안전합니다.
  • 함수가 단일 구문일 경우에는 return 키워드와 중괄호를 생략할 수 있습니다.

Arrow Function의 this

화살표 함수에서의 this는 일반 함수에서의 this와 차이가 있습니다.

  • 화살표 함수는 자신의 this가 없는 대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용됩니다.

  • 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따르기 때문에 현재 범위에서 존재하지 않는 this를 찾을 때, 화살표 함수는 바로 바깥 범위에서 this를 찾는것으로 검색을 끝내게 됩니다.

cf) 일반 함수의 this

  • 일반 함수에서 this 는 함수를 호출한 객체를 나타내기 때문에 어디서 어떻게 호출되느냐에 따라 window, document, button 등이 될 수 있습니다.
  • 일반 함수의 내부함수, 콜백함수에 사용되는 this는 window입니다.
// Regular Function:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
const obj = {
    name: 'js',
    foo: function () {
        console.log(this);
        console.log(this.name);
    }
};
obj.foo(); 
// {name: "js", foo: ƒ}
// js
const val = obj.foo;
val();
// Window {window: Window, self: Window, document: document, …}
// undefined

Arrow Function을 사용해서는 안되는 경우

1. 객체의 메소드 정의

  • 화살표 함수 내부의 this는 메소드를 소유한 객체, 즉 메소드를 호출한 객체를 가리키지 않고 상위 컨택스트인 전역 객체 window를 가리킵니다.
// Bad
const person = {
  name: 'Lee',
  sayHi: () => console.log(`Hi ${this.name}`)
};

person.sayHi(); // Hi undefined
---------------------------------------------
  // Good
const person = {
  name: 'Lee',
  sayHi() { // === sayHi: function() {
    console.log(`Hi ${this.name}`);
  }
};

person.sayHi(); // Hi Lee

2. 메소드를 prototype에 할당

// Bad
const person = {
  name: 'Lee',
};

Object.prototype.sayHi = () => console.log(`Hi ${this.name}`);

person.sayHi(); // Hi undefined
---------------------------------------------
// Good
const person = {
  name: 'Lee',
};

Object.prototype.sayHi = function() {
  console.log(`Hi ${this.name}`);
};

person.sayHi(); // Hi Lee

3. 생성자 함수

  • 화살표 함수는 생성자 함수로 사용할 수 없습니다. 생성자 함수는 prototype 프로퍼티를 가지며 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용합니다. 하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않습니다.

4. addEventListener 함수의 콜백 함수

  • addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가리킵니다.
// Bad
var button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});
---------------------------------------------
// Good
var button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});

Class 문법

ES6 이전에는 자바스크립트에 class 문법이 없었습니다. 따라서 이 개념을 구현하려면 prototype 문법을 사용하여 다음과 같이 구현해야 했습니다.

function Dog(name) {
  this.name = name;
}

Dog.prototype.say = function() {
  console.log(`${this.name}: 멍멍`);
};

const dog = new Dog('댕댕이');
dog.say();

그러나 ES6 에서 class 문법이 구현되었고, 위의 코드를 다음과 같이 작성 할 수 있습니다.

class Dog {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(`${this.name}: 멍멍`);
  }
}

const dog = new Dog('댕댕이');
dog.say();

JavaScript class는 객체가 아니라, JavaScript 객체의 template 입니다. 따라서 객체를 생성하기 위해서는 다음과 같이 해야합니다. 

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

Promise Object

싱글쓰레드인 자바스크립트에서 비동기 처리를 위해서 콜백(callback)을 사용해 왔습니다.

덕분에 비동기 처리를 온전히 해낼 수 있었지만 이런 콜백이 사용되는 경우가 많아지면서 단점이 드러났습니다.

그 단점은 비동기 처리를 순차적으로 실행할 필요가 있는 경우에 비동기 처리를 중첩시켜서 표현하므로 에러, 예외처리가 어렵다는 것과 중첩으로 인한 복잡도가 증가하는 것입니다.

크게 이 두 가지의 단점을 해결하기위해 프로미스가 예전부터 라이브러리로 생겨났고, 이것을 ES6에서는 언어적 차원에서 지원하게 되었습니다.

Symbol Type

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

let id = Symbol('id');
person.id = 140353;

Symbol은 언제나 unique 합니다. 따라서 동일한 input 값을 넣어도 결과는 다릅니다.

Symbol("id") == Symbol("id") // false

Default Parameter Values

function myFunction(x, y = 10) {
  // y is 10 if not passed or undefined
  return x + y;
}
myFunction(5); // will return 15

Rest Parameter

function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

Array

Array.find()
Array.findIndex()

find() 는 배열에서 파라미터로 전달된 함수의 조건의 결과가 true가 되는 첫번째 인자를 반환합니다.

findIndex()는 배열에서 파라미터로 전달된 함수의 조건의 결과가 true가 되는 첫번째 index를 반환합니다.

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
var firstIdx = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Number

Number.isInteger()
Number.isSafeInteger()

-example-
  
Number.isInteger(10);        // returns true
Number.isInteger(10.5);      // returns false

Number.isSafeInteger(10);    // returns true
Number.isSafeInteger(12345678901234567890);  // returns false

Safe integers are all integers from -(253 - 1) to +(253 - 1).
This is safe: 9007199254740991. This is not safe: 9007199254740992.

Global Methods

isFinite()
isNaN()

-example-
isFinite(10/0);       // returns false
isFinite(10/1);       // returns true

isNaN("Hello");       // returns true

Template Literals

메소드 축약 표현

// ES5
var obj = {
  name: 'Lee',
  sayHi: function() {
    //
  }
};
// ES6
const obj = {
  name: 'Lee',
  // 메소드 축약 표현
  sayHi() {
    //
  }
};

[참고]

https://www.w3schools.com/js/js_es6.asp
https://poiemaweb.com/es6-arrow-function
https://velog.io/@parksj3205/2019-08-30-1208-%EC%9E%91%EC%84%B1%EB%90%A8
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98
https://bubobubo003.tistory.com/54

profile
IN DUCK KANG
Web FE Developer
이전 포스트

ES5 (ECMAScript 2009), ECMAScript 는 무엇인가?

0개의 댓글