🧾 ES5 와 ES6 의 차이

📚   개요

ES5 와 ES6 의 차이를 간단하게 알아보겠다.

🎬   Get Started

ES 란?

ES 는 EcmaScript 의 줄임말로 Javascript의 표준 문법이라고 보면 되겠다.

이 표준이 왜 생겼는지는 자바와 자바스크립트의 탄생까지 올라가고 거기서 일어난 계파들간의 싸움까지 알아야하기에 스킵하겠다.

 

ES5(ES2009) ES6(ES2015) ES2020 ES2021 ESNEXT 처럼 계속해서 문법이 늘고 주는데

Nodejs 버전별로 지원하는 ES 버전이 다르다.

아래에서 확인 가능하니까 꼭 확인하고 쓰자

https://node.green/

Node.js ES2015/ES6, ES2016 and ES2017 support

다 소개할 순 없고

ES5 에서 ES6 사이에 약 6년이라는 긴 시간이 존재하기도하고 가장 변화가 크니 이것만 소개하겠다.

ES5,6 의 차이만 다루더라도 다 다룰 수 없으니 간략하게 몇가지만 소개해보겠다.

 

1. Template Literal

그저 빛... 템플릿 리터럴은 신이다...

기존 JS (ES5) 까지는 변수와 문자열을 한 줄에 출력하려고 한다면 다음과 같이 사용해야 했다.

var str = "world"
console.log("hello", str);
// hello world

하지만 ES6 부터는 이렇게 바뀌었다.

var str = "world"
console.log(`hello ${str}`);
// hello world

별 차이 없어 보이지만 길고 긴 문장에 많은 변수를 넣으려면 콘솔찍기 귀찮았는데 아주 간단하게 해결할 수 있게 되었다.

성능상에서도 차이가 아예 없는 수준이니까 템플릿 리터럴 사용이 좋겠다.

 

2. Arrow Function

레거시 코드에서는 생각보다 안보임

function을 선언하는 과정에서 사용 가능한 문법이다.

실질적으로 변화가 있는 것이니 자세히 알아보자.

 

우선 사용법이다.

function func1 () {
    return "함수 선언식"
}

const func2 = function () {
    return "함수 표현식"
}

const func3 = () => {
    return "화살표 함수"
}

특이한 게 일반적인 함수 선언에는 함수 선언식 , 표현식 이라는 두가지 방법이 있다.

이 둘의 차이는 선언 후에서나 쓰느냐 선언 전에도 쓸 수 있느냐의 차이이다.

Hoisting 이라는 JS 의 기술로 인한 것인데 이건 뭐 여기서 설명할건 아닌것같다.

 

아무튼 두 가지 방식의 차이를 알아보자

 

1. Prototype

생성자 함수 여부이다.

• 일반 함수 선언은 prototype 이 있지만
• 화살표 함수는 prototype이 없다.

prototype에 관해서는 정말 좋은 글이 있으니 참고하길

https://www.nextree.co.kr/p7323/

JavaScript : 프로토타입(prototype) 이해

 

2. Argument

함수의 인자를 선언하지 않고 가져올 수 있냐 없냐의 차이이다.

• 일반 함수 선언은 가지고 올 수 있다.
• 화살표 함수는 가지고 올 수 없다.

function func1 () {
    console.log(arguments)
}

const func2 = () => {
    console.log(arguments)
}

func1("hello","world") // [Arguments] { '0': 'hello', '1': 'world' }
func2("hello","world") // undefined

차이와 별개로 지금은 arguments 대신에 rest를 사용하는걸 권장한다.

function func1 (...rest) {
    console.log(rest)
}

const func2 = (...rest) => {
    console.log(rest)
}

func1("hello","world") // ["hello","world"]
func2("hello","world") // ["hello","world"]

3. this

가장 중요한 차이라고 생각된다.

위에 말했다시피 

일반함수는 prototype을 가지고

화살표함수는 prototype을 가지지 않는다.

그 말은 즉 화살표함수는 스스로 객체와 바인딩을 할 수가 없다는 것이니

this 를 사용했을 때

일반함수는 함수가 속한 객체를 가리키고

화살표함수는 전역 객체를 가리키게 된다.

const dog = {
    name: "허스키",
    myFunc: function() {
      return this;
    },
    myArrow: () => {
      return this;
    },
  };
  
  console.log(dog.func()); // dog 객체
  console.log(dog.arrowFunc()); // 전역 객체

 

