모던 자바스크립트의 이해

모던 자바스크립트란?

현시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트

Javascript vs ECMAScript

  • Javascript는 프로그래밍 언어, ECMAScript는 프로그래밍 언어의 표준(모든 스크립트 언어의 표준)
  • Javascript는 ECMAScript를 기반으로 하지만 ECMAScript에 정의된 내용뿐만 아니라, 다른 부가적인 기능도 있다.(ex DOM을 다루는 문법등 - ECMAScript표준화된 문법이아니라 WebIDL에서 표준화된 기술)


Javascript의 동작원리

자료형이 유연

  • Number ( 기본형 )
  • String ( 기본형 )
  • Boolean ( 기본형 )
  • Null ( 기본형 )
  • undefined ( 기본형 )
  • Object (참조형)
  • Symbol : 유일한 값을 만들 때
  • BigInt : 어멍 큰 숫자를 다룰 때

Symbol과 BigInt

// Symbol 데이터타입으로 user 변수 생성
const user = Symbol();

// 심볼 값 넣어서 user 변수 생성
const user = Symbol('this is a user');

// Symbol 값을 담게 된 user는 다른 어떤 값과 비교해도 true가 될 수 없는 고유한 변수가 됨
user === 'this is user'; // false
user === 'user'; // false
user === 'Symbol'; // false
user === true; // false
user === false; // false
user === 123; // false
user === 0; // false
user === null; // false
user === undefined; // false

// 심지어 똑같은 설명을 붙인 심볼을 만들더라도 두값을 비교하면 false가 반환
const symbolA = Symbol('this is Symbol');
const symbolB = Symbol('this is Symbol');

console.log(symbolA === symbolB); // false

BigInt

  • BigInt 는 자바스크립트에서 아주 큰 정수(Integer)를 표현하기 위해 등장한 데이터 타입

  • 자바스크립트에서 안전한 최대 정수는 $( 2^{53} - 1 )$ 이고, 최소 정수는 $-( 2^{53} - 1 )$ 이어서 이범위를 초과하면 연산에 미세한 오류가 발생한다.

    ⇒ 그래서 이런 큰수 또는 작은수에는 BigInt 자료형을 사용한다.

사용법

// 숫자뒤에 n을 붙임
console.log(9007199254740993n); // 9007199254740993

// BigInt()함수사용
console.log(BigInt(9007199254740993)); // 9007199254740993

주의 사항

  • 소수 표현에는 사용 불가
  • Bigint 타입끼리만 연산 가능

불린인 듯 불린 아닌 불린 같은 값

  • Falsy 값 : false , null , nudefined , NaN , 0 , ''
  • Truthy 값 : [] , {}


AND와 OR의 연산 방식

AND 연산

console.log('Codeit' && 'Javascript');    // Javscript

// 왼쪽 값이 true이면 오른쪽 값 리턴
// 왼쪽 값이 false이면 왼쪽 값 리턴
console.log(true && true);    // true
console.log(true && false);   // false
console.log(false && true);    // false
console.log(false && false);   // false

OR 연산

// 왼쪽 값이 true이면 왼쪽 값 리턴
// 왼쪽 값이 false이면 오른쪽 값 리턴
console.log(true && true);    // true
console.log(true && false);   // ture
console.log(false && true);    // true
console.log(false && false);   // false

우선순위

  • AND 연산자가 OR 연산자보다 우선순위가 높다 ( AND > OR )

null 병합 연산자 ( ES2020에서 새롭게 추가됨 )

  • ?? 물음표 두개를 사용해서 null 혹은 undefined 값을 가려내는 연산자
  • ?? 연산자 왼편의 값이 null 이나 undefined 라면 연산자 오른편 값이 리턴
  • ?? 연산자 왼편의 값이 null 이나 undefined 이 아니라면 연산자 왼쪽 값이 리턴
const example1 = null ?? 'I';
const example2 = undefined ?? 'love';
const example3 = 'Codeit' ?? 'JavaScript';

console.log(example1, example2, example3); // I love Codeit


변수와 스코프

console.log(title);
var title;

위의 예처럼 변수선언보다 사용이 먼저되어 선언이 올라간듯한 현상을 호이스팅(Hoisting) 이라 한다.



  • 할당된 값은 할당 이후에 접근이 가능하다.
console.log(title);  // undefined
var title = 'adam';
console.log(title);  // adam



  • var 변수는 중복선언이 가능한 문제가 있다. ( 먼저 선언한 변수값이 사라짐 )
  • 하지만 let 변수나 const 변수는 선언 이후에 사용이 가능하다.
var title = 'Apple';
console.log(title);    // Apple
var title = 'Python';
console.log(title);    // Python



  • var 변수는 조건문이나 반복문에서 지역변수로 선언되는 것이 아니라 전역변수로 생성되는 문제가있다. 
    var x = 3

if (x < 4) {
  var y = 3;
}

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

console.log('x: ', x);
console.log('y: ', y);
console.log('i: ', i);

/* Output
0
1
2
3
4
x: 3
x: 3
i: 5
*/



  • 하지만 let 과 const 변수는 {} 코드블럭으로 구분되어만 있어도 스코프를 구분한다.

    {
	let title = 'Apple';
	console.log(title);
}

console.log(title);

// Apple
// Uncaught

  • var , let, const 
    var x; // 함수 스코프 (function scope)
let y; // 블록 스코프 (block scope)
const z; // 블록 스코프 (block scope)