JS 데이터 타입

mukom 2022. 11. 3. 18:25

1. Boolean

불린 데이터 타입은 오직 true, false 값만을 허용한다.

불린 값의 이러한 특징으로 조건식과 연관되어 자주 사용되고 관련 연산과와 함께 사용된다.

let x = 5;
let y = 5;
let z = 6;
x == y 👉 true
x == z 👉 false

또한 값을 가지고 있는 모든 데이터는 true 로 해석되는데

반대로 데이터 타입별로 값을 가지고 있지 않는 경우에는 false 로 해석된다.

결과가 false 인 경우
1️⃣ Boolean 타입 : false
2️⃣ Number 타입 : 0, -0
3️⃣ String 타입 : ""
4️⃣ Object 타입 : null
5️⃣ Undefined 타입 : 그 자체로 false
.📌 값이 NaN(Not a Number), 즉 숫자가 아닌 경우에도 false 로 출력된다.

기본적으로 불린 타입은 리터럴 값을 통해 다음과 같이 선언과 할당을 할 수 있다.

let x = false;

하지만 불린 타입을 new 키워드를 통해 object 타입으로도 불린 타입이 정의될 수 있다.

let y = new Boolean(false);

typeof 를 통해 각각 어떤 타입으로 만들어 졌는지도 확인할 수 있다.

    <script>
        let x = false;
        let y = new Boolean(false);

        console.log(typeof x); 
        console.log(typeof y);
    </script>

각각의 타입이 x 는 boolean 타입, y 는 object 타입으로 출력된 것을 확인할 수 있다.

이 과정의 중요성은 바로 연산자에서 나타난다.

JS 에는 비교 연산자 중에서 == 과 === 이 존재한다.

== 은 단순히 값의 동일성을 비교하는 것이고, === 은 값뿐만 아니라 값의 타입 또한 동일한지에 대해 비교한다.

때문에 각각의 연산자를 사용해서 x , y 를 비교하면 서로 다른 결과가 출력될 것이다.

    <script>
        let x = false;
        let y = new Boolean(false);

        console.log(x == y);
        console.log(x === y);

    </script>

x 도 false 이고, y 도 false 이기 때문에 == 연산자를 통한 비교에서는 true 가 출력되었지만,

x 는 boolean 타입이고, y 는 object 타입이기 때문에 === 연산자를 통한 비교에서는 false 가 출력된 것이다.

2. Number

JS 에서는 Java 와 달리 숫자 타입을 Java 에서의 double 타입과 유사한 number 타입 단 하나로 표현한다.

때문에 넘버 타입은 기본적으로 실수 형태로 연산을 수행한다.

하지만 리터럴에 대해서 소수점 표기에 대한 강제 사항은 없다.

let x = 30;
let y = 30.0;

넘버 타입은 실수까지 표현하기 때문에 정수의 정밀도는 최대 15자리까지 정확하다.

let x = 999_999_999_999_999;
let y = 9_999_999_999_999_999;

한편 소수 자리수는 최대 17자리까지 정밀도가 적용되기 때문에, 항상 100% 정확한 것은 아니다.

let x = 0.1 + 0.2;

예문의 0.1 과 0.2 의 더하기 연산은 0.3 이 나와야 할 것 같지만 마지막에 4 가 보인다.

이처럼 넘버 타입 연산 시에는 실수 연산이기 때문에 발생할 수 있는 상황을 인지하고 있어야 한다.

넘버 타입도 앞선 불린 타입과 마찬가지로 new 키워드를 통한 object 타입으로의 정의가 가능하다.

let x = 30;
let y = new Number(30);

이들의 비교 역시 불린 타입 때와 똑같이 적용된다.

== 사용 시에는 리터럴 값이 같기 때문에 true 가 반환되지만,

=== 사용 시에는 리터럴 값은 같지만 각각 number 타입과 object 타입으로 타입이 다르기 때문에 false 가 반환된다.

3. String

JS 에서는 Java 와 달리 문자는 스트링 타입으로 전부 나타낸다.

문자열 작성 시에는 따옴표를 사용하게 되는데, ""(큰 따옴표) 와 ''(작은 따옴표)의 구분을 하지 않기 때문에 둘 다 사용이 가능하다.

let x = "String";
let y = 'String';

그렇다면 만약 출력하고 싶은 문자열에 따옴표가 있다면 어떻게 해야 할까?

문자열 전체를 감싸고 있는 따옴표의 모양과 일치하지 않은 따옴표를 사용하면 쉽게 적용할 수 있다.

let z = "I am 'Mukom'";

또한 문자열 또한 앞서 배운 타입들처럼 object 타입으로 정의할 수 있다.

let x = 'mukom';
let y = new String('mukom');

비교 연산자의 적용에서도 동일한 결과를 보인다.

