184(2)일차 - es5, es6 변화

김민찬·2021년 11월 10일

자바스크립트 프로그래밍

취업으로의 여정

목록 보기

191/196

ES란?

ES는 ECMAScript의 줄임말로, ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.

ES는 자바스크립트를 표준화하기 위해 만들어 졌다.
여기서 스크립트 언어는 다른 응용 프로그램에 삽입되어서 동작하는 프로그래밍 언어이다.

등장배경

JavaScript가 개발되고 나서, MS에서는 JScript를 개발했다. 두 언어는 서로 호환되지 못하는 경우가 있어서 크로스 브라우징 이슈(기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈)가 발생하였다.
크로스 브라우징 이슈를 해결하기 위해 JavaScript를 표준화 한 것이 ECMAScript이다

ES5와 ES6를 구분하는 이유

ES5와 ES6의 구분이 필요한 이유는 버전 차이에 따른 기능 추가가 매우 뚜렷하기 때문이다.
ES5로 프로그래밍 되어있는 코드를 ES6로 리팩토링을 해야될 경우가 있기때문에 차이를 알아야한다

ES6에서 추가된 대표적 기능

템플릿 리터럴

ES6부터 새롭게 등장한 템플릿 리터럴은 문자열 표현을 쉽게 만들어 주었다.
이전에는 문자열을 더하는 방식으로(+) 표현식을 넣었다면, 템플릿 리터럴을 사용하면 플레이스 홀더(${변수})를 사용해서 백틱 사이에 문자열과 함께 표현식을 넣을 수 있어져, 직관적이다.

ES5

var temp = 70;
var beverage = '아메리카노';

console.log(temp + '도 짜리 ' + beverage + ' 커피');

const temp = 70;
const beverage = '아메리카노';

console.log(`${temp}도 짜리 ${beverage} 커피`);

변수

위 템플릿 리터럴에서 나온 const도 ES6에서 추가된 기능이다.
추가적으로 let도 등장했는데 이에 대한 정리는 157일차 - let, var, const의 차이 심화에서 언급했다.

+ 추가
var는 함수 레벨 스코프를 따르고 let은 블록 레벨 스코프를 따른다.

함수 레벨 스코프
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.
블록 레벨 스코프
모든 코드블록(함수, if문, for문 while문, try/catch문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

화살표함수

화살표 함수 표현(arrow function expression)은 전통적인 함수 표현의 간편한 대안이다.

하지만 this는 fucntion키워드로 생성한 일반 함수와 화살표함수가 크게 차이난다.

화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라 한다.

function키워드 생성 함수와 화살표 함수 차이

function키워드

function add(a, b) {
  return a + b;
}

화살표 함수

// return 문이 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return 된다.
const add = (a, b) => a + b;

모듈

ES6 부터는 import와 export로 모듈을 관리할 수 있다.

모듈에 대한 설명은 아래 자료가 가장 잘 정리되어있다.
JAVASCRIPT.INFO - 모듈 내보내고 가져오기

구조 분해 할당

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

기본 예시

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

변수 값 교환하기

let a = 1;
let b = 2;

[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

기본값

let a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

class

ES5에서는 class라는 문법이 없어서, prototype 기반으로 클래스를 만들었다. 하지만 ES6의 등장으로 명료하게 클래스를 생성 가능하다.

ES5에서는 생성자 함수와 프로토타입, 클로저를 사용해서 객체 지향 프로그래밍을 구현하였다.
이런 복잡한 방법을 ES6에서 class로 해결하였다.

예시(poiemaweb에서 가져왔다)

class Person {
  // constructor(생성자)
  constructor(name) {
    this._name = name;
  }

  sayHi() {
    console.log(`Hi! ${this._name}`);
  }
}

// 인스턴스 생성
const me = new Person('Lee');
me.sayHi(); // Hi! Lee

// instanceof 연산자는 생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별한다.
console.log(me instanceof Person); // true