자료형

안녕하세요😺

이번 시간에는 자바스크립트의 자료형과 형변환에 대해 알아보겠습니다.

자료형

자료형이란 변수의 종류를 뜻하며, 자바스크립트 자료형은 크게 원시타입과 비 원시 타입으로 나뉩니다.

원시 타입 자료형에는 숫자형, BigInt형, 문자형, Boolean형, Null, Undefined, Symbol형이 있고, 비 원시 타입 자료형에는 객체형으로, 객체, 함수, 배열이 포함되어있는 자료형이 있습니다.

이번 시간에는 자바스크립트의 원시 타입 자료형들 중 symbol형을 제외한 나머지 6가지의 자료형에 대해 배워보도록 하겠습니다.

원시 타입

원시 타입 자료형은 프로그램이 실행되는 도중에는 단 하나의 값만을 갖고있는 타입들 입니다.

쉬운 설명을 위해, 원시 타입 자료형으로 선언된 변수와 비 원시 타입 자료형으로 선언된 변수를 코드샌드박스에 직접 작성해보겠습니다.

let number = 123;
number = "123"; // 원시 타입

let array = [1, "2", 3]; //비원시 타입

number 변수에 123 이라는 숫자를 할당하고, 그 다음 123 이라는 문자열로 값을 변경해보았습니다. 또 다른 array라는 이름의 변수에는 1, "2", 3의 값이 들어있는 배열을 할당했습니다.

배열은 이후에 자세하게 다룰 예정이니, 이렇게 대괄호 안에 값을 넣는 것이 배열이라는 것 정도까지만 알고 넘어가시면 될 것 같습니다.

