Javascript 개념 정리4 - 기본타입

안녕하세요 이 글은 유튜브 코딩앙마의 <자바스크립트 기초강좌>와 TCP school.com의 글을 기반으로 정리한 글입니다.

 

이번 포스팅에서는 자바스크립트의 기본 타입들에 대해 알아보겠습니다.

 

타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다.

자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 합니다.

자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있습니다.

 

원시 타입(primitive type):

1. 숫자(number)

2. 문자열(string)

3. 불리언(boolean)

4. 심볼(symbol) : ECMAScript 6부터 제공됨

5. undefined

 

객체 타입(object type):

6. 객체(object)

 

1. 숫자형

자바스크립트는 다른 언어와는 달리 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현합니다.

또한, 매우 큰 수나 매우 작은 수를 표현할 경우에는 e 표기법을 사용할 수 있습니다.

var firstNum = 10;     // 소수점을 사용하지 않은 표현

var secondNum = 10.00; // 소수점을 사용한 표현

var thirdNum = 10e6;   // 10000000

var fourthNum = 10e-6; // 0.00001




const age = 30; //숫자형 Number
const PI = 3.14;

console.log(1 + 2); //더하기
console.log(10 - 3); //빼기
console.log(3 * 2); //곱하기
console.log(6 / 3); //나누기
console.log(6 % 4); //나머지

const name = "Mike";
const y = name/2;

console.log(y)

// NaN = Not a number

2. 문자형

자바스크립트에서 문자열은 큰따옴표("")나 작은따옴표('')로 둘러싸인 문자의 집합을 의미합니다.

큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있으며, 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있습니다.

var firstStr = "이것도 문자열입니다.";      // 큰따옴표를 사용한 문자열

var secondStr = '이것도 문자열입니다.';     // 작은따옴표를 사용한 문자열

var thirdStr = "나의 이름은 '홍길동'이야."  // 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있음.

var fourthStr = '나의 이름은 "홍길동"이야.' // 큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있음.




const name = "Mike"; //문자형 String
const age = 30;

const name1 =  "Mike"
const name2 = 'Mike'
const name3 = `Mike`

const message = "I'm a boy.";
const message2 = "Im a boy.";

const message3 = `My name is ${name}`;
console.log(message3)

const message4 = `나는 ${30+1}살 입니다.`;
console.log(message4)

3. 불리언(논리적 요소)

불리언 값은 참(true)과 거짓(false)을 표현합니다.

자바스크립트에서 불리언 값은 예약어인 true와 false를 사용하여 나타낼 수 있습니다.

var firstNum = 10;

var secondNum = 11;

document.getElementById("result").innerHTML = (firstNum == secondNum); // false




const a = true; // 참
const b = false; //거짓

const name = "Mike";
const age = 30;

console.log(name == 'Mike');  //---> true
console.log(age > 40)  //---> false

4. 심볼

심볼은 유일하고 변경할 수 없는 타입으로, 객체의 프로퍼티를 위한 식별자로 사용할 수 있습니다.

var sym = Symbol("javascript");  // symbol 타입

var symObj = Object(sym);        // object 타입

typeof 연산자

typeof 연산자는 피연산자의 타입을 반환하는 피연산자가 단 하나뿐인 연산자입니다.

typeof 10;        // number 타입

typeof "문자열";  // string 타입

typeof true;      // boolean 타입

typeof undefined; // undefined 타입

typeof null;      // object 타입

5. null 과 undefined

자바스크립트에서 null이란 object 타입이며, 아직 '값'이 정해지지 않은 것을 의미합니다.

또한, undefined란 null과는 달리 '타입'이 정해지지 않은 것을 의미합니다.

따라서 자바스크립트에서 undefined는 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환됩니다.

null과 undefined는 동등 연산자(==)와 일치 연산자(===)로 비교할 때 그 결과값이 다르므로 주의해야 합니다.

null과 undefined는 타입을 제외하면 같은 의미지만, 타입이 다르므로 일치하지는 않습니다.

var num;          // 초기화하지 않았으므로 undefined 값을 반환함.

var str = null;   // object 타입의 null 값

typeof secondNum; // 정의되지 않은 변수에 접근하면 undefined 값을 반환함.

null ==  undefined; // true

null === undefined; // false

6. 객체

자바스크립트의 기본 타입은 객체(object)입니다.

객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있습니다.

객체는 여러 프로퍼티(property)나 메소드(method)를 같은 이름으로 묶어놓은 일종의 집합체입니다.

var dog = { name: "해피", age: 3 }; // 객체의 생성

// 객체의 프로퍼티 참조

document.getElementById("result").innerHTML =

    "강아지의 이름은 " + dog.name + "이고, 나이는 " + dog.age + "살 입니다.";

 

 

TIP

const message2 = "My name is ${name};
 // ``가 아닌 일반 쌍따옴표로 적으면 변수명이 그대로 노출됨


문자형에서 연산을 할 수 있음.
const name = "Mike";
const a = "나는";
const b = "입니다.";

console.log(a + name + b) // ---> 나는 Mike 입니다. 


숫자형과 문자형을 섞어서 쓸 수 있음. 이 때 문자형으로 변경된다.
const name = "Mike";
const a = "나는";
const b = "입니다.";
const age = 30' //number

console.log(a + age + "살" + b) //---> 나는 30살 입니다.