[인프런] 웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 자료형과 형변환

자료형 (변수의 종류)

원시타입 : 프로그램 실행 도중 단 하나의 값만을 갖는 자료형

- 종류: 숫자, null, BigInt, undefined, 문자, symbol, boolean

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

 

• 숫자 : 정수, 소수 등의 모든 숫자 (infinity, NaN 등의 특별한 숫자들 포함O)
  • 사칙연산이 가능
  • infinity: 무한대를 의미. 하나의 값으로 변수에 할당하는 것 가능, 어느 숫자든 0으로 나누면 반환되는 값
  • NaN: 부정확한 연산을 할 경우 반환되는 값.

          -> 이 특별한 숫자들 덕분에 이상한(?) 연산들로 인한 프로그램 다이가 발생하지 않아, 숫자 연산이 안전하다.

 

+) Infinity와 NaN

let number1 = 10;

console.log(number1 / 0); // Infinity

let number2 = 10;

console.log("자바스크립트" / number2); // NaN
// 문자열 나누기 숫자 -> 정확하지 않은 연산

 

 

• null : 존재하지 않거나, 알 수 없는 값을 나타낼 때 사용  

 

• BigInt: 2^53 - 1보다 크거나 -(2^53 -1)보다 작은 정수를 나타낼 때 사용 // 9,007,199,254,740,991 ~ -( 9,007,199,254,740,991)
  • 잘 안쓰이고, 몇 브라우저에서는 지원이 안되기도 함.
  • 숫자형으로는 표현하지 못하는 2^53-2보다 크거나 -(2^53-1)보다 작은 정수를 나타낼 때 사용.
  • 끝에 n, BigInt() 호출해서 생성하는 두 가지 방법 존재.
  • BigInt의 사칙연산은 BigInt형과의 연산만 가능 -> 일반 숫자와는 연산X

 

• undefined : 변수에 값이 할당되지 않을 때 자동으로 할당되는 값

 

• 문자(string) : 문자열 형태로 저장.
  • 큰따옴표,
  • 작은따옴표
  • 역따옴표(백틱)
    • 문자열을 묶으면, 문자열 안에 특정 변수에 저장된 값을 넣을 수 있다.
      • 템플릿 리터럴이라고 불림.

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

console.log(intro); // 제 이름은 hyobin 입니다.

 

• symbol : 유일한 식별자(unique identifier)를 만들고 싶을 때 사용

 

• boolean : true, false로 구성된 자료형
  • true
  • false

 

비원시 타입(참조 타입): 한 번에 여러 개의 값을 지님. (원시 타입 제외한 타입)

- 종류: 배열, 열거, 클래스, 인터페이스 

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

 

 

형 변환

• 묵시적 형 변환
  • 자동으로 자료형 변환 하는 형변

let num1 = '15';
let num2 = 5;

console.log(num1 / num2); // 결과값: 3

 

-> num1 이 문자열이더라도 /연산을 위해 num1을 숫자 15로 자동변환해줌. 

 

• 명시적 형 변환
  • 내장 함수등을 이용해 값을 유지하며 자료형을 의도적으로 변환하는 것.
    • *, /, - 연산 수행 시 문자열 -> 숫자형
    • + 연산 수행 시 숫자 -> 문자열

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

console.log(num1 + num2); // 결과값: 155

 

 

+) parseInt: 내장 함수로 문자열을 받아 숫자로 반환해줌. 특정 변수를 괄호로 묶어줘야 한다.

• 형식: parseInt(변수명)

let num1 = '15';
let num2 = 5;

console.log(parseInt(num1) + num2); // 결과값: 20