자바스크립트의 탄생과 ES6

김인태·2022년 10월 17일

🤗자바스크립트의 탄생

1996년 마이크로 소프트는 자바스크립트의 파생 버전인 “JScript”를 인터넷 익스플로러 3.0에 탑재했습니다. 그런데 JScript는 표준화되지 못하고 적당히 호환되었습니다. 넷스케이프 커뮤니케이션즈와 마이크로소프트는 자사 브라우저의 시장 점유율을 높이기 위해서 자사 브라우저에서만 동작하는 기능을 추가하기 시작했고, 이에따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작합니다.

그래서 자바스크립트의 표준화의 필요성이 대두되기 시작했고, 넷스케이프 커뮤니케이션즈는 컴퓨터 시스템의 표준을 관리하는 비영리 표준화기구인 ECMA 인터네셔널에 자바스크립트의 표준화를 요청했습니다.

그리고 자바스크립트는 상표권 문제로 ECMAScript라고 명명되었습니다.

🚩ES5 VS ES6(ECMA 2015)

템플릿 리터럴

템플릿 리터럴이란 작은 따옴표나 큰 따옴표 대신에 백틱( ` ) 으로 문자열을 감싸는 표현하는 기능을 말합니다. 템플릿 리터럴을 사용하면 내부에 문자열을 사용해 변수나 표현식 등을 넣을 수 있습니다.

ES5

var food = "pizza"
var count = 1;
console.log("제가 제일 좋아하는 음식은 + food + 이며 최대 + count +판 까지 먹을 수 있습니다.");

ES6

var food = "pizza"
var count = 1;
console.log(`제가 제일 좋아하는 음식은 ${food}이며 최대  ${count}판 까지 먹을 수 있습니다.");

Arrow function
- 소괄호,중괄호 생략이 가능해 가독성이 좋아집니다 (인자가 두 개면 생략 불가), (함수가 한 줄 이상이면 중괄호 생략 불가)
- ES5
- 함수 선언식
```
function str(arg1, arg2) { console.log("Carlos"); }
```
- 익명 함수 선언
```
function str(arg1, arg2) { console.log("Carlos"); }
```
- ES6
- 함수 선언식
```
const str = (arg1, arg2) =>  console.log("Carlos"); 
```

this의 다른 동작

ES5
ES5같은 경우 객체 내에 있는 메소드를 실행 시 this는 메소드가 선언된 해당 객체를 가리킨다. 하지만 객체 안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보고 있기 때문에 함수 안에서 this.name, this.age 를 하여도 아무 값이 나오지 않는다.이러한 경우 해결방안으로 innerInfo.call(this) 를 통해 this 를 바인딩 시켜주거나 this를 해당 변수에 담아서 var self = this 와 같은 방식으로 접근하면 사용하면 된다.
```
var Test = {
     name : "Carlos",   
     age : 27,
     info : function() {
          console.log(this)
          console.log(this.name , this.age)

          function innerInfo() {
              console.log(this)
              return this.name + ":" + this.age
          }
          return innerInfo()
     }
}

// console.log(Test.info("Carl",34)); 실행결과 
// {name: "Carlos", age: 27, info: ƒ}
// Carlos 27
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
// ":undefined"
```

ES6에서의 this 는 자신을 둘러싸고 있는 this
를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.

let thisTest = {
     name : "Carlos",   
     age : 27,
     info() {
          console.log(this)
          console.log(this.name , this.age)

          innerInfo = () => {
              console.log(this)
              return this.name + ":" + this.age
          }
          return innerInfo()
     }
}

//실행결과
console.log(thisTest.info('d',1));
 {name: 'Carlos', age: 27, info: ƒ}
 Carlos 27
{name: 'Carlos', age: 27, info: ƒ}
 Carlos:27

변수선언
- ES5
- ES5에선 var만 존재하였고 변수를 선언할 때 사용하였다 , 재할당과 재선언에 자유롭다.
```
var x = 10;
x = 15;
console.log(x); //15
var x = 12;
console.log(x); //12
```
ES6
let과 const의 추가
let : 한 번 선언된 변수에 동일한 이름으로 선언할 수 없지만 값은 재할당 할 수 있습니다.
```
let x = 10;
x = 15;
console.log(x); //15
let x = 12; // Identifier 'x' has already been declared
```

const는 한번 초기화된 변수에 재할당/ 재선언 할 수 없습니다.

const x = 10;
console.log(x); // 10;
x = 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

모듈
ES5
- require를 이용해 모듈화를 할 수 있습니다.
```
//같은 루트에 node.js라는 파일이 있다면
var node = require('./node.js);
```
- 위와 같이 사용함으로 파일 자체를 사용할 수 있습니다.
ES6
- import/export를 사용해 모듈을 관리합니다
- 다른 파일의 변수 또는 함수를 참조합니다.
- 하나의 모듈을 불러올 때
```
import 'import to loadname' from '파일 경로'
```
- 하나의 모듈을 내보낼 때
```
export default 'module'
```
- 여러개의 모듈을 불러올 때
```
import {a1, a2, ...} from '파일 경로'
```
- 모든 모듈을 전달 받기
```
import * as ‘object name’ form ‘파일 경로’
```

클래스

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 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

김인태

새로운 걸 배우는 것을 좋아하는 프론트엔드 개발자입니다!

이전 포스트

✔원티드 프론트엔드 프리온보딩 수료 회고

다음 포스트

자바스크립트의 탄생과 ES6