IT 기록

05.Typeof

자료형의 타입을 반환해주는 typeof

1

"1"

true

undefined

Function a 의 타입이 궁금한 경우  typeof를 사용해서 구하면 된다. 

typeof 1; 혹은 

typeof(1); 표기 법 둘다 가능. 

typeof 1  > number

typeof "1" > string

typeof true > boolean

typeof undefined > undefined

typeof a > function

그러나, Array나 Object의 경우 instanceof를 사용해서 확인해야 한다. 

[] instanceof Array

{} instanceof Object

그러면 Null의 type은 ?

typeof Null 에 대한 결과는 Object가 나온다. 

버그라고 하지만, 해당 버그를 수정하진 못한다고 한다. 

수정하게 되면 다른 여러 곳에서 버그(사이드 이펙)들이 발생하기 때문에, 그냥 써야한다고.. 자바스크립트 개발자 피셜

04.Type conversion

console.log(1 == true);			// true
console.log(NaN == true);		// false
console.log(undefined == true);	// false
console.log(null == true);		// false
console.log("" == true);		// false (빈 string은 제로바이트. 0으로 변환된다.)


console.log(55 + true);			// 56 (true는 1로 변환된다.)
console.log(55 + "true");		// "55true" (숫자에 문자열을 더하면 문자열이 된다.)
console.log(10 + 55 + "true");	// "65true" (왼쪽부터 계산이 이루어지므로 더하기 이후 형변환.)


// '=='는 형변환이 일어나지만, '==='는 형변환이 일어나지 않는다. 

console.log("1" == 1);		// true
console.log("1" === 1);		// false

console.log("1" == true);	// true ( boolean은 ==을 만나면 숫자값으로 형변환.)
console.log("1" == 1);		// true ( "1" 은 1로 형변환.)
console.log("true" == 1);	// false ("true"는 숫자 1로 형변환이 될수 없음.)
parseInt("true");			// NaN
parseInt(true);			// parseInt에는 형변환 기능 없음 단순히 숫자로 변환하는 작업만을 함.
parseInt("123");		// 123

Boolean은 '=='을 만나면 형변환이 일어난다. 

'=='는 형변환을 유발하며, '==='는 형변환을 유발하지 않는다.

따라서 '==' 보다는 '==='이것을 쓰는 것이 안전하다. 

03.Value Types and Reference Types

a에 50을 부여하고, b에 a를 부여한 후에 a에 다시 10을 부여하면 b의 값은 어떻게 될까.

위와 같이 b는 여전히 50이다. 

let b = a; 

b에 a를 부여하는 시점에 a가 가지고 있는 값(value)이 복붙되기 때문이다. 

그렇다면 Reference에 대해 알아보자. 

aaa에 배열을 만들어 "one"과 "two"를 넣고

bbb에 aaa를 부여한 후, aaa에 "three" 값을 push시켜 보았다. 

bbb를 출력하면,  ["one", "two", "three"]가 출력된다.

bbb에 aaa를 부여하는 시점에 aaa의 값(value)이 복사되었다면 "one"과 "two"만 출렸되었을 것이다. 

이러한 경우 값에대한 복사가 아니며

aaa 가 배열을 참조하고 있으며, bbb도 aaa가 참조하고 있는 값을 동일하게 참조하고 있는 것이다.

value는 string, number, boolean, NaN, undefined, null만 가능하고,

Reference는 array, obejct, function에서 사용 될 수 있다.

02.Primitive Type

기초 자료형 타입을 말한다.

원시타입으로 

String, Number(정수, 소숫점), Boolean, NaN, undefined, null

-String은 따옴표로 시작하면 따옴표로 끝나야 하고, 쌍따옴표로 시작하면 쌍따옴표로 끝나야 한다. 

예 : let str1 = 'baaaam', 혹은 let str2 = "baaaaaaaaaam";

-Number는 숫자이다. 만약, 숫자가 따옴표에 의해 둘러 쌓여진다면 String으로 인식되니 주의해야 한다. 

-Boolean은 true or false.

- NaN은 Not a Number의 약자이다.

예를들어 

소수를 정수로 바꿔주는 Math.floor함수에 숫자가 아닌 문자가 들어가게 된다면,

NaN을 리턴하게 된다. 

- undefined와 null에 대해서. 

undefined는 '정의되지 않음' 의 의미이며, null은 '존재하지 않음'의 의미이다.

둘은 엄연히 다르다.

변수 baaaam을 선언만 하고 아무것도 정의하지 않는다면, baaaam을 호출했을 때 undefined가 반환된다. 

undefined인 변수 baaaam에 null을 부여하면,

baaaam은 null 값을 갖게 되는 것이다. 

undifined와 null이 여전히 헷갈린다면 null은 '존재하지 않음'을 의미 하는 "값"이 라고 봐도 무방하다. 

01.Call Stack 

자바스크립트에서 호출 시, 호출 순서가 내부적으로 어떻게 동작하느냐에 대한 것이다.

예를 들어  Function1, 2, 3 이 있는데, Function 1에서 2를 부르고 2에서는 3을 부른다면

그 동작에 대한 처리 순서는 1 > 2 > 3을 순서대로 호출할 것이다. 

function three(){
	console.log('Baaam~');
}

function two(){
	three();
}

function one(){
	two();
}

one();

실행순서는 anonymous Function에 의해 one()이 제일 먼저 호출 될 것이다. 

그런다음 one에선 two를 호출하고, two에선 three가 호출될 것이다. 그 다음 로그가 출력되고, 

다시 three > two > one 순서로 더 이상 수행할 라인이 없으면, 위 소스의 실행 로직은 종료가 된다. 

Stack은 '쌓다'라는 의미를 가지고 있고, 후입선출(Last in First out) 의 자료구조다.

Javascript에서 특정 작업을 호출할 때, 해야 할 일을 마치 Stack에 쌓는 것과 마찬가지로 동작한다는 것이다. 

하지만, 이러한 콜스택이 붕괴되는 경우도 있다.

서로다른 두개의 Function이 각자 다른 하나를 호출하도록 실행해보면,

위와 같이 Maximum call stack size exceede로인한 에러가 발생한다. 

자바스크립트의 스택에 올릴 수 있는 사이즈에 제한이 있다는 것이다. 

자바스크립트의 Maximum call stack 사이즈는 아래 URL에서 확인할 수 있다. 

브라우저 마다 다르며 브라우저의 버전마다 상이하다. 

https://stackoverflow.com/questions/7826992/browser-javascript-stack-size-limit

github에 있는 33-js-concepts 프로젝트를 알게되어 다시 공부하는 마음으로 따라가며 공부해보려 한다.

github URL: https://github.com/leonardomso/33-js-concepts

33개 Concepts의 목차는 아래와 같다.