[코드잇 - 모던 자바스크립트] 02. 자바스크립트의 동작 원리

01. 데이터 타입의 특징과 종류 

- 자바스크립트는 데이터 타입이 상황에 따라 변할 수 있다 (유연한 데이터 타입)

- 곱셈의 경우에는 연산 대상을 모두 숫자 형으로 형 변환을 한 다음 연산을 수행함 

- 기본형(Primitive Type) 

  : Number, String, Boolean, Null, Undefined,

    Symbol(ES2015, 유일한 값을 만들 때), BigInt(ES2010, 엄청 큰 숫자를 다룰 때) 

- 참조형(Reference Type)

 : Object

---

02. Symbol과 BigInt

Symbol

: 코드 내에서 유일한 값을 가진 변수 이름을 만들 때 사용하는데요.

const user = Symbol();

- 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) 

- 2**53 - 1은 구체적으로 9007199254740991이라는 숫자로 약 9,000조 정도의 숫자

- 자바스크립트에서 이 숫자 범위를 초과하는 정숫값을 사용하려고 하면 연산에 미세한 오류가 발생

 ( 예를 들면, 9007199254740991 + 1과 9007199254740991 + 2를 비교하면 true라는 결과가 리턴. 실제로 콘솔에 9007199254740991 + 2과 심지어 9007199254740993을 출력해봐도 9007199254740993이 아니라 9007199254740992가 출력)

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

- 이 숫자 범위는 JavaScript가 IEEE 754에 기술된 배정밀도 부동소수점 형식 숫자체계를 사용하기 때문

- 암호 관련 작업이나 계산기 관련 작업을 할 때, 아주 큰 숫자를 다루거나 혹은 굉장히 정확한 연산이 필요한 상황에서 BigInt 사용

- BigInt 타입의 값은 일반 정수 마지막에 알파벳 n을 붙이거나 BinInt라는 함수를 사용하면 되는데요.

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

- BigInt 타입을 사용하면 2**53 - 1 보다 큰 정숫값도 안전하게 표현할 수가 있습니다.

- BigInt 타입은 소수 표현에는 사용할 수 x

1.5n; // SyntaxError

- 소수 형태의 결과가 리턴되는 연산은 소수점 아랫부분은 버려지고 정수 형태로 리턴됩니다.

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

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

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

- 큰 범위의 정수를 안전하게 사용할 수 있다는 장점이 있지만, 이런 제한사항들 때문에 실제로 BigInt 타입의 값을 활용할 상황들이 많지 않음

---

03. typeof 연산자

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로 매칭되지 않는다는 점

 

null이 object라고?

- typeof null을 하면 문자열 null이 리턴되는 게 아니라 문자열 object가 리턴

typeof null; // object

- 자바스크립트가 처음 구현될 때의 특별한 문법 설계 때문

- 나중에 ECMAScript에서 수정이 제안되었었지만, 이미 개발된 많은 프로젝트에 버그가 생기는 우려로 인해 반영되지 않고 있음

 

function?

- 함수에 typeof 연산자를 사용하면 function이라는 값을 리턴

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

typeof sayHi; // function

- 자바스크립트에서 함수는 객체로 취급

---

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

- false로 평가되는 값 =  falsy 값 ( 그 외는 모두 ture로 평가 = truthy 값)

 : false, null, undefined, NaN, 0, ''

---

07. AND와 OR의 연산방식

- 자바스크립트에서 AND와 OR의 연산자는 무조건 불린 값을 리턴하는 것이 아니라, 왼쪽 피연산자의 값의 유형에 따라 두 연산자 중 하나를 리턴하는 방식으로 동작 

- AND 연산자는 왼쪽 피연산자가 falsy 값일 때 왼쪽 피연산자를, 왼쪽 피연산자가 truety값일 때 오른쪽 피연산자를 리턴 

- OR 연산자는 왼쪽 피연산자가  falsy값일 때 오른쪽 피연산자를, 왼쪽 피연산자가 truthy일 때 왼쪽 피연산자를 리턴

console.log('String' && 123); // 123
console.log({} || []); // {}
console.log(0 && false); // 0
console.log(null || undefined); // undefined
console.log(NaN && 'Codeit'); // NaN
console.log('' || true); // true
console.log('JavaScript' && null); // null
console.log(3000 || undefined); // 3000

console.log('codeit' && undefined && null); // undefined
console.log('codeit' || false || null); // codeit
console.log('codeit' && 123 || null); // 123
console.log('codeit' || 123 && true); // codeit

---

08. AND와 OR 연산자의 연산 우선순위 

AND 와 OR 연산자의 연산 우선순위

function checkAnswer(value) {
  if (value < 10 && value > 0 && value !== 3) {
    return '정답입니다!';
  } 

  return '틀렸습니다!';
}

console.log(checkAnswer(4)); // 정답입니다!

- 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

- 다양한 연산자들을 복합적으로 사용해야 한다면 소괄호를 활용해서 의도에 맞는 연산 우선순위를 명확하게 표기하는 것이 좋은 습관

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

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

---

10. null 병합 연산자 ??

null 병합 연산자 ??

- ES2020에서 새롭게 추가

- 'Nullish coalescing operator' 

- 물음표 두 개(??)를 사용해서 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

OR 연산자(||)와 비교

- 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

---

11. 변수와 스코프

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

- var의 부족함을 채우기위해 ES2015에서 새롭게 등장한 let과 const

- var 변수의 특징

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

-  let과 const의 특징

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

- const 키워드는 let 키워드와 다르게 값을 재할당할 수 없음

- ES2015 이후부터는 var보다 let과 const 키워드 사용이 권장됨