자바스크립트의 자료형과 형 변환

자료형

자료형이란 값을 성질에 따라 분류한 것

자바스크립트의 자료형은 Primitive Type(원시 타입)과 Non-Primitive Type(비 원시 타입)으로 나눌 수 있다.

Primitive Type(원시 타입)은 내장형 타입 또는 기본형 타입이라고도 부를 수 있다. 한번에 하나의 값만 가질 수 있고, 하나의 고정된 저장 공간을 이용한다.

let number = 12;

Non-Primitive Type(비 원시 타입)은 한번에 여러 개의 값을 가질 수 있고, 여러 개의 고정되지 않은 동적 공간을 사용한다.

let array = [1,2,3,4];

이번 시간에는 하나의 순간에 한개의 값만 가질 수 있는 Primitive Type(원시 타입)에 대해 알아보도록 하자.

1. 숫자형(Number)

let age = 25; // 정수 
let tall = 175.9; // 실수
let inf = Infinity; // 무한대
let minusInf = -Infinity; // 음의무한대
let nan = NaN; // 연산이 잘못 수행되었을 경우에, 수학적인 연산의 실패의 결과값

console.log(age + tall); // 더하기 > 200.9
console.log(age * tall); // 곱하기 > 4397.5

자바스크립트는 정수,실수 구분없이 숫자라면 다 숫자형으로 분류한다.
숫자형 타입의 값들은 사칙연산 제공한다.
숫자형 타입의 값들 중에는 정수나 실수만 있는게 아니라 Infinity(무한대),-Infinity(음의 무한대),NaN(수학적인 연산의 실패의 결과값)도 포함한다.

2. 문자열(String)

let name = "ju"; // 이름과 같은 문자열 " "로 감싸기
let name2 = '영주'; // ' '로 감싸기도 가능
let name3 = `ju ${name2}`; // ` `로 감싸기도 가능 
//결과값 : ju 영주
console.log(name3); //` `도 똑같이 콘솔 출력 가능

` `사용하는 이유는 `문자열 ${변수}`처럼 변수의 값을 사이에 집어넣을 수 있기 때문이다.
` `안에 &와 {}안에 변수를 담아 문자열로 바꾸는 문법을 템플릿 리터럴이라고 부른다.
이 템플릿 리터럴은 향후 아주 유용하게 사용되므로 꼭 익혀두기!!😉🤙

3. Boolean

let isSwitchOff = true; 
let isSwitchOff = flase; 

true(참)이거나 false(거짓)의 값만 갖는 자료형

4. Null

Null은 보통 '아무것도 없다'를 지칭하는 값이자, js에서는 특별하게 자료형으로 사용한다.

let a;
console.log(a); // undefined 출력

다른언어에서는 a 라는 변수를 선언하고 값을 아무것도 넣지 않은 상태에서 출력하면 Null이 나왔었는데, js에서는 undefined이라고 나온다.

let a = null;
console.log(a);

Null 사용법 : 실제로 대입을 시켜줘야 함.
의도적으로 이 값은 아무것도 안가리키고 있다, 이 변수는 아무 값도 안담고 있다를 가리킬 때 사용한다.

5. Undefined

let variable;
console.log(variable); // undefined 출력

변수를 선언하고 아무런 값도 할당하지 않으면 이 변수는 자동으로 undefined이라는 값을 할당한다.

형변환

let numberA = 12;
let numberB = 2;
console.log(numberA*numberB); // 24출력 , 숫자와 숫자 > 사칙연산 적용

let numberA = 12;
let numberB = "2"; // 숫자가 아니라 문자라면?
console.log(numberA*numberB); // 24출력 , 숫자와 문자 > 사칙연산 적용

문자열과 숫자를 곱했는데 마치 숫자와 숫자의 곱셈결과처럼 값이 나왔다.
이것은 js가 문자열"2"를 자동으로 숫자 2로 인지해서 계산한 결과이다.
js코드를 읽고 해석하여 실행하는 자바스크립트엔진은 다른 자료형간의 연산을 수행할 때 이렇게 적절히 자료형을 자동으로 변환하여 결과를 돌려주는 기능을 가지고 있다.

이렇게 값은 유지하면서 문자열"2"를 숫자 2로, 자료형을 변환시키는 이런 기능들을 형변환 casting(캐스팅)이라고 부른다.

자동적으로 형변환이 일어나는 것은 자바스크립트엔진이 묵시적(암묵적)으로 알아서 해준다 라는 뜻을 담아 묵시적 형변환이라 부른다.

let numberA = 12; // 숫자
let numberB = "2"; // 문자
console.log(numberA + numberB); // 122라는 문자 출력

문자열과 숫자의 곱셈은 문자열을 숫자로 바꿔서 수행
문자열과 숫자의 덧셈은 숫자를 문자열로 바꿔서 문자열을 붙임.

만약 numberA를 문자열로 변환하지 않고, numberB를 숫자형으로 변환하여 결과를 14로 만들고 싶다면 아래의 코드처럼 하면 된다.

let numberA = 12; // 숫자
let numberB = "2"; // 문자
console.log(numberA + parseInt(numberB)); // 14 출력

parseInt는 문자열 값을 받아서 숫자로 돌려준다. 따라서 위의 코드는 12+2가 되어 결과값이 14가 나오게 되었다.

이렇게 프로그래머가 의도적으로 형변환하는 것을 명시적 형변환이라고 부른다.