Ep7. JS 자료형의 모든 것

hyobin·2022년 5월 29일
4

자바스크립트 기초

목록 보기
7/16
post-thumbnail

안녕하세요😺

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

자료형

자바스크립트 자료형은 크게 원시타입과 객체로 나뉩니다.

원시 타입 자료형에는 숫자형, BigInt형, 문자형, Boolean형, Null, Undefined, Symbol 타입이 있고, 비 원시 타입 자료형에는 객체가 있는데요,

이번 시간에는 자바스크립트의 원시 타입 자료형들 중 숫자형, BigInt형, 문자형, Boolean형, Null, Undefined 까지 6가지의 자료형에 대해 배워보도록 하겠습니다.

원시 타입

원시 타입이란 무엇일까요?

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

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

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

위의 코드를 보면, number 변수는 값이 변경되기도 했지만, 한 번에 하나의 값만 갖고 있는 것을 볼 수 있고,
array 변수를 보면 한 번에 여러 개의 값을 가질 수 있는 것을 볼 수 있습니다.

여기서 number 변수처럼, 하나의 고정된 값을 갖는 변수들의 타입을 원시 타입이라고 부를 수 있습니다.

숫자형

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

let number1 = 25;
let number2 = 12.12345;

console.log(number1 / 5); //5

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

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

BigInt

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

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

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

BigInt 형 또한 숫자형 타입과 같이 사칙연산이 가능합니다.

문자형

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

let name1 = "hyobin"; //큰따옴표
let name2 = 'hyobin'; //작은따옴표
let name3 = `hyobin`; //역따옴표(백틱)

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

위의 예시처럼 따옴표에는 3가지 종류가 있습니다.

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

큰따옴표와 작은따옴표는 같은 기능을 하기 때문에 문자열을 할당하기 위에서는 둘 중 아무거나 사용해도 되고,
큰 차이가 있는 역따옴표(백틱) 에 대해 설명드리겠습니다.

역따옴표로 문자열을 묶게 될 경우에는, 문자열 안에 특정 변수에 저장된 값을 넣을 수 있습니다.

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

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

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

Boolean형

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

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

위의 예시처럼 보통 참인지 거짓인지 분별하는 값을 저장할 때 사용됩니다.

Null

null을 값으로만 활용하는 다른 언어들과는 달리,
자바스크립트에서 null 은 오직 null 값만 포함는 자료형으로 쓰입니다.

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

let name = null;

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

let name;

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

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

Undefined

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

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

undefined는 값이 존재하지 않거나 알 수 없는 값일 때가 아닌, 값이 할당되지 않은 상태 를 나타낼 때 사용됩니다.

형 변환

자바스크립트의 원시 타입 자료형들을 배웠으니, 이제 이러한 자료형들을 자동으로 알맞게 변환해주는 형 변환에 대해 알아보겠습니다.

묵시적 형 변환

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

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

위의 코드를 실행시켜 봅시다.

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

나누기 연산을 하기 위해서는 num1 과 num2 변수 모두 숫자형이여야 가능하지만,
console.log() 출력 결과를 보면 나누기 연산 후의 결과인 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() 내장함수는 문자열을 받아 숫자로 리턴해줍니다.

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


next

이번시간에는 자바스크립트의 원시 타입 자료형인 숫자형, BigInt형, 문자형, Boolean형, Null, Undefined 에 대해 알아보았습니다.

다음시간에는 자바스크립트의 연산자에 대해 배워보도록 하겠습니다.

감사합니다🤗


🙏참고 & 출처
https://ko.javascript.info/types
https://ko.javascript.info/type-conversions
https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures#symbol_%ED%83%80%EC%9E%85

0개의 댓글