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

자료형

• 자바스크립트 자료형은 크게 원시타입과 비 원시 타입으로 나뉩니다. 
  • 원시타입 자료형 : 숫자형, Binint형, 문자형, Boolean형, Null, Undefined, Symbol형
  • 비 원시타입 자료형 : 객체, 함수, 배열

 

원시타입

• 단 하나의 값만을 갖고 있는 타입 

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

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

number 변수는 값이 123이었다가 "123"으로 변경되었지만 한 번에 하나의 값만 갖고 있는 것을 볼 수 있고, array변수는 1, "2", 3 으로 한 번에 3개의 값을 가질 수 있습니다. 

 

숫자형

• 숫자형(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;

• 먼저 Infiniy는 무한대를 나타내는 값으로, 이렇게 하나의 값으로 변수에 할당하는 것도 가능하고, 아래 코드처럼 어느 숫자든지 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타입은 숫자형으로는 표현하지 못하는 범위인(2^53 - 1)보다 크거나  -(2^53 - 1)보다 작은 정수를 나타내어야 할 때 사용하는 자료형입니다. 

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

위의 예시처럼 길이에 상관없이 정수를 나타낼 수 있고, big1의 값과 같이 끝에 'n'을 붙이거나 big2값처럼 함수 BigInt()를 호출에 생성 가능합니다. 주의해야할 점은 BigInt는 일반 숫자형과 연산할 수 없고 Binint형 끼리만 사칙연산이 가능합니다. 

 

문자형

• 문자열을 할당하기 위해서는 문자열을 따옴표로 묶어야 합니다. 우리가 흔히 사용한느 따옴표는 ""이지만, 따옴표는 3종류가 있습니다. 

let name1 = "myeongsu"; //큰따옴표

1. 큰 따옴표 "myeongsu"
2. 작은 따옴표 'myeongsu'
3. 역따옴표(백틱) `myeongsu`

큰 따옴표와 작은 따옴표는 같은 기능을 하기 때문에 둘 중 아무거나 사용해도 상관없지만, 역따옴표(백틱)은 큰 차이점을 가지고 있습니다. 바로 역따옴표로 문자열을 묶게 될 경우 문자열 안에 특정 변수에 저장된 값을 넣을 수 있다는 것입니다. 예시를 통해 보겠습니다.

이렇게 역따옴표로 문자열을 묶은 후 ${} 안에 특정값을 넣어주면 됩니다. 이러한 방식을 템플릿 리터럴 이라고 부릅니다.

 

 

Boolean 형

• Boolean 형은 값이 true, false로 이루어진 자료형입니다. 특정 버튼이 클릭되었는지 판별하는 isClicked 변수와, model 창이 열렸는지 판별하는 isOpen변수를 boolean형으로 생성해보겠습니다.

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

• 아래의 코드처럼 if-else라는 조건문을 활용해 참인지 거짓인지에 따라 다른 코드를 실행해야 할 때 자주사용되는 자료형입니다. 

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

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

 

Null

• null은 하나의 값으로만 활용하는 다른 언어들과는 다르게, 자바스크립트에서 null은 오직 null 값만 포함하는 자료형으로 쓰입니다. null값은 존재하지 않거나, 알 수 없는 값을 나타낼 때 사용됩니다. 

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

 

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

undefine라는 값이 출력되는 것을 볼 수 있습니다. undefined도 null 값과 마찬가지로 undefined 값만을 포함하는 자료형입니다. null형과 다른점은, undefined 는 값이 존재하지 않거나 알 수 없는 값일 때가 아니라, 변수에 값이 할당되지 않은 상태 일 때 자동으로 undefined라는 값이 할당된다는 점 입니다. 

 

 

 

형 변환

• 형 변환이란 자료형들을 자동으로 알마젝 변환해주는 것을 말합니다.  그리고 형 변환에는 묵시적 형변환과, 명시적 형변환이 있습니다. 

 

묵시적 형변환

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

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

• num1의 자료형은 문자혀이고, num2의 자료형은 숫자형입니다. 출력값이 3이 나온 이유는 자바스크립트 엔진이 나누기 연산을 실행하기 위해 문자열 "15"를 수자 15로 적절하게 자동 변환해주었기 때문입니다. 이렇게 자료형을 알맞게 변환시켜 주는 기능을 형 변환 이라고 하며, 우리가 의도해서가 아니라 자동으로 자료형을 변환해주는 것을 묵시적 형 변환이라고 부릅니다. 

 

명시적 형변환

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

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

• 이번엔 숫자 5가 문자열로 변환되어 "155"라는 문자열이 출력되었습니다. 자바스크립트는 사칙연산 중 곱하기와 나누기, 빼기를 수행 할 때는, 문자열을 숫자로 형 변환을 하지만, 더하기 연산을 할 경우에는 숫자를 문자열로 변환하게 됩니다. 만약 이때 15+5라는 연산을 실행하고 싶으면 num1의 값을 직접 숫자형으로 변환해줍니다.

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

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

• parseInt() 내장함수는 문자열을 받아 숫자로 반환해주는 역할을 합니다. 이렇게 직접 내장함수 등을 이용하여 값을 유지하며 자료형을 의도적으로 변환시키는 것을 명시적 형변환이라고 부릅니다. 

 

 

---

참고자료

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의