[JavaScript] 기초 2. 자료형(data type)

개요

let이나 const 변수에 저장한 값은 하나의 자료형(data type)을 가지게 된다. 오늘은 자바스크립트에서 어떤 자료형들이 있는지 알아보자.

---

숫자(Number 자료형)

자바스크립트에서 숫자를 표현하는 자료형은 단 하나이다. C++과 같은 언어와 다르게 숫자 범위에 따라 타입을 구분하지 않는다.

 

정수

let num1 = 10;
console.log(num1);                  // Ouput: 10
console.log(typeof num1);           // Ouput: number

 

실수

let num2 = 3.14;
console.log(num2);                  // Ouput: 3.14
console.log(typeof num2);           // Ouput: number

 

지수형

let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3);                  // Ouput: 250000
console.log(typeof num3);           // Ouput: number

 

Nan(Not a Number)

let num4 = "Hello" / 2;             // Ouput: Nan
console.log(num4);                  // Ouput: (출력 없음)

(Nan은 Number자료형이 아니다. 그럼에도 이 자리에 넣은 이유는 잘못된 산술 연산의 결과가 Nan으로 나오기에 이곳에 넣었다.)

 

Infinity

let num5 = -1 / 0;
console.log(num5);                  // Ouput: -Infinity
console.log(typeof num5);           // Ouput: number

이름 그대로 Infinity 무한대일 경우 출력된다.

제목: [SQL] X. 제목을 입력하세요

---

문자열(String 자료형)

이름 그대로 문자열을 다루는 자료형이다. 자바스크립트에서는 특이하게도 작은 따옴표('')와 큰 따옴표("")의 취급이 같기 때문에 둘 중 아무거나 써서 String 자료형임을 표시해주면 된다.

---

 

문자열 속성 및 함수

 

자바스크립트에서 문자열에 대한 정보는 str.length와 같이 속성의 형태로 갖고 있다. (C++은 함수 반환이였기 때문에 오지게 헷갈린다.) 자주 사용하는 속성과 함수들을 알아보자.

 

문자열 길이 (.length 속성)

let str = "Hello World";
console.log(str.length);                            // Output: 11

 

문자열 결합 (concat() 함수) 

let str1 = "Happy";
let str2 = "Cat";
let result = str1.concat(str2)
console.log(result);                                // Output: HappyCat

 

문자열 자르기 (slice() 함수)

• substr(6, 5): [6]부터 5개의 문자열을 반환. (deprecated)
• substring(6, 12): [6]~[12]의 문자열을 반환.([12] 제외)
• slice(6, 12): [6]~[12]의 문자열을 반환.([12] 제외)

let str3 = "Hello World";
console.log(str3.substr(6, 5));                     // Output: World
console.log(str3.substring(6, 12));                 // Output: World
console.log(str3.slice(6, 12));                     // Output: World

 

문자열 검색 (search() 함수)

가장 왼쪽에 있는 World의 위치를 반환한다.

let str4 = "Hello World World World";           
console.log(str4.search("World"));                  // Output: 6

 

문자열 대체 (replace() 함수)

가장 왼쪽에 있는 World를 JavaScript로 변경한다.

let str5 = "Hello World World World";
console.log(str5.replace("World", "JavaScript"));   // Output: Hello JavaScript World World

 

문자열 나누기 (split() 함수)

let str6 = "apple, banana, kiwi";
let str6_list = str6.split(", ");		    // delimiter의 길이가 2이상도 가능하다
console.log(str6_list);                             // Output: [ 'apple', 'banana', 'kiwi' ]

---

불리언(boolean 자료형)

참과 거짓을 나타내는 자료형이다. 가질 수 있는 값은 true 또는 false이며 다른 건 없다. 별거 없으니 간단하게 알아보자.

// true(참), false(거짓)
let bool1 = true;
let bool2 = false;

console.log(bool1);                                 // Output: true
console.log(typeof bool1);                          // Output: boolean
console.log(bool2);                                 // Output: false
console.log(typeof bool2);                          // Output: boolean

 

falsy한 자료형

boolean 자료형은 아니지만  true, false로 비교 시 false에 해당하는 자료형들이다. 이에 해당하는 자료형은 아래의 undefined, null, 그리고 숫자 자료형에 설명한 Nan이 있다.

 

undefined

// 초기화하지 않은 상태
let x;
console.log(x);                                     // Output: undefined

 

null

// 값이 존재하지 않음을 '명시적'으로 나타내는 방법
let y = null;
console.log(y);                                     // Output: null

 

falsy한 자료형의 기준이 알고 싶다면 아래 링크를 참조하면 된다.

https://pledge24.tistory.com/173

[JavaScript] 기초 3. 형변환(casting)

---

객체(Object 자료형)

key-value를 쌍으로 가지는 자료형이다. 많은 종류의 자료구조들이 객체 타입에 해당하기 때문에 중요하다.

let person = {
    name: "Yun",
    age: 20,
    isMarried: false,
};

console.log(typeof person);                         // Output: object

 

배열(Array)

객체 자료형 중, 여러 개의 데이터를 순서대로 저장하는 자료형. 자바스크립트에서 배열은 서로 다른 타입을 저장할 수 있다는 점에서 C++배열과 다르다. (보편적으로 배열은 "같은 타입을 여러 개 저장한 데이터 타입"을 의미하기 때문에 이 점은 파이썬과 닮아 있다는 생각이 든다. 같은 인터프리터 언어라서 그런가?)

let number = [1, 2, 3, 4, 5];                       
let fruits = ["apple", "banana", "orange"];
let mixed = ["str1", 123, true];

console.log(number);                                // Output: [ 1, 2, 3, 4, 5 ]
console.log(fruits);                                // Output: [ 'apple', 'banana', 'orange' ]
console.log(mixed);                                // Output: [ 'str1', 123, true ]