[JS] JavaScript vs ECMAScript 차이

JavaScript vs ECMAScript

 

자바스크립트와 ECMAScript 의 차이점이 궁금해서 정리해 보았다.

둘의 차이점에 대해서 알아보자.

 

---

 

첫 번째,

JavaScript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준이다.

 

ECMAScript는 JavaScript가 갖추어야 할 내용을 정리해둔 '설명서'이고,

JavaScript는 ECMAScript를 준수해서 만들어낸 '결과물' 이라고 생각하면 된다.

 

참고로, ECMAScript가 JavaScript화 하기 위해 등장하긴 했지만,

ECMAScript는 JavaScript 뿐만아니라 

모든 스크립트 언어(scripting languages)가 지켜야 하는 표준이다.

 

 

두 번째,

JavaScript는 ECMAScript를 기반이지만

ECMAScript에 정의된 내용뿐만 아니라, 

다른 부가적인 기능도 있다.

 

특히, 우리가 자바스크립트로 HTML 코드를 제어하기 위해 사용하는

DOM(Document Object Model)을 다루는 문법들은

ECMAScript에 표준화된 문법이 아니라 WebIDL에서 표준화된 기술이라고 할 수 있다.

 

---

 

자바스크립트의 데이터 타입

 

자바스크립트는 아래와 같은 데이터 타입이 있다.

 

1. number
2. string
3. boolean
4. undefined
5. null
6. object
7. symbol
8. bigint

 

유연한 데이터 타입

자바스크립트는 데이터 타입이 유연한 프로그래밍 언어이다.

 

맥락에 유연하게 변하는 데이터 타입의 특징은 처음엔 생소하고 혼란스러울 수 있지만,

잘 이해하고 활용한다면 좀 더 간결한 코드를 작성하고 빠르게 개발할 수 있는 장점이 될 수 있다!

 

Truthy 값과 Falsy 값

if, for, while 등 불린 타입(Boolean)의 값이 요구되는 맥락에서는

조건식이나 불린 타입의 값 뿐만아니라 다른 타입의 값도 불린 값처럼 평가될 수 있는데,

 

false 처럼 평가되는 값을 falsy 값, true 처럼 평가되는 값을 truthy값이라고 부른다.

 

falsy값에는 false, null, undefined, 0, NaN, ''(빈 문자열)이 있고,

falsy값을 제외한 값들은 모두 truthy값이 된다.

 

만약,

falsy와 truthy값을 명확하게 확인하고 싶다면

Boolean 함수를 사용해서 직접 boolean 타입으로 형 변환 해볼 수도 있다.

 

// falsy
Boolean(false);
Boolean(null);
Boolean(undefined);
Boolean(0);
Boolean(NaN);
Boolean('');

// truthy
Boolean(true);
Boolean('codeit');
Boolean(123);
Boolean(-123);
Boolean({});
Boolean([]);

 

논리 연산자

 

자바스크립트에서 AND와 OR연산자는 무조건 불린 값을 리턴하는게 아니라,

왼쪽 피연산자 값의 유형에 따라서 두 피연산자 중 하나를 리턴하는 방식으로 동작한다.

 

 

AND 연산자는 

왼쪽 피연산자가 falsy값일 때 왼쪽 피연산자를, 

왼쪽 피연산자가 truthy값일 때 오른쪽 피연산자를 리턴하고

 

반대로, 

 

OR 연산자는 

왼쪽 피연산자가 falsy 일 때 오른쪽 피연산자를, 

왼쪽 피연산자가 truthy 일 때 왼쪽 피연산자를 리턴한다.

 

 

console.log(null && undefined); // null
console.log(0 || true); // true
console.log('0' && NaN); // NaN
console.log({} || 123); // {}

 

---

 

자바스크립트의 다양한 변수 선언 방식

자바스크립트에는 다양한 변수 선언 키워드가 있다.

 

자바스크립트가 처음 등장할 때부터 사용되던 var와,

그리고 ES2015에서 새롭게 등장한 let과 const가 있다.

각각 특징에 대해 알아보자-

 

 

---

1. var 변수 특징

 

1. 변수 이름 중복선언 가능,
2. 변수 선언 전에 사용 가능(호이스팅),
3. 함수 스코프

 

특히 var 변수 사용시

중복된 이름으로 선언이 가능했던 특징은 여러 사람이 협업할 때 문제가 많았고,

이런 문제를 개선하기 위해 ES2015에서 let과 const가 등장했다.

 

 

---

2. let , const 변수 특징

 

1. 변수 이름 중복선언 불가 (SyntaxError 발생)
2. 변수 선언 전에 사용 불가 (ReferenceError 발생)
3. 블록 스코프

const 키워드는

let 키워드와 다르게 값을 재할당할 수 없다는 특징도 있다.

 

 

---

3. 함수 스코프(function scope)와 블록 스코프(block scope)

var 키워드로 선언한 변수는 함수 스코프

let과 const 키워드로 선언한 변수는 블록 스코프

를 가진다.

 

 

함수 스코프란 말 그대로 함수를 기준으로 스코프를 구분한다는 뜻이다.

그렇기 때문에 아래 코드처럼 함수 안에서 선언한 변수는 함수 안에서만 유효하게 된다!

function sayHi() {
  var userName = 'codeit';
  console.log(`Hi ${userName}!`);
}

console.log(userName); // ReferenceError

 

하지만,

함수를 제외한 for, if, while 등과 같은 문법 안에서 선언한 변수는

그 문법 밖에서도 계속 유효했었기 때문에 중복선언등의 문제가 있다.

 

 

 

이런 문제를 해결하기 위해 let과 const 키워드와 함께 블록 스코프가 등장하게 되었다!

for (var i = 0; i < 5; i++) {
  console.log(i);
}

console.log(i); // 5

 

블록 스코프는 중괄호로 감싸진 코드 블록에 따라 유효 범위를 구분하게 되는데,

 

 

 

아래 코드에서 볼 수 있듯이 함수와 다른 문법들 뿐만아니라,

그냥 중괄호로 감싸진 코드 블록으로도 유효 범위가 구분되는 모습을 확인할 수 있다.

function sayHi() {
  const userName = 'codeit';
  console.log(`Hi ${userName}!`);
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

{
  let language = 'JavaScript';
}

console.log(userName); // ReferenceError
console.log(i); // ReferenceError
console.log(language); // ReferenceError