자바스크립트 개발자라면 알아야하는 핵심컨셉(1) - callstack, Primitive Type , Value Types Reference Types, Type Coercion, Typeof

1) 콜스택

자바스크립트가 함수 실행을 핸들링하는 방법 중 하나.

function three() {
	console.log('hello')
}
function two() {
	three();
}
function one() {
	two();
}
function zero() {
	one();
}
zero();

자바스크립트가 함수코드를 실행하면, zero 부터 하나씩 차곡차곡 쌓는다

콜스택에 쌓이는 순서는 

zero one two three 쌓인다. 

결국 hello가 출력되겠지만, 어느시점에 출력하느냐 이다.

function three() {
	console.log('hello')
}
function two() {
	three();
}
function one() {
	two();
}
function zero() {
	one();
	console.log('안녕');
}
zero();

콜스택을 알고 있다면 위코드 결과는 

zero가 먼저 호출되고 나면, hello 안녕 이렇게 출력될 것이다.

 

2) Primitive Type

string, number, boolean, undefined, null, symbol 등으로 나누어져있다.

문자, 숫자(정수, 소수 등) , 참거짓값

undefined와 null의 차이는

undefined는 정의 하지 않음.

null은 존재하지 않음.

NaN은 not a number 수학공식에서 망한경우가 나오는 경우가 많음.

 

3) Value Types Reference Types

 

값을 복사

let a = 50;
let b = a; 

a = 10;

console.log(b);

위코드에서는 b는 10이 출력되지 않고, 50이 출력이 됨.

 

레퍼런싱

하지만, 

const sexy = ["kimchi", "potato"];
const pretty = sexy;

sexy.push("Hello");
pretty.push("lalala);

console.log(pretty);

배열은 둥둥 떠있고, 이걸 가르키고 있는것이다.

이 둥둥 떠있는 배열을 sexy, pretty 동시에 가르키고 있다.

그래서 sexy와 pretty가 가르키고 있는 배열은

kimchi potato hello lalala를 다 가지고 있다.

 

console.log([10]===[10]);

서로 각기 다른 메모리에 있기때문에 같지 않다.

 

const x = {
	a: 'hello'
}

const b = x;

b.a = 'lalala'

console.log(x);

x를 b를통해서 업데이트가 가능해짐.

 

 

4. Type Coercion

타입 형변에

console.log(4 + 'hello');
console.log(4 + 4 + 'hello');
console.log("" == true);
console.log(1 == true);
console.log(66 + true);

4hello

8hello

false

true

66 + true에서 보면 true는 1이 되서 67이됨.

 

5. Typeof

instance of 는  primitice에서는 작동하지않음.

object array에서는 작동함 그래서 array인지 object인지 구분할 수 있음

 

string number boolean function undefined 를 구분하기위해서는 typeof

 

** typeof null 은 object 이다