ES의 의미와 ES5,ES6 차이점

 

ES의 의미 및 정의

ECMAScript라고도 하며 Ecma International이 ECMA-262 기술규격에 따라

정의하고 있는 표준화된 스크립트 프로그래밍 언어를 뜻한다.

웹 클라이언트 사이드 스크립트로 많이 쓰이고 Node.js를 이용한 서버 응용 프로그램에도

점차 많이 쓰이고 있다.

---

ES와 ES6의 대표적인 차이점들

템플릿 리터럴

• 백틱을 이용한 기능인데, 플레이스 홀더 ( ${variavle} ) 을 응용하여
• 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.

// ES5
var name = 'hong';
var age = 31;
console.log("저의 이름은 " + name + "이고, 나이는 " + age + "살 입니다.");

// ES6
let name = 'hong';
let age = 31;
console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`);

---

화살표함수

// ES5 함수 선언식
function str(arg1, arg2) { console.log("길동"); }

// 생성자 함수 ( 자주 사용되지는 않는다 )
var str = new Function("arg1", "arg2", "console.log('길동')");

// 함수 리터럴 (익명함수)
var str = function(arg1, arg2) { console.log("길동"); };

// ES6
let str = (arg1, arg2) => {
	console.log("길동");
    };
    
// 화살표 함수에 인자(argument)가 하나밖에 없다면 괄호 생략 가능.
// 한줄표현이 가능하면 중괄호도 생략 가능하다.
let str = arg1 => console.log(arg1)

// 객체 반환시
let str = func => ({ id: "31" });

---

this

ES5

• 이때는 객체 내에 있는 메소드 실행시 this라는 메소드가 선언된 객체를 가리킨다
• 하지만 객체 내 선언된 this는 해당 객체가 아닌 window를 보고있어
• 함수안에서 this.name, this.age 하여도 값이 나오지 않는다.
• 결국 innerInfo.caall(this)로 this를 바인딩 하거나
• this를 변수에 담아 var self = this와 같은 방식으로 접근.

var thisTest = {
	name : "홍길동",
    age : 31,
    info : function() {
    	console.log(this)
        console.log(this.name, this.age)
        
        function innerInfo() {
        	console.log(this)
            return this.name + ":" + this.age
        }
        return innerInfo()
    }
}

// 실행결과 
// {name: "홍길동", age: 31, info: ƒ}
// 홍길동 31
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
// ":undefined"

ES6

• 이번에는 this가 자신을 둘러싸고 있는 this를 보기 때문에
• 따로 바인딩, 변수에 담거나 할 필요가 없다.

let thisTest = {
	name : "홍길동",
    age : 31,
    info() {
    	console.log(this)
        console.log(this.name, this.age)
        
        innerInfo = () => {
        	console.log(this)
            return this.name + ":" + this.age
        }
        return innerInfo()
    }
}

// 실행결과
// {name: "홍길동", age: 31, info: ƒ}
// 홍길동 31
// {name: "홍길동", age: 31, info: ƒ}
// "홍길동:31"

// 생성자 함수의 인스턴스의 경우, this는 인스턴스를 가리킨다.
function Obj(value) {
	this.value = value;
}
var obj = new Obj(0);
console.log(obj.value); // 0

// 화살표 함수를 쓰면 함수가 선언된 스코프에 자동 바인딩
var obj = {
	value: 10,
    
    // 메소드 호출
    show: function() {
    	console.log(this.value); // 10
        
        // 함수 호출
        function show_01 () {
        	console.log(this.value); // undefined
        }
        show_01();
        
        // 화살표 함수
        function show_02 => () {
        	console.log(this.value); // 10
        }
        show_02();
    }
}
obj.show();

---

변수선언

ES5

• var 이외에는 없었고, 재할당과 재선언에 굉장히 자유롭지만
• 장단점의 차이가 극명하게 난다.

var a = 10;
a = 15;
console.log(a); // 15
var a = 12;
console.log(a); // 12

ES6

• let, const가 추가 되었다.
• let은 재선언은 되지않고, 재할당이 가능하다.

let a = 10;
a = 15;
console.log(a); // 15
let a = 12 // Identifier 'a' has already been declared

const는 초기화된 변수에 재할당/ 재선언이 불가

const a = 10;
console.log(a); // 10;
a = 15; // TypeError: Assignment to constant variable.

let, const는 블랙 스코프 또는 Function 스코프 내부에 선언되면

해당 스코프 밖에서 안에 있는 변수를 참조할 수 없다.

if (true) {
  var i = 0;
}
console.log(i); // 0
if (true) {
  let j = 10;
}
console.log(j); // ReferenceError
if (true) {
  const k = 100;
}
console.log(k); // ReferenceError

밖에서 안에 있는 const, let은 참조할 수는 있다.

const i = 5;
if (ture) {
  console.log(i); // 5
}

var는 Function 스코프는 내부에 선언된 var를 외부에서 참조할 수 없지만

블록 스코프에선 내부에 선언되어 있어도 외부에서 참조 가능하다.

function f() {
  var v = 5;

  console.log(v); // 5
}

console.log(v); // ReferenceError: v is not defined

if (true) { 
    var i = 0;
}

console.log(i); // 0

	재 선언	재 할당	Block scope	Function scope
var	O	O	외부에서 내부 참조 가능	외부에서 내부 참조 불가
let	X	O	외부에서 내부 참조 불가	외부에서 내부 참조 불가
const	X	X	외부에서 내부 참조 불가	외부에서 내부 참조 불가

 

---

모듈

• ES5이전에는 각 기능별 JS파일을 나누고 개발 및 관리가 불가 했다.

ES5

• require를 통해 모듈화를 할 수 있었다

// index.html
<script>
  src = "slider.js";
</script>
<script>
  src = "script.js";
</script>

// script.js
var slider = require(./slider.js)
// 혹은 require(./slider)

ES6

• import / export 로 모듈을 관리할 수 있다
• 모듈이란 실현 가능한 특정 프로그램 그룹
• 다른 파일의 변수, 함수를 참조
• 클래스와 같은 모듈이 로딩될 때, import와 export를 이용해 사용한다

 

하나의 모듈만 공유

// 로드 모듈
import 'import to loadname' from '파일 경로'

// 아웃풋 모듈
export default 'module'

// script.js
import Carousel from "./carousel";
cosnt carousel = new Carousel();

// carousel.js
export default class Carousel {
    constructor() {
        this.calc();
    }
    calc() {
        console.log(10);
    }
}

 

여러 모듈을 사용

• 아웃풋 관점에서 export는 사용하고 싶은 곳에 붙이고
• import는 예시와 같이 사용

// import 예시
import {a1, a2, ...} from '파일 경로'}

// script.js
import { multi, SuperMulti } from "./Multiplay";
console.log(multi(5)); // 50
console.log(SuperMulti(6)); // 600

export const i = 10;

export function multi(x) {
  return i * x;
}

export function superMulti(x) {
  return i * x * 10;
}

모든 모듈을 전달 받기 위해서는 import를 예시와 같이 작성

import * as ‘object name’ form ‘파일 경로’

import * as lib from "./multiply";
console.log(lib.multi(5)); // 50

---

Class

ES5

• class라는 키워드는 없었지만 프로토타입을 통해 실현 가능했다

var Add = function(arg1, arg2) {
	this.arg1 = arg1;
    this.arg2 = arg2;
};

Add.prototype.calc = function() {
	return this.arg1 + "+" + this.arg2 + "=" (this.arg1 + this.arg2);
};

var num = new Add(5, 8);
console.log(num.calc()); // 5 + 8 = 13

ES6

• class 키워드를 사용해 선언이 가능해졌다.

class Add {
	constructor(arg1, arg2) {
    	this.arg1 = arg1;
        this.arg2 = arg2;
    }
    calc() {
    	return this.arg1 + "+" + this.arg2 + "=" (this.arg1 + this.arg2);
    }
}

var num = new Add(5, 8);
console.log(num.calc()); // 5 + 8 = 13

---

클래스 상속

• 클래스의 상속과 오버라이딩은 super를 사용해 수행

ES5

var AddSquare = function(arg1, arg2) {
	Add.call(this, arg1, arg2);
};
Object.assign(AddSquare.prototype, Add.prototype);

AddSquare.prototype = {
	calc: function() {
    // 메소드 생략 불가
    Add.prototype.calc.call(this)
	},
    calcSquare: function() {
    	this.pow = Math.pow(this.arg1 + this.arg2, 2);
    return "(" + this.arg1 + "+" + this.arg2 + ")^2=" + this.pow;
  }
};

var numSquare = new AddSquare(5, 8);
console.log(numSquare.calc()); // 5 + 8 = 13
console.log(numSquare.calcSquare()); // (5 + 8) ^ 2 =169

ES6

class AddSquare extends Add {
  constructor(arg1, arg2) {
    super(arg1, arg2);
  }
  calc() {
    super.calc();
  }
  calcSquare() {
    this.pow = Math.pow(this.arg1 + this.arg2, 2);
    return "(" + this.arg1 + "+" + this.arg2 + ") ^ 2 =" + this.pow;
  }
}

var numSquare = new AddSquare(5, 8);
console.log(numSquare.calc()); // 5 + 8 = 13
console.log(numSquare.calcSquare()); // (5 + 8) ^ 2 = 169

 

이외에도 

객체 구조 분해 할당도 있으나 따로 포스팅한 글이 있으니 Pass..

https://jang-kroed.tistory.com/14

구조 분해 할당