자바스크립트에서 값은 항상 특정한 자료형에 속한다
JavaScript는 type이 매우 유연한 언어이다.
그래서 자바스크립트 엔진이 필요에 따라
"암시적 형변환"을,
혹은, 개발자의 의도에 따라
"명시적 형변환"을 할 수 있다.
근데 형변환이 뭔지 알아보기 전에
형변환이 변환하는 대상이 무엇인지,
그 대상의 종류는 어떤 것이 있는지 부터 알아볼거임
자바스크립트에는 여덟가지 자료형이 있다
사실 이 글 쓰기 전까지 여덟개나 있는 줄 몰랐음
자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있음
즉, 한 변수가 문자열이었다가, 숫자였다가 할 수 있음
그래서 typeof를 통해 확인할 수 있는 자료형들을 알아보겠음
typeof undefined //"undefined"
typeof 123 //"number"
typeof 10n //"bigint"
typeof true //"boolean"
typeof "sungho" //"string"
typeof Symbol("id") //"symbol"
typeof Math //"object"
typeof null //"object"
typeof alert //"function"근데 맨 밑에 3개는 좀 설명이 필요함
Math는 수학 연산을 제공하는 내장 객체라서 object를 반환하고,
typeof null은 object가 아니지만, 하위 호환성을 유지하기 위해서 오류 수정 안하고 남겨두었다고 함
마지막으로, typeof의 피연산자가 함수면, function을 반환하는데,
"함수형"은 없음 이것도 하위 호환성 유지때문이라고 함
1. 숫자형 & BigInt
숫자형
let n = 1234;
n = 12.345;숫자형 자료는 사칙연산을 비롯한 다양한 계산이 가능함
그리고 일반적인 숫자 외에
Infinity,
-Infinity,
NaN
같은 '특수 숫자값'을 포함하고 있다.
console.log(1 / 0);아무 숫자나 0으로 나누면 무한대가 나옴
alert(Infinity);이렇게 Infinity를 직접 참조할 수도 있음
NaN은 계산 중에 에러가 발생했다고 알려주는 값인데,
부정확하거나 정의되지 않은 연산을 이용하면 만날 수 있다.
alert("문자열임" / 2);BigInt
BigInt는 말 그대로 "큰 수"임
근데 크다의 개념은 상대적으니까, 얼마나 큰지를 살펴보면
(253 - 1)보다 크거나,
-(253 - 1)보다 작은 정수는
"숫자형"으로 나타낼 수 없음
그래서 BigInt형을 이용하는데, 생각보다 간단하다
리터럴 끝에 n을 붙이면 만들 수 있음
const veryBigInt = 12345678901234567890n;2. 문자열
자바스크립트에서는 문자열(String)을 따옴표로 묶어주는데,
따옴표의 종류는 세 종류가 있음
- 큰 따옴표: ""
- 작은 따옴표: ''
- 백틱: ``
큰 따옴표랑 작은 따옴표는 쓰임새에 큰 차이는 없다.
근데 백틱은 변수나 표현식을 감싸서 원하는 문자열 중간에 손쉽게 넣을 수 있음
let name = "sungho";
console.log(`Hello, ${name}!`); // Hello sungho!
console.log(`1+2 is ${1 + 2}`) // 1+2 is 33. 불리언
이건 논리타입으로, true, false 두 개밖에 없는 자료형임
긍정, 부정으로 나타낼 수 있는 상태값 등을 표현할 때 쓰인다.
비교 결과를 저장할 때도 사용할 수 있음
let isBigger = 4 > 1;
console.log(isBigger); // true (4가 1보다 크니까 true를 반환)4. null & undefined
null이랑 undefined는 둘 다 '빈 값', '없는 값'을 나타내는 것처럼 보이는데
사실 차이가 있음
공통점
둘 다 고유한 타입을 갖고 있음
즉, null의 타입은 null, undefined의 타입은 undefined임
null
- null은 "비어있는, 존재하지 않는 값"을 의미한다.
- 자바스크립트는 대소문자를 구분하므로, Null, NULL 등과 다르다
- 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미임
- 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미함.
자바스크립트 엔진은 그 누구도 참조하지 않은 메모리 공간에 대해서
가비지 컬렉션을 수행함 - 근데 또 typeof 함수로 자료형을 확인해보면 null은 object임.
빈 참조를 나타내는 데 자주 사용되기 때문임 - 함수가 유효하지 못한 값을 반환할 때 명시적으로 null을 반환하기도 함
const element = document.querySelector(".없는클래스명");
// HTML에 없는 클래스명을 불러오고자 한다면, null을 만난다
console.log(element) // nullundefined
- undefined는 "아무 값도 할당받지 않은 상태"
- var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화 된다
(무슨 말인지 궁금하면 클릭 ㄱㄱ) - 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이루어질 때까지 빈 상태로 냅두지 않고, 자바스크립트 엔진이 undefined로 초기화함
- 즉, 변수 선언하고 값을 할당하지 않으면, undefined가 반환된다
var a;
console.log(a); // undefined
console.loga(typeof a); // undefined요로코롬 개발자가 의도적으로 할당하기 위한 값이 아니라
자바스크립트 엔진이 변수를 초기화할 때 사용하는 값임
그니까 변수에 값이 없다고 명시하고 싶으면 null 할당하면 됨
5. object & symbol
object
object(객체)는 다른 원시형(primary type)과 달리 다양한 데이터를 담을 수 있음
중괄호 {...}를 이용해 만들 수 있으며,
"Key: Value" 쌍으로 구성된 property를 여러 개 넣을 수 있는데,
Key에는 문자형, (그리고 symbol형)
Value에는 모든 자료형이 허용된다.
이렇게 만들 수 있음
let user = new Object(); // '객체 생성자' 문법
let user = {}; // '객체 리터럴' 문법그리고, 이런 식으로 데이터를 넣을 수 있음
let user = {
name: "sungho", // Key: "name", Value: "Sungho"
age: 27 // Key: "age", Value: 27
}데이터를 넣었으니까 꺼낼수도 있어야 함
우리가 위에서 선언한 객체 user에는
두 개의 property가 있는데,
각각 "name"과 "age"라는 이름표를 달아서 넣어두었음
그래서 우리는 그 이름표를 통해서 쉽게 꺼내쓸 수 있음
(냉장고에 견출지 붙인 락앤락 통 생각하면 쉬울듯)
alert(user.name) // sungho
alert(user.age) // 27아 그리고
Value에는 아무 자료형이나 넣을 수 있다고 했으니,
object안에 object도 들어갈 듯
symbol
symbol형은 객체의 고유한 식별자를 만들 때 사용된다.
그니까 객체(object)의 key를 유일한 식별자로 만들 수 있음
let id1 = Symbol("id");
let id2 = Symbol("id");
console.log(id1 == id2); // false똑같이 Symbol("id")를 할당했는데,
둘이 다르다고 나옴
