모던 자바스크립트 이해하기

모던 자바스크립트란?

• ECMAScript: 자바스크립트 표준 명세서 (JavaScript Specification)
  • JavaScript가 갖추어야 할 내용을 정리해둔 '설명서'임
  • ECMAScript는 JavaScript 뿐만아니라 모든 스크립트 언어(scripting languages)가 지켜야 하는 표준임
  • DOM(Document Object Model)을 다루는 문법들은 ECMAScript에 표준화된 문법이 아니라 WebIDL에서 표준화된 기술임
  • ECMA-International 공식 ECMA-262문서
• 모던 자바스크립트: 현 시점에서 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트
• 문법 검색으로 확인하는 호환성 테이블

자바스크립트의 동작 원리

데이터 타입의 특징과 종류

• 자바스크립트는 다른 언어들에 비해 데이터 타입이 유연함 (유연함 - 상황에 따라 변할 수 있음)

• 총 8가지의 데이터 타입이 있으나 새로 만들어진 2가지는 아직 많이 사용되지 않음
  

• 심볼은 코드 내에서 유일한 값을 가진 변수 이름을 만들 때 사용함

  • Symbol이라는 함수를 통해서 심볼 값을 만들어 낼 수 있음
    `const user = Symbol();
  • 괄호 안에 심볼에 대한 설명을 붙일 수도 있음
    const user = Symbol('this is a user');
  • Symbol 값을 담게 된 user라는 이름의 변수는 다른 어떤 값과 비교해도 true가 될 수 없는 고유한 변수가 됨

  const user = Symbol('this is a user');
  
  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는 자바스크립트에서 아주 큰 정수(Integer)를 표현하기 위해 등장한 데이터 타입임

  • 자바스크립트에서 안전한 최대 정수는 2**53 - 1, 안전한 최소 정수는 -(2**53 - 1) 인데 이 숫자 범위를 초과하는 정숫값을 사용하려고 하면 연산에 미세한 오류가 발생함

  console.log(9007199254740991 + 1 === 9007199254740991 + 2); // true
  console.log(9007199254740991 + 2); /// 9007199254740992
  console.log(9007199254740993); /// 9007199254740992

  • 숫자 범위는 JavaScript가 IEEE 754에 기술된 배정밀도 부동소수점 형식 숫자체계를 사용하기 때문dla
  • BigInt 타입의 값은 일반 정수 마지막에 알파벳 n을 붙이거나 BinInt라는 함수를 사용하면 됨

  console.log(9007199254740993n); // 9007199254740993n
  console.log(BigInt(9007199254740993)); // 9007199254740993

  • 말 그대로 큰 정수를 표현하기 위한 데이터 타입이기 때문에 소수 표현에는 사용할 수가 없음
    1.5n; // SyntaxError
  • 소수 형태의 결과가 리턴되는 연산은 소수점 아랫부분은 버려지고 정수 형태로 리턴됨

  10n / 6n; // 1n
  5n / 2n; // 2n
  

  • BigInt 타입끼리만 연산할 수 있고, 서로 다른 타입끼리의 연산은 명시적으로 타입 변환을 해야 함

  3n * 2; // TypeError
  3n * 2n; // 6n
  Number(3n) * 2; // 6

typeof 연산자

• 사용하는 값이 어떤 데이터 타입을 가지고 있는지 확인하려면 typeof 연산자를 사용해야 함
• typeof 연산자는 키워드 다음에 공백(띄어쓰기)을 두고 값을 작성해도 되고, 함수를 사용하듯 괄호로 감싸서 사용할 수도 있음

  typeof 'Codeit'; // string
  typeof Symbol(); // symbol
  typeof {}; // object
  typeof []; // object
  typeof true; // boolean
  typeof(false); // boolean
  typeof(123); // number
  typeof(NaN); // number
  typeof(456n); // bigint
  typeof(undefined); // undefined

• typeof 연산자의 결과가 모든 타입과 1:1로 매칭되지 않음
  • typeof null을 하면 문자열 null이 리턴되는 게 아니라 문자열 object가 리턴됨
    typeof null; // object
  • 함수에 typeof 연산자를 사용하면 function이라는 값을 리턴함
    • 자바스크립트에서 함수는 객체로 취급되므로 주의할 것

      function sayHi() {
       console.log('Hi!?');
      }
      typeof sayHi; // function

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

• if, for, while문처럼 불린타입이 필요한 맥락에서는 불린이 아닌 다른 타입의 값들도 불린 타입으로 평가되는 특징이 있음
• 불린이 아닌 타입의 값이 불린 타입으로 형변환 됨
• 불린 함수를 사용했을 때 Falsy 값이면 모두 false를 리턴하고 Falsy 값을 제외한 모두는 true를 리턴함
  
  

AND와 OR의 연산 방식

• 자바스크립트에서 논리 연산자는 상황에 따라서 양쪽 값들 중 어느 한쪽을 선택하는 방식으로 동작함
  • AND 연산자는 왼쪽 값이 Truthy하면 오른쪽 값을 리턴하고 왼쪽 값이 Falsy하면 왼쪽 값을 리턴하는 방식으로 동작함
  • OR 연산자는 왼쪽 값이 Truthy하면 왼쪽 값을 리턴하고 왼쪽 값이 Falsy하면 오른쪽 값을 리턴하는 방식으로 동작함
    
• 활용법
  

AND와 OR의 연산 우선순위

• AND 연산자와 OR 연산자를 섞어서 사용할 때는 연산의 우선순위가 존재함
• AND 와 OR 연산자 사이에서는 AND 연산자의 우선순위가 더 높음
• 소괄호를 활용해서 의도에 맞는 연산 우선순위를 명확하게 표기하는 것이 좋은 습관임

console.log(true || false && false); // true
console.log((true || false) && false); // false

console.log('Codeit' || NaN && false); // Codeit
console.log(('Codeit' || NaN) && false); // false

null 병합 연산자 ?? (Nullish coalescing operator)

• ES2020에서 새롭게 추가됨
• 물음표 두 개??를 사용해서 null 혹은 undefined 값을 가려내는 연산자
• 연산자 왼편의 값이 null 이나 undefined라면 연산자 오른편의 값이 리턴되고, 연산자 왼편의 값이 null 이나 undefined가 아니라면 연산자 왼편의 값이 리턴되는 원리로 동작합

const example1 = null ?? 'I'; // I
const example2 = undefined ?? 'love'; // love
const example3 = 'Codeit' ?? 'JavaScript'; // Codeit

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

• null 병합 연산자??는 왼편의 값이 null이나 undefined인지 확인하고 OR 연산자||는 왼편의 값이 falsy인지를 확인하기 때문에 null이나 undefined가 아닌 falsy 값을 활용할 때 결과가 서로 다름

const title1 = false || 'codeit';
const title2 = false ?? 'codeit';

console.log(title1); // codeit
console.log(title2); // false

const width1 = 0 || 150;
const width2 = 0 ?? 150;

console.log(width1); // 150
console.log(width2); // 0

변수와 스코프

ES2015를 기준으로 let과 const키워드가 등장했고 이들을 사용하는 것을 권장함

• 호이스팅
  • var: 변수 선언 부분이 끌어 올려져서 변수를 만들기도 전에 사용이 가능함
  • let, const: 변수 선언 이전에 접근할 수가 없어서 에러 메세지가 나타남 (ReferenceError 발생)
• 중복 선언
  • var: 중복 선언이 가능함
  • let, const: 중복 선언이 불가능 해서 같은 이름으로 변수를 선언하려 하면 에러 메세지가 나타남 (SyntaxError 발생)
• 변수의 유효범위, 스코프
  • var: 함수 스코프를 가짐 -> 함수 단위로만 구분 돼서 조건문이나 반복문 안의 변수도 전역 변수로 취급됨
  • let, const: 블록 스코프를 가짐 -> 중괄호가 사용되는 부분(코드 블록)을 기준으로 변수의 유효 범위를 구분함

참고 자료

• 코드잇 모던 자바스크립트