자바스크립트 필수 개념(1)

1. 콜스택 (Call Stack)

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

스택과 같은 것

함수를 위에서부터 차례로 실행하고 실행이 완료된 함수는 목록에서 제거된다.

0 -> 1 -> 2 -> 3 -> 로그 출력 -> 3 -> 2 -> 1 -> 0

0부터 차례로 스택이 쌓이고 로그를 출력한다음에 다시 3부터 차례대로 완료 함수를 제거

3번에 로그 출력과 에러 메시지를 넣어두면 3번에서 로그를 출력하고 에러 메시지를 보내면서

에러 전에 있던 콜스택을 모두 출력해준다 (0, 1, 2, 3을 출력)

알아두면 언젠가는 도움이 될 컨셉

최종 정리

리스트가 존재하고 함수는 리스트에 추가된다. 실행이 완료되면 함수는 리스트에서 제거된다.

자바스크립트의 to do list 인 것이다.

ps.

스택이 붕괴될 때 에러가 나는 현상이 있다.

서로 불러대는 함수를 작성했을 경우

hello함수에서 bye를 부르고 bye함수에서 hello를 부르는 경우

이런 함수를 작성 시 '맥시멈 콜스택 사이즈를 초과했다'라는 메시지가 뜬다.

자바스크립트 스택에는 올릴 수 있는 제한이 있기 때문에 이런 에러가 뜬다.

 

 

2. Primitive Type

String, number, true-false, undefined, null, NaN

원시적인, 기초적인 타입이라는 뜻이다.

 "hello "Java Script"" 이런 식으로 작성하면 안쪽에 있는 Java Script를 함수로 인식을 하게 된다.

이런 경우에는 "hello \"Java Script\""로 작성해주면 된다.

 Undefined '정의가 되지 않음' Null '존재하지 않음으로 정의가 됨'

Not A Number = 수학공식이 망했다.(잘못됐다)

ex) Math.pow(5, "hello") hello x 5라는 공식은 없으므로 NaN이 뜬다.

typeof ~~~를 쓰면 타입을 알아낼 수 있다.

ex) typeof true -> boolean

 

 

3. Value VS Reference

간단하게 설명하면 value는 값을 복사, 붙여 넣기 한 것이고 reference는 실시간 참조라고 볼 수 있다.

let a = 30;
let b = a;		//b에는 a의 초기값인 30이 들어가있다.

a = 50;			//b에 값이 들어간 후 a의 값이 바뀐것이므로 b에는 영향을 받지 않는다.
			//이런 경우를 value라고 한다.

console.log(b);

위에는 값을 복사하는 value

const drink = ["coffee", "beer"];
const water = drink;		//water에는 drink가 들어간다.
				//여기서 water를 출력하면 coffee와 beer밖에 안나온다.
drink.push("soju");		//drink에 soju가 추가된다.

console.log(water);		//water는 drink를 참조하기 때문에 ["coffee", "beer", "soju"]가 출력된다.

water를 바꾸지 않았고 drink를 업데이트했기 때문에 water가 변경된 것

console.log([10] === [10])을 했을 경우 false가 뜨는 이유는 [10]과 [10]이 각각의 메모리에 위치한 서로 다른 오브젝트이기 때문이다.

value는 string, number, boolean, NaN, undefined, null에서 사용 가능하고

reference는 array, object, function에서 사용될 수 있다.

 

 

4. Type Coercion

type coercoin = type conversion

conversion는 자바스크립트가 값을 강제적으로 변환시킨다는 뜻이다.

console.log(66 + true) -> 67이 나오는 것은 true를 1로 자동 변환시켜서 더해줬기 때문이다.

false를 더 할 경우 false는 0이므로 66으로 나온다.

console.log(66 + "true") -> 66true가 나온다.

오직 더하기에서만 이렇게 되는데 이것을 loaded operator라고 한다.

왼쪽에서 오른쪽으로 진행되므로  10 + "true" + 65일 경우는 10true65로 출력

65 - "1"을 할 경우에는 1을 자동으로 숫자로 변환해주므로 64가 출력

console.log("" == true)는 false가 뜨는 이유는 빈 string 값은 거짓이기 때문이다.

null, undefined, NaN은 거짓이다. ""은 0바이트이고 0은 false이기 때문에 거짓으로 변환된다.

===로 사용하게 되면 type coercion이 일어나지 않는다.

console.log("true" == true)는 fasle인 이유는

true는 숫자로 변환되어 1로 되지만  "true"는 숫자로 변환되지 않고 NaN이 되기 때문에 false가 뜬다.

 

 

5. TypeOf

자바스크립트는 항상 type을 확인해야 한다.

사용하는 방법은 console.log(typeof "11212") -> string 이런 식으로 사용한다.

여기에는 큰 버그가 하나 있는데

console.log(typeof null)을 적을 경우 object로 나온다.

버그인걸 알고 있지만 수정하면 다른 곳에 영향을 받게 되어서 고치지 않는 버그라고 한다.

Array인지 object인지 확인하고 싶을 때는 typeof 대신에 instance of를 사용한다.

거의 비슷하지만 유일한 차이점은 instance of는 primitive(string, number 등)에서는 작동하지 않는다.

Array와 object에서는 작동한다.

console.log([] instanceof Array)로 사용하면 확인할 수 있다.

typeof null은 object라는 것을 기억해두는 것은 좋다.