ECMAScript, equality algirithm

equality algorithm과 ECMAScript를 알기전에 자바스크립트(JavaScript)에 대해 알아보자.

ECMAScript 와 JavaScript

개요

일반적으로 알려진 자바스크립트(JS)는 웹 브라우저(클라이언트)에서 서버에 데이터를 보내기 전에 데이터 유효성 검사 등을 처리하는 스크립트 언어이다. 이 자바스크립트는 1995년 넷스케이프(Netscape)의 Brendan Eich에 의해 개발된 언어이고, Mocha -> LiveScript -> JavaScript의 네이밍 변천사를 갖고있다.

그리고 사실 우리가 알던 자바스크립트는 ECMAScript + BOM(Browser Object Model) + DOM(Document Object Model)라는 1개의 코어와 2개의 모델로 이루어져있다.

ECMAScript

그렇다면 본론으로 돌아가서 ECMAScript(이하 ES)란 무엇인가?

ES는 자바스크립트를 이루는 코어(Core)스크립트 언어로써, 다양한 환경에서 운용될 수 있게 확장성을 갖고 있기때문에 사용처가 웹환경으로 국한되어있지는 않다.

즉 위에서 말한 우리가 아는 자바스크립트는 웹브라우저에서 돌아갈 수 있도록 BOM 과 DOM을 함께 사용하는 확장성이 되겠다. 이러한 확장성들은 ES 버전에 따른 문법과 기능의 확장을 가능하게 한다.

ES는 다음과 같은 버전 히스토리를 갖고있다.

ES3 -> ES5 -> ES6(ES2015) -> ES7(ES2016)

그렇다.. ES5는 ES2015가 아니다... (너무 쪽팔리지만 이제라도 알았으니.. 다행이라고..)

BOM

BOM(Browser Object Model)

웹 브라우저 전체를 객체로 관리하는 것이다. 자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것을 가리킨다.

브라우저 창이 열리면 가장 먼저 window 객체(지겹도록 많이 써먹었던 window (전역 객체))가 만들어지고, 그 하위에 브라우저 각 요소에 해당하는 객체가 만들어진다. 이들은 웹 문서와 주소 표시줄처럼 브라우저의 각 요소에 해당하는 객체이고 각자 또 다른 하위 객체를 갖는다 => 트리 구조라고 이해

자주 사용하는 브라우저 내장 객체

• window : 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체 (브라우저 창 안에 존재하는 모든 요소의 최상위 객체, 최고 부모)
• document : 웹 문서에서 태그를 만나면 만들어지는 객체, HTML 문서 정보를 가지고 있다.
• history : 현재 창에서 사용자 방문 기록을 저장하고 있는 객체
• location : 현재 페이지에 대한 URL 정보를 가지고 있는 객체
• navigator : 현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체
• screen : 현재 사용 중인 화면 정보를 다루는 객체

DOM

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현된다.

자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다.

• 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있습니다.
• 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있습니다.
• 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.
• 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있습니다.
• 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.
• 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.
• 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.

DOM의 종류
W3C DOM 표준은 세 가지 모델로 구분된다.

1. Core DOM : 모든 문서 타입을 위한 DOM 모델
2. HTML DOM : HTML 문서를 위한 DOM 모델
3. XML DOM : XML 문서를 위한 DOM 모델

HTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법을 정의한다.
모든 HTML 요소는 HTML DOM를 통해 접근할 수 있습니다.

XML DOM은 XML 문서에 접근하여, 그 문서를 다루는 표준화된 방법을 정의한다. 모든 XML 요소는 XML DOM를 통해 접근할 수 있다.

Core DOM은 최초 객체 모델이 완성된 이후로 HTML과 XML등(모든 문서 타입)을 다루기 위해 생겨났다.

Equality Algorithm

ES2015(ES6)에는 4가지 같음(equality) 알고리즘이 있다.

• 추상적(abstract) 같음 비교 (==)
• 엄격한(strict) 같음 비교 (===): Array.prototype.indexOf, Array.prototype.lastIndexOf 및 case 절 매칭에 쓰임
• 등가0(SameValueZero): Map 및 Set 연산뿐만 아니라 %TypedArray% 및 ArrayBuffer 생성자, 그리고 ES2016에 예정된 String.prototype.includes에 쓰임
• 등가(SameValue): 그 외 모든 곳에 쓰임

JavaScript는 3가지 서로 다른 값 비교 연산을 제공한다.

• === 를 사용하는 엄격한 같음 (또는 "삼중 등호" 또는 "항등(identity)")
• == 를 사용하는 느슨한(loose) 같음 ("이중 등호")
• Object.is (ECMAScript 2015에 새로 들임)