헷갈릴 수 있지만 정확히 파악해두는 것이 좋을것이라고 생각한다.

 

3. let, const 추가

이것도 가장 중요한 변화중에 하나가 아닌가싶다.

기존에는 var 라는 예약어를 사용해서 변수를 선언했었는데 이젠 var let const 총 3가지를 사용한다.

하지만 뒤늦게 나온 const 라는 녀석을 사용해서 코드를 짜야 잘 짠 코드다 라고들 한다.

각각은 Hoisting , Lexical Scope, Block Area 의 차이가 있고

var 와 let은 변화가 가능한 변수, const 는 변화가 불가능한 상수이다. 

자세히 알아보는것은 구글링을 통해서 알아보자

 

 

그래도 차이를 느낄 수 있을만한 코드정돈 적어둔다.

var

const func = () => {
    console.log(str) // Hoisting으로 인해 선언 전에 사용이 가능하다. (undefined)
    var str;
    console.log(str) // undefined
    str = "hi";
    console.log(str); // hi
    let str = "hi"
    console.log(str); // hi 재선언 가능
    if(true) {
        var str2 = "bye"
        console.log(str) // hi 해당 블록 상위에서 사용한 변수는 사용 가능
        console.log(str2) //bye
    }
    console.log(str2) // function level scope로 인해 if문의 밖이지만 같은 함수 안에서 사용이기에 가능 (bye)
}

func();
// console.log(str); // error 함수 밖에서의 사용은 불가능

let

const func = () => {
    // console.log(str) // error! Hoisting이 되지않아 사용 불가
    let str;
    console.log(str) // undefined
    // let str = "hi" // 동일 블록 내에서 재 선언 불가능 상위나 하위에선 가능
    str = "hi";
    console.log(str); // hi
    if(true) {
        let str2 = "bye"
        console.log(str) // hi 해당 블록 상위에서 사용한 변수는 사용 가능
        console.log(str2) //bye
    }
    // console.log(str2) // Block level scope로 인해 if문의 밖이어서 사용 불가
}

func();
// console.log(str); // error 블록 밖에서의 사용은 불가능

const

const func = () => {
    // console.log(str) // error! Hoisting이 되지않아 사용 불가
    // const str; // error const는 반드시 선언과 동시에 초기화 해야한다.
    const str = "hi";
    // str = "bye" // error!! const 는 선언 이후 값을 변경할 수 없다.
    // const str = "hello" // 동일 함수 내에 다른 블록 레벨이여도 재선언 불가능
    console.log(str); // hi
    if(true) {
        const str2 = "bye"
        console.log(str) // hi 해당 블록 상위에서 사용한 변수는 사용 가능
        console.log(str2) //bye
    }
    // console.log(str2) // Block level scope로 인해 if문의 밖이어서 사용 불가
}

func();
// console.log(str); // error 블록 밖에서의 사용은 불가능

 

 

4. 모듈 관리

// es5
const express = require("express");
module.exports = express;

// es6
import express from "express";
export default express

추가적으로 import 할 때 쓰는 문법, export할 때 쓰는 문법이 더 있으니 알아보시길!

 

5. class 추가

객체지향의 개념인 class 가 추가되었다.

class 의 오버라이딩과 상속은 super라는 키워드로 가능하다.

 

6. 구조분해할당

내가 매우 애용하는 구조분해할당이다.

객체를 분해해서 한번에 변수나 객체, 배로 선언 할 수 있다.

// ======= 객체 ========
const user = {
    username: "An",
    loginid: "HoneyB",
    password: "password",
    age: 28,
}
const {username, age,...rest} = user;
console.log(username); // "An"
console.log(age) // 28
console.log(rest); // { loginin: "HoneyB", password:"password" }

// ======== 배열 =========

const mate = ["kim","son","park","an","lee"]
const [first,second, _ ,...rest2] = mate;
console.log(first); // kim
console.log(second); // son
console.log(rest2); // [ 'an', 'lee' ] 3번째 항목 무시

나는 구조분해할당을 매우매우매우 애용하고 잘 쓰고있다.

 

그 외에도

데이터 타입변경

Default Parameter 같은 유용한 것들이 많으니 꼭 공부하길 ( 특히 얘 프론트에서 많이 씀)

 

🔗 출처

내용