위의 코드를 보면,`number 변수는 값이 123 이었다가 "123" 으로 변경되었지만 한 번에 하나의 값만 갖고 있는 것을 볼 수 있고,

array 변수는 1, "2", 3 으로 한 번에 3개의 값을 가질 수 있는 것을 볼 수 있습니다.

여기서, number 변수처럼 하나의 고정된 값을 갖는 변수들의 타입을 원시 타입이라하고, array 변수처럼 한 번에 여러 개의 값을 갖고 있는 변수들의 타입을 비 원시 타입 이라고 합니다.

숫자형

원시 타입 중 제일 먼저 숫자형에 대해 배워보도록 하겠습니다.

숫자형(Number 타입) 은 말그대로 정수, 소수 등의 모든 숫자를 나타냅니다.

숫자형 타입은 덧셈 +, 뺄셈 -, 곱셈 *, 나눗셈 / 의 사칙연산이 가능합니다.

코드로 작성해보겠습니다.

let number = 25;
console.log(number + 5); //30
console.log(number - 5); //20
console.log(number * 5); //125
console.log(number / 5); //5

코드를 실행시켜보면, 에러 없이 알맞은 연산 결과들이 출력되는 것을 확인할 수 있습니다.

자바스크립트의 숫자형에는 정수와 소수 뿐만 아니라 Infinity, NaN 과 같은 특수한 숫자 값들이 포함되어있는데요,

let number = 25;
number = 10.00123;
number = Infinity;
number = NaN;

먼저 Infinity는 무한대를 나타내는 값으로, 이렇게 하나의 값으로 변수에 할당하는 것도 가능하고, 아래 코드처럼 어느 숫자든지 0으로 나누게 될 경우 반환되는 값입니다.

let number = 10;
console.log(number / 0); // Infinity

NaN은 Not A Number 즉, 숫자가 아니다 라는 뜻으로, 부정확한 연산을 하게 될 경우 반환되는 값입니다.

let number = 10;
console.log("자바스크립트" / number); // NaN

이렇게 문자열을 숫자로 나누는, 정확하지 않은 연산을 하게 될 경우에, 에러를 반환하지 않고 NaN 이 출력되는 것을 확인할 수 있습니다.

자바스크립트는 이렇게 다른 언어들과는 다르게 부정확한 연산을 하거나, 0으로 나누는 연산을 하더라도 에러가 발생하지 않고 Infinity와 NaN이라는 값을 반환하기 때문에,

자바스크립트의 숫자 연산은 안전 하다고 할 수 있습니다.

BigInt

다음으로는 BigInt 타입에 대해 배워보도록 하겠습니다.

BigInt는 자주 쓰이지 않고, 아직 몇몇의 브라우저에서는 지원하지 않기 때문에 ppt로 개념만 짚고 넘어가도록 하겠습니다.

BigInt 타입은 숫자형으로는 표현하지 못하는 범위인 (2^53 - 1) 보다 크거나 -(2^53 - 1) 보다 작은 정수를 나타내야 할 때 사용하는 자료형입니다.

let big1 = 9007199254740991n;
let big2 = BigInt("9007199254740991");

위의 예시처럼 BigInt 형은 길이에 상관없이 정수를 나타낼 수 있고, big1 의 값과 같이 끝에 'n'을 붙이거나 big2의 값 처럼 함수 BigInt()를 호출에 생성 가능합니다.

BigInt 형은 숫자형 타입과 동일하게 사칙연산이 가능합니다.

BigInt형의 사칙연산을 할 때에는 BigInt형은 BigInt 형의 값으로만 연산이 가능하고, 일반 숫자형과는 연산할 수 없다는 점을 주의하셔야합니다.

문자형

다음으로 설명할 원시 타입 자료형은 문자형(String 타입) 입니다.

자바스크립트 변수에 문자열을 할당햐기 위해서는 문자열을 따옴표로 묶어야합니다.

문자형 변수를 선언해보겠습니다.

let name1 = "hyobin"; //큰따옴표
let name1 = 'hyobin'; //작은따옴표
let name1 = `hyobin`; //역따옴표

우리가 흔히 사용하는 따옴표는 "" 이지만, 따옴표에는 3가지 종류가 있습니다.

1. 큰따옴표 "hyobin"

2. 작은따옴표 'hyobin'

3. 역따옴표(백틱) hyobin

큰따옴표와 작은따옴표는 같은 기능을 하기 때문에 문자열을 할당하기 위에서는 둘 중 아무거나 사용해도 상관 없지만,

역따옴표(백틱) 은 이 두 가지의 따옴표와는 큰 차이점을 가지고 있습니다.

바로 역따옴표로 문자열을 묶게 될 경우에는 문자열 안에 특정 변수에 저장된 값을 넣을 수 있다는 것 인데요, 예시를 통해 보여드리도록 하겠습니다.

let name = "hyobin";
let intro = `제 이름은 ${name} 입니다.`;

역따옴표는 키보드에 ~ 표시가 있는 버튼을 누르면 나오는 따옴표를 사용하고,

이렇게 name 변수에 담긴 "hyobin" 이라는 값을 intro 변수에 넣기 위해서는, 역따옴표로 문자열을 묶은 후 ${}안에 특정 값을 넣어주면 됩니다.

이러한 방식을 템플릿 리터럴이라고 부르며, 알아두시면 나중에 아주 유용하게 사용하실 수 있습니다.

Boolean형

Boolean 형 은 값이 true, false 만으로 이루어진 자료형입니다.

특정 버튼이 클릭 되었는지 클릭 되지 않았는지를 판별하는 isClicked 변수와, modal 창이 열렸는지 열리지 않았는지를 판별하는 isOpen 변수를 boolean 형으로 생성해보겠습니다.

let isClicked = false; //버튼이 클릭되었는지 안되었는지
let isOpen = true; // modal이 열렸는지 안열렸는지

boolean형은, 값이 true와 false로만 이루어져 있기 때문에 보통 참인지 거짓인지 분별하는 값을 저장할 때 사용되고

let isClicked = false; //버튼이 클릭되었는지 안되었는지

if (isClicked) {
    console.log("클릭O");
} else {
    console.log("클릭X");
}

위에 작성된 코드처럼, if-else라는 조건문을 이용해, 변수의 값이 참인지, 거짓인지에 따라 조건문으로 다른 코드를 실행해야 할 때 자주 사용되는 자료형 입니다.

Null

다음으로는 Null 형에 대해 배워보겠습니다.

null을 하나의 값으로만 활용하는 다른 언어들과는 다르게,

자바스크립트에서 null 은 오직 null 값만 포함는 자료형으로 쓰입니다.

null 값은 존재하지 않거나, 알 수 없는 값을 나타낼 때 사용됩니다.

let name = null;

위의 코드처럼 let name = null; 은 name 변수가 비어있는 값임을 보여줍니다.

let name;
console.log(name); //null???

그렇다면, name 변수에 값을 아무것도 할당하지 않으면 값이 비어있기 때문에 null 값이 출력될까요?

Undefined

let name;
console.log(name); //undefined

코드를 실행시켜보겠습니다.

자바스크립트 변수에 아무런 값도 할당하지 않고, console.log()를 통해 그 변수의 값을 출력하게 되면 null 값이 아닌 undefined 라는 값이 출력되는 것을 볼 수 있습니다.

undefined도 null 값과 마찬가지로, undefined 값만을 포함하는 자료형입니다.

null 형과 다른점은, undefined는 값이 존재하지 않거나 알 수 없는 값일 때가 아니라, 변수에 값이 할당되지 않은 상태 일 때 자동으로 undefined라는 값이 할당 된다는 점 입니다.

형 변환

자 이렇게 자바스크립트의 원시 타입 자료형들에 대해 배워보았는데요,

이제 이러한 자료형들을 자동으로 알맞게 변환해주는 형 변환 에 대해 배워보도록 하겠습니다.

형 변환에는 묵시적 형 변환과, 명시적 형 변환이 있는데요, 먼저 묵시적 형 변환에 대해서 살펴보겠습니다.

묵시적 형 변환

let num1 = "15";
let num2 = 5;

console.log(num1 / num2); // 3

위의 코드를 작성하고 실행시켜 봅시다.

num1의 자료형은 문자형이고, num2의 자료형은 숫자형입니다.

나누기 연산을 하기 위해서는 num1 과 num2 변수 모두 숫자형이여야만 가능하지만,

console.log() 출력 결과를 보면 15/5 의 결과인 3이 출력되는 것을 볼 수 있습니다.

출력 값이 3 이 나온 이유는, 자바스크립트 엔진이 나누기 연산을 실행하기 위해 문자열 "15"를 숫자 15로 적절하게 자동 변환해주었기 때문입니다.

이렇게 자료형을 알맞게 변환시켜 주는 기능을 형 변환이라고 하며, 우리가 의도해서가 아니라 자동으로 자료형을 변환해주는 것은 묵시적 형변환 이라고 부릅니다.

명시적 형 변환

이번엔 명시적 형 변환에 대해 살펴보겠습니다.

let num1 = "15";
let num2 = 5;

console.log(num1 + num2); // 155

이번엔 문자열과 숫자의 나누기 연산이 아닌 더하기 연산을 해보겠습니다.

위의 코드를 실행시켜 콘솔에 출력된 결과를 확인해보면, 155 라는 값이 나온 것을 확인할 수 있습니다.

이번엔 문자열 "15"가 숫자형으로 변환되지 않고, 숫자 5가 문자열로 변환되어 "155" 라는 문자열이 출력되었습니다.

자바스크립트는 사칙연산 중 곱하기와 나누기, 빼기를 수행 할 때는, 문자열을 숫자로 형 변환을 하지만, 더하기 연산을 할 경우에는 숫자를 문자열로 변환하게 됩니다.

만약 이때 정말 15+5 라는 연산을 실행하고 싶다면 아래와 같이 num1의 값을 직접 숫자형으로 변환해주면 됩니다.

let num1 = "15";
let num2 = 5;

console.log(parseInt(num1) + num2); //20

parseInt() 내장함수는 문자열을 받아 숫자로 반환해주는 역할을 합니다.

parseInt()를 사용해 num1의 값인 문자열 15를, 숫자형 15로 변환해 준 뒤 더하기 연산을 수행하면 20이 출력되는 것을 확인할 수 있습니다.

이렇게 직접 내장함수 등을 이용하여 값을 유지하며 자료형을 의도적으로 변환시키는 것을 명시적 형변환이라고 부릅니다.

자바스크립트의 자료형과 형변환은 앞으로 배우게 될 내용에서 계속 사용될 예정이니, 확실하게 배우고 가시는 것을 추천드립니다.

다음 강의에서는 덧셈이나 뺄셈 같은 자바스크립트의 여러가지 연산자에 대해 이야기 해보도록 하겠습니다.

감사합니다.