• symbol, bigint 형태는 다루지 않습니다.

1. 자료형 종류

data type의 종류와 대표적인 예시를 확인해보자

string

"string", "1234", "0a2c4e", "NaN", "undefined", String(123)

number

123, 123+456, Number("123")

boolean

true, false, Boolean(0), Boolean(undefined), Boolean(NaN), Boolean("string"), 1==2, 1!==1

undefined

undefined, [][0]

object

Object({"key1" : value1, ...}), {}, {"key1" : value1, ...}, [], [value1, value2, ...]
// array타입은 없다, object타입 내에 포괄된다.                    

function

function(){}

2. string

typeof 키워드를 통해 살펴보는 string type data 예시

어떤 데이터가 string으로 분류되는지를 typeof 키워드를 통해 알아보자.

typeof "string" // "string"
typeof "3" // "string"
typeof "" // "string" 

typeof ( "3" + 3 ) // "string"
typeof "3" + 3 // "string3"

string type data는 어떻게 처리될까?

다양한 상황에서 어떠한 출력값이 반환되는지 확인해보자.

• 2 + 3 * 2는 무엇일까? 곱셈과 나눗셈은 마치 앞 뒤에 소괄호를 붙인 것처럼 우선적으로 연산된다.

덧셈
"string" + 3 + 3 // "string33"
// 수식 내 문자가 발견되면 모든 자료형이 문자형으로 변형되여 합계산됨
3 + 3 + "string" // "6string"
// 수식 내 문자가 발견되기 전까지 숫자의 연속적인 덧셈은 합연산됨
"string" + (3 + 3) // "string9"
// 수식 내 숫자의 연속적인 덧셈의 합연산은 소괄호를 통해 가능함 
3 + "string" + 3 // "3string3"
"3" + 4 // "34"
"3" + 4 + 4 //"344"

뺄셈
"string" + 3 - 3 // NaN
"string" + (3 - 3) // "string0"

곱셈
"string" + 3 * 3 // "string9"
"string" + 3 ** 3 // "string27"

나눗셈
"string" + 3 / 3 // "string1"

• 문자열은 각 character을 요소로 갖는다, 따라서 인덱싱하면 해당 위치의 문자가 반환된다.

"string"[0] // "s"

3. number

typeof 키워드를 통해 살펴보는 number type data 예시

어떤 데이터가 number로 분류되는지를 typeof 키워드를 통해 알아보자.

typeof 4 // "number"
typeof 4 + "4" // "number4"
typeof 4 + Number("4") // "number4"

• NaN은 number type으로 분류된다.

typeof NaN // "number"  *typeof는 NaN와 숫자를 구분하지 못한다! 이를 구분하기 위해 isNaN()함수가 제공되고있다.

number type data는 어떻게 처리될까?

다양한 상황에서 어떠한 출력값이 반환되는지 확인해보자.

• 빈 것, 내용이 없는 것은 undefined 와는 다르다

[].length // 0
"".length // 0

• Number()함수를 통해 문자도 숫자로 형변환이 가능하다.

123 + Number("100") // 223

• null, undefined의 경우 숫자형 변환시 각각 0, NaN이 된다.

Number(null) // 0
Number(undefined) // NaN
Number(NaN) // NaN

• 숫자문맥, 문자문맥에 따른 null, undefined, NaN 처리

//null
null + 1 // 1
1 + null + 2 // 3
null + "1" // "null1"
//undefined
undefined + 1 // NaN
undefined + "1" // "undefined1"
//NaN
NaN +1 // NaN
NaN + "1" // "NaN1"

• 기타 출력 예시 (source : MDN)

Number('123')     // 123
Number('12.3')    // 12.3
Number('123e-1')  // 12.3
Number('')        // 0
Number('0x11')    // 17
Number('0b11')    // 3
Number('0o11')    // 9
Number('foo')     // NaN
Number('100a')    // NaN

4. boolean

typeof 키워드를 통해 살펴보는 boolean type data 예시

어떤 데이터가 boolean로 분류되는지를 typeof 키워드를 통해 알아보자.

typeof true  // "boolean"
typeof ( 3 > 4 ) // "boolean"
typeof 3 > 4 // false *비교연산자를 사용할 때는 소괄호로 묶어줘야 한다.
typeof Boolean("string")  // "boolean"

boolean type data는 어떻게 처리될까?

다양한 상황에서 어떠한 출력값이 반환되는지 확인해보자.

• Boolean() 함수를 통해 데이터의 boolean value를 확인할 수 있다.

Boolean(1) // true
Boolean(0) // false * 0은 false를 반환, 0이외의 수는 true를 반환함 
Boolean(-1) // true
Boolean("") // false * 빈 문자열의 boolean value는 false이다.
Boolean(NaN) // false
Boolean(undefined) // false
Boolean(null) // false

5. undefined

typeof 키워드를 통해 살펴보는 undefined type 예시

어떤 데이터가 undefined로 분류되는지를 typeof 키워드를 통해 알아보자.

let temp; typeof temp // "undefined"
let arr = []; typeof arr[0] // "undefined"

6. object & function

typeof 키워드를 통해 살펴보는 object type 예시

어떤 데이터가 object로 분류되는지를 typeof 키워드를 통해 알아보자.

typeof {} // "object"

• array는 object type으로 분류된다

typeof [] // "object"

• null은 object type으로 분류된다

typeof null // "object"
typeof NaN // "object"

typeof 키워드를 통해 살펴보는 function type 예시

typeof function(){} // "function"

• 정의된 함수는 함수명만 적어야 function type이다. function()은 함수 내 리턴 값의 출력을 의미한다

typeof Number // "function"
typeof Number() // "number"