JavaScript 1. 핵심 컨셉(1)

1. call stack

1. 자바스크립트에서는 함수가 호출되면 빈 스택 프레임이 생성된다.
2. 호출된 함수 안에 다른 함수가 있다면 그 함수를 호출하고 처음 함수는 스택으로 push
3. 마지막 함수까지 호출되었으면 함수를 실행하고, 스택에서는 그 함수를 pop
4. 모든 함수를 pop 했으면 스택은 메모리에서 삭제된다.

function three(){
  console.log("i love js");
  throw Error("this is an error");
}
function two(){
  three();
}
function one(){
  two();
}
function zero(){
  one();
}
zero();

위 코드를 예로 들면 스택에 밑에서부터 zero()-one()-two()-three() 순서대로 쌓이고 three()가 실행되면서 console.log, Error()가 실행된 후 위에서부터(LIFO) 함수가 pop된다.

• 함수가 서로를 호출해서 무한 콜백이 발생할 경우 구글 크롬에서는 스택이 일정 숫자를 넘어가면 호출을 중지한다.

2. Primitive Types(Null, Undefined, NaN 비교)

• Null: 존재하지 않는다고 정의됨
• Undefined: 정의되지 않음
• NaN: Not A Number. 숫자를 문자와 연산했을 때 등과 같이 연산이 불가능할 때 나타남

3. Value vs Reference

• Primitive types의 Value는 값 그 자체로써 한 변수에 할당된 value가 다른 변수에 할당되면 그 값이 복사되는 것이다.
• Objects(배열, 객체, 함수 등)은 Reference로써, 생성될 때 메모리에 생성이 되고, 변수에 할당되는 것은 object 자체가 아니라 object가 위치한 주소값이 reference로 할당되는 것이다.

4. Type Coercion

• 자바스크립트는 표현식을 평가할 때 문맥에 맞지 않는 타입이 존재한다면, 이를 강제적(암묵적)으로 타입 변환한다.
• 같은가를 표기하는 ==의 경우 타입이 달라도 타입 변환된 값이 같으면 true를 리턴하므로 사용에 주의가 필요하다. 되도록이면 ===을 사용하는 것이 바람직하다.

  이하 코드 예제의 출처는 https://poiemaweb.com/js-type-coercion

4.1 + 연산자

• +연산자는 피연산자 중 하나 이상이 문자열이라면 문자열 연결 연산자로 동작한다.

  // 숫자 타입
  0 + ''              // "0"
  -0 + ''             // "0"
  1 + ''              // "1"
  -1 + ''             // "-1"
  NaN + ''            // "NaN"
  Infinity + ''       // "Infinity"
  -Infinity + ''      // "-Infinity"
  // 불리언 타입
  true + ''           // "true"
  false + ''          // "false"
  // null 타입
  null + ''           // "null"
  // undefined 타입
  undefined + ''      // "undefined"
  // 심볼 타입
  (Symbol()) + ''     // TypeError: Cannot convert a Symbol value to a string
  // 객체 타입
  ({}) + ''           // "[object Object]"
  Math + ''           // "[object Math]"
  [] + ''             // ""
  [10, 20] + ''       // "10,20"
  (function(){}) + '' // "function(){}"
  Array + ''          // "function Array() { [native code] }"
  ``

4.2 숫자타입으로의 변환

• +를 제외한 산술연산자는 피연산자 중 숫자 타입이 아닌 피연산자를 숫자 타입으로 타입 변환한다. 이 때 피연산자를 숫자 타입으로 변환할 수 없을 경우 NaN을 반환한다. +연산자는 숫자 타입이 아닌 피연산자가 하나만 존재할 때는 숫자 타입으로 타입 변환한다.

// 문자열 타입
+''             // 0
+'0'            // 0
+'1'            // 1
+'string'       // NaN
// 불리언 타입
+true           // 1
+false          // 0
// null 타입
+null           // 0
// undefined 타입
+undefined      // NaN
// 심볼 타입
+Symbol()       // TypeError: Cannot convert a Symbol value to a number
// 객체 타입
+{}             // NaN
+[]             // 0
+[10, 20]       // NaN
+(function(){}) // NaN

4.3 불리언 타입으로의 변환

• 제어문의 조건식에서 불리언 값이 아닌 조건식이 들어오면 참으로 인식할 값(truthy)과 거짓으로 인식할 값(falsy)로 나누어 변환한다.
  false로 변환되는 값들은 다음과 같다.
  • false
    undefined
    null
    0, -0
    NaN
    ’’ (빈문자열)

위 값 외에는 모두 true로 변환된다.

5. Typeof

• typeof 연산자는 null을 object로 표시하거나 [](빈 배열)을 object로 표시하는 등의 버그가 존재한다.
• 배열의 경우 instanceof 연산자를 통해 해결할 수 있지만 primitive type의 경우 instanceof 연산자를 사용할 수 없기 때문에 주의하면서 typeof를 사용해야 한다.