[JavaScript] ES5 문법

ES(ECMAScript) : ECMAScript는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어입니다. 자바스크립트를 표준화하기 위해서 만들어졌으며 꼭 자바스크립트가 아니더라도 어도비 플래시를 사용하는 소프트웨어에서 사용하는 액션스크립트, MS 사의 인터넷 익스플로러에 쓰이는 J스크립트 등 다른 구현체들 역시 포함하고 있습니다.
한마디로 ECMA 스크립트는 규격, 표준 즉, 스펙을 말한다

ES6가 압도적으로 유명하지만 ES5도 사람들이 ES6로 통용해서 부르고 사용하는 느낌을 받아서 ES5에 추가된 것들을 정리해보자

 

w3Schools에서 정리하여 제공하는 링크 

1. 배열과 관련해서 새로운 메소드들이 생겼는데 대표적으로 forEach, map, filter, reduce, some, every와 같은 메소드가 생겼다. 이 메소드들은 개발자가 반복 횟수나 조건을 잘못 입력하는 등의 실수를 줄여주는 효과
2. object에 대한 getter/setter 지원
3. 자바스크립트 strict 모드 지원(더욱 세심하게 문법 검사를 합니다.)
4. JSON 지원(과거에는 XML을 사용하다가, json이 뜨면서 지원하게 되었습니다.)
5. bind() 메소드가 생겼습니다. (this를 강제로 bind 시켜주는 메소드입니다.)

일단 1번 4번은 굉장히 익숙하게 사람들이 대부분 의심하지 않고 사용하고 있어서 잘 알고 또 그냥 잘 사용하면 돼서 넘어가면 3번 5번은 개념이 들어가 있기 때문에 알고 넘어가야 한다.(근데 난 모르고 넘어갔다.... 그냥 읽고 지나갔고 특히 중요한 개념인 this를 놓치고 갔다)

 

Strict mode

Strict mode - JavaScript | MDN

Strict mode - JavaScript | MDN

 

ECMAScript 5에서 소개된 JavaScript의 엄격 모드는 JavaScript의 제한된 버전을 선택하여 암묵적인 "느슨한 모드(sloppy mode)"를 해제하기 위한 방법입니다.라고 공식문서에 나와있다

엄격 모드를 사용하면 평범한 JavaScript 시멘틱스에 몇 가지 변경이 일어난다고 한다.

1. 기존에는 조용히 무시되던 에러들을 throwing 합니다.
2. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어집니다
3. 엄격 모드는 ECMAScript의 차기 버전들에서 정의될 문법을 금지합니다

💡 또한 상충되지 않는 스크립트들끼리 맹목적인 연결이 불가능하기 때문에 엄격 모드의 스크립트와 비-엄격 모드의 스크립트의 연결은 심사숙고하시기를 바란다고 나와있으니 엄격 모드를 적용한 것과 안 한 것의 연결은 조심하자

 

그리고 엄격 모드를 적용하는 방식 중 눈여겨봐요 할 것 같아서 공식문서에서 가져온 글을 확인해보자 → ECMAScript 2015는 JavaScript 모듈을 소개했습니다. 따라서, 이는 엄격 모드를 적용할 수 있는 3번째 방법입니다. JavaScript 모듈의 전체 콘텐츠는 엄격 모드 시작을 위한 구문 없이도 자동으로 엄격 모드입니다.

 

bind 메소드와 this

Function.prototype.bind() - JavaScript | MDN

Function.prototype.bind() - JavaScript | MDN

 

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

공식에 나와있는 예시이다 그러니까 원래 javascript에서 첫번째 예시와 같이 사용하면 this는 window인
전역 객체를 바라본다 그래서 undefined가 return됨 하지만 bind를 통해서 호출하면 getX의 this.x가
module의 x값을 바라보는 것을 확인 할 수 있음 

공식을 보면 더 좋고 그중에서 내가 생각하기에 제일 쉽게 정리된 부분과 예시를 가져왔다 

bind()의 가장 간단한 사용법은 호출 방법과 관계없이 특정 this 값으로 호출되는 함수를 만드는 겁니다. 
초보 JavaScript 프로그래머로서 흔한 실수는 객체로부터 메소드를 추출한 뒤 그 함수를 호출할때, 
원본 객체가 그 함수의 this로 사용될 것이라 기대하는 겁니다
(예시 : 콜백 기반 코드에서 해당 메소드 사용). 
그러나 특별한 조치가 없으면, 대부분의 경우 원본 객체는 손실됩니다. 
원본 객체가 바인딩 되는 함수를 생성하면, 이러한 문제를 깔끔하게 해결할 수 있습니다.

bind 뜻이 묶다 인데 이걸 생각하면서 보면 더 이해가 잘 됨

this.x = 9;

var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX();
// 9 반환 - 함수가 전역 스코프에서 호출됐음

// module과 바인딩된 'this'가 있는 새로운 함수 생성
// 신입 프로그래머는 전역 변수 x와
// module의 속성 x를 혼동할 수 있음
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81

 

 

이렇게 ES5에 대해 간단히 정리했다. 이 글을 더 잘 이해하기 위해서는 this에 대한 개념도 필요하니 this에 관련된 글과 그리고 가장 핵심으로 생각하는 ES6에 관한 글도 바로 이어서 정리해야겠다.