[ECMAScript] ES1 ~ 6

아치·2024년 8월 6일
ES1ES3ES5ES6JavaScriptecmascriptes2es4

ECMAScript

목록 보기
1/1

ECMAScript

Netscape 회사의 Brendan Eich에 의해 최초 개발된 자바스크립트와 MS에서 개발돼 IE에 탑재된 Jscript가 서로 제각각이라 자바스크립트를 표준화하기 위해 만들어진, 표준화된 스크립트 프로그래밍 언어를 칭한다. 표준을 위해 ECMA란 정보와 통신시스템의 비영리 표준 기구에 제출하여 표준 작업을 ECMA-262의 이름으로 1996.11에 시작해 1997,06에 채택되었다. ES 뒤에 년도가 아닌 숫자가 붙는 이유는 버전 단위로 붙여 버전형 명칭이다. (현재는 ES2020과 같은 년도를 붙이는 것을 기본 버전명으로 사용한다고 한다.)

ES1 ~ ES3 (1997 ~ 1999)

ES1 (1997)

1997년 06월, 초판

ES2 (1998)

1998년 6월

ES3 (1999)

1999년 12월

자바스크립트의 기본적인 특징들을 가지고 있음

  • 호이스팅
  • 프로토타입
  • 클로져
  • 함수 단위 스코프
  • Try/Catch 예외처리
  • 정규식 등

ES4 (폐기)

언어의 정치적 견해 차이로 ES4 명세 폐기

ES5 (2009)

  • 배열에 forEach, filter, map, some, reduce, every 등의 메소드 지원
  • Object에 대한 getter / setter 지원
    - get: 프로퍼티 읽을 때
    • set: 프로터티 값 할당할 때
  • 자바스크립트 strict 모드 지원
    - "use strict;" 선언으로 사용
    • strict 모드로 js 코드를 실행
    • IE9에서는 미지원
  • JSON 지원, 과거엔 XML 사용했으나, JSON을 많이 사용하게 되면서 JSON 지원
  • bind() 메서드 지원
    - this의 강제 bind

ES6 (2015)

  • ECMAScript2025 라고도 불리우며 MS에서 ECMAScript 표준을 최대한 따르는 IE Edge 발표

  • Arrow Function
    - function 키워드를 대신 하여 화살표를 사용해 사용

    • this를 바인딩하지 않으며, 선언된 함수 내부 scope this를 가르킴

    • 익명 함수 사용 가능 = 함수 호출을 위한 함수 표현식이나 콜백함수로 사용

    • ES5

      // 익명함수
var double = function (x) {
    return x * 2;
};

console.log(double(3)); //6

// 콜백 함수
var array = [1, 3, 5];
var double = array.map(function (x) {
    return x * 2;
});

console.log(double) // [2, 6, 10]

    • ES6

      // 익명 함수
const double = (x) => x * 2;
console.log(double(2)) //4

// 콜백 함수
const array = [2, 4, 6];
const double = array.map((x) => x * 2);
console.log(double) //[4, 8, 12]

  • Template literals
    - 문자열 표현이 간단해짐

    • 이중 따옴표, 작은 따옴표 대신 백틱 의 사용

    • ES5

      var name = '망글곰';
var age = 1;

console.log("나는 " + name + "!, 나이는 " + age + "살!!!");

    • ES6

      const name = '망글곰';
const age = 1;

console.log(`나는 ${name}!, 나이는 ${age}살!!!`);

  • This
    - function 키워드 사용

    • 일반 함수와, 화살표 함수의 큰 차이를 가짐

    • ES5 의 this는 객체 내에 있는 메서드 실행 시 메서드가 선언된 해당 객체

    • ES6 의 this는 자신을 둘러싼 this, 바인딩이나 변수에 담는 게 불필요

    • 화살표 함수의 this는 상위 스코프 this이다. call, apply, bind 메서드로 변경 불가

      var object = {
    value: 1,
  	// 메서드 호출
    show: function () {
        console.log(this.value); // 1
      
      // 함수 호출
      function show2 () {
      	console.log(this.value); // undefined
      };
      show2();
      
      // 화살표 함수
      function show3 = () => {
      	console.log(this.value); // 1
      };
      show3();
    },
};

  • 변수: Let, Const
    ES5: var 키워드로 변수 선언, 재할당과 재선언 가능

    x = 1;
console.log(x); // 1;

var x = 10;
console.log(x); // 10;

function get() {
	var y = 100;
};

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

if(x) {
	var y = 1000;
};

console.log(y); // 1000

    function 키워드로 선언된 함수 내 스코프는 내부에서 선언된 var 변수를 외부에서 참조할 수 없지만, 블록 스코프에서 선언한 var 변수는 외부에서 참조가 가능

    ES6: let, const 키워드 추가

    let x = 0;
x = 10;
console.log(x); // 10

let x = 100;
console.log(x); // Identifier 'x' has already been declared

if(true) {
    let y = -1;
};

console.log(y); // ReferenceError

    let 은 한 번 선언된 변수명을 재선언할 수 없지만, 선언된 변수에 재할당이 가능하며, 블록 스코프, 함수 스코프 내부에서let 키워드로 선언한 변수는 해당 스코프 외부에서 참조할 수 없음

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

if(true) {
    const y = -1;
};

console.log(y); // ReferenceError

    const 는 한 번 선언, 할당된 변수에 재선언과 재할당이 불가함, let 과 같이 블록 스코프, 함수 스코프 내부에서 const 키워드로 선언한 변수는 해당 스코프 외부에서 참조할 수 없음

  • 모듈: import, export
    ES5: require 를 통한 모듈화

    var button = require(./button.js);
// 또는
require(./button);

    ES6: import, export 로 모듈 관리 가능, 비동기 방식으로 작동, 모듈에서 실제로 사용하는 부분만 불러와 성능과 메모리 부분에서 유리

  • class
    - ES5에서 class 키워드가 없었지만 생성자 함수, 프로토타입, 클로저 사용한 객체 지향 프로그래밍 구현
    - 생성자 함수와 같이 new 연산자와 함께 클래스 이름 호출하면 클래스 인스턴스 생성

  • 가변 파라미터
    - 함수 사용 시, 기본 파라미터, 가변 파라미터 지정 가능
    - 가변 파라미터: 기본 파라미터 외로 넘어온 파라미터를 배열로 묶어 받을 수 있다.

참고

profile
아치

0개의 댓글