📌 문자열 + 숫자, 숫자 + 문자열

기본적으로 두 개의 숫자를 더하면 숫자가 된다.

        let x = 10;
        let y = 10;

        console.log(x + y);

문자열 또한 문자열 간의 더하기는 문자열이 된다.

        let str1 = 'mu';
        let str2 = 'kom';
        let str3 = str1 + str2;

        console.log(str3);
        console.log(typeof str3);

문자열 더하기 숫자는 어떠한 값으로 출력될까?

        let x = 10;
        let str1 = 'mu';
        let result = str1 + x;

        console.log(result);
        console.log(typeof result);

문자열과 숫자를 결합하니 숫자가 문자열처럼 결합되었다.

따라서 결과 또한 문자열이 된 것을 확인할 수 있다.

그렇다면 숫자 더하기 문자열은 어떠한 값으로 출력될까?

        let x = 10;
        let str1 = 'mu';
        let result = x + str1;

        console.log(result);
        console.log(typeof result);

위의 결과와 마찬가지로 문자열처럼 결합된 것을 확인할 수 있었다.

4. Object

객체 타입은 중괄호로 작성되고 중괄호 안의 속성으로는 이름과 값이 하나의 쌍(이름:값)이 되어 작성된다는 특징이 있다.

const object1 = {name:'피카츄', type:'전기', color:'yellow'};

외부에서 생성된 객체의 속성에 접근하는 방법은 다음과 같이 두 가지가 있다.

1️⃣ objectName.propertyName
2️⃣ objectName['propertyName']

console.log(object1.name);
console.log(object1['name']);

또한 JS 의 객체는 Java 처럼 this 키워드를 사용할 수 있는데, 객체 자신을 나타내는 키워드이다.

객체에는 배열도 포함되는데 객체를 중괄호 {} 로 표현했던 것과 달리 배열은 대괄호 [] 로 작성한다.

객체의 속성과는 달리 값만을 작성하면 되고, 쉼표로 이들을 구분한다.

const arr = ["피카츄", "라이츄", "파이리"]

이와 동일한 결과로 다음과 같이도 작성할 수 있다.

const arr = new Array("피카츄", "라이츄", "파이리")

이 두 방법은 타입까지도 동일하기 때문에 new 키워드를 사용하는 방법을 굳이 활용할 필요는 없다.

만들어진 배열의 요소에 접근하기 위해서는 인덱스를 활용할 수 있다.

인덱스 번호는 Java 와 마찬가지로 0 부터 시작하게 된다.

console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

객체와 배열의 큰 차이점은 객체는 속성에 접근하기 위하여 속성 명을 활용하였지만, 배열의 경우에는 속성 명이 아닌 인덱스 번호를 활용하였다는 점이다.

5. Function

함수는 특정한 기능을 수행할 수 있도록 설계된 코드로 JS 에서는 하나의 타입으로 사용된다.

즉, 객체나 배열에도 하나의 타입으로써 추가될 수 있다는 말이다.

const object2 = {num:1, string:'mukom', boolean:true, fn:fn1()}

함수를 정의하기 위해서는 function 키워드, 함수 이름, 소괄호 () 순으로 작성해야 한다.

function fnName(param 1, param 2, param 3) {
}

함수의 선언 부분에 작성된 매개변수는 함수 호출 시에 함께 보내는 인수 값으로,

이는 곧 함수 내부에서 지역 변수로 작동하게 된다.

let x = 10;
console.log(x);

function myFunction() {
let x = 5;
}

console.log(x);

JS 함수는 Java 와 달리 return 과 관련한 내용을 선언부에 작성하지 않는다.

즉, return 에 대한 강제성이 없다는 것이다.

만약 함수의 실행 결과를 return 하고 싶다면 위의 코드에서 return 키워드를 추가하여 어떠한 내용으로 return 할 것인지 명시하면 된다.

let result = myFunction(3, 4);
console.log(result);

result = myFunction(5, 7);
console.log(result);

function myFunction(x, y) {
return x + y;
}

6. Undefined

undefined 는 값이 할당되지 않은 상태 즉, 미정의 상태를 일컫는 하나의 타입이다.

변수에 대한 선언은 마쳤지만, 변수에 어떠한 값도 할당하지 않은 것이다.

let x;
console.log(x);

undefined 도 하나의 타입이기 때문에 변수에 할당할 수도 있는데 이를 할당해서 콘솔로 출력해 보면 다음과 같다.

        let x;
        console.log(x);
        
        x = undefined;
        console.log(x);

이 타입은 '' 과 같은 빈 값과는 다른 형태이다.

        let y = '';

        console.log(typeof x);
        console.log(typeof y);

또한 null 값과도 다른 형태이다.

        let y = null;

        console.log(typeof x);
        console.log(typeof y);