이중 등호 (==)는 두 가지를 비교할 때 형 변환을 수행하고 IEEE 754를 준수하기 위해 NaN, -0 및 +0을 특별히 처리한다. (그래서NaN != NaN이고 -0 == +0이다)

삼중 등호 (===)는 이중 등호(NaN, -0 및 +0의 특수 처리 포함)와 동일한 비교를 수행하지만 형 변환은 수행하지 않는다. 형식이 다른 경우 false가 반환됩니다.

Object.is는 형 변환을 하지 않으며 NaN, -0 및 +0에 대한 특수 처리를 수행하지 않는다.(특수 숫자 값을 제외하고는 ===와 동일한 동작을 제공함)

삼중 등호(===)를 사용하는 엄격한 같음

• 둘이 비교되기 전에 어떤 다른 값으로 형변환되지 않는다.
• 둘이 서로 형이 다르면, 둘은 같지 않다.
• 둘이 같은 형이고 숫자가 아닌 경우, 같은 값이면 같다.
• 둘이 숫자인 경우, 둘 다 NaN이 아닌 같은 값이거나 하나는 +0 또 하나는 -0인 경우 같다고 한다.

var num = 0;
var obj = new String("0");
var str = "0";
var b = false;

console.log(num === num); // true
console.log(obj === obj); // true
console.log(str === str); // true

console.log(num === obj); // false
console.log(num === str); // false
console.log(obj === str); // false
console.log(null === undefined); // false
console.log(obj === null); // false
console.log(obj === undefined); // false

부동 소수점 0은 양이든 음이든 하나의 부호를 지닌다. 이는 특정 수학상의 해결책을 나타내는 데 유용하지만, 대부분의 상황에 +0과 -0의 차이에 신경쓰지 않기에, 엄격한 같음은 둘을 같은 값으로 다룬다.

부동 소수점은 not-a-number 값(NaN) 개념을 포함한다. 특정 잘못 정의된 수학 문제의 해결책을 보여주기 위해서이다. 예를 들어 양의 무한대(infinity)에 추가된 음의 무한대가 있다.

엄격한 같음은 NaN을 다른 모든 값과 같지 않게 다룬다.

이중 등호(==)를 사용하는 느슨한 같음

• 두 피연산자의 타입이 다를 경우, 비교하기 전에 동일한 타입으로 변환하도록 한다. (숫자와 문자열을 비교할 경우, 문자열을 숫자로 변환하도록 한다.)
• 두 값을 같은 형으로 형 변환한 후에 최종 같음 비교는 삼중 등호처럼 수행된다.
• 이중 등호는 대칭(symmetric)이다. A == B는 A 및 B가 어떤 값이든 항상 B == A와 같은 의미를 갖는다.
• 두 피연산자가 모두 객체일때, 두 피연산자가 동일한 객체를 참조할때에만 true를 반환한다.
• 하나의 피연산자가 null이고 다른 하나가 undefined일때, true를 반환한다.
• 하나의 피연산자가 Boolean일 경우, Boolean 피연산자가 true일 경우 1로 변환하고, false일 경우, +0으로 변환한다.
• 하나의 피연산자가 객체이고 다른하나가 숫자나 문자열이면, 객체를 valueOf()나 toString()를 사용해 기본 데이터 타입으로 변환하도록 한다.
  • 두개의 피연산자가 동일한 타입일 경우, 다음과 같이 비교한다.
  • String: 두 피연산자가 동일한 문자순서가 동일한 문자열일 경우, true를 반환한다.
  • Number: 두 피연산자가 동일한 값을 가질 경우, true을 반환한다. +0 과 -0 은 동일한 값으로 취급한다. 어느 한쪽이 NaN일 경우, false를 반환한다.
  • Boolean: 두 피연산자가 모두 true이거나, 모두 false일 경우, true를 반환한다.

일치연산자(삼중 등호, ===)와의 가장 두드러지는 차이점은 일치 연산자는 타입변환을 시도하지 않는다는 것이다. 일치 연산자는 다른 타입을 가진 피연산자는 다르다고 판단한다.

console.log(1 == 1); // true
console.log('hello' == 'hello'); // true
console.log('1' ==  1); // true
console.log(null === undefined); // true
console.log(0 == false); // true
console.log(0 == null); // false
console.log(0 == undefined); // false
console.log(0 == !!null); // true
console.log(0 == !!undefined); // true
console.log(null == undefined); // true

const number1 = new Number(3);
const number2 = new Number(3);
console.log(number1 == 3); // true
console.log(number1 == number2); // false