자바스크립트의 데이터 타입

동적언어 자바스크립트

자바스크립트는 동적타입이 있는 동적 언어입니다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 및 재할당이 가능하다는 점이 다른 언어와의 가장 큰 차이점인데요. (필자는 이것 때문에 많이 헷갈렸음.. 자바랑 너무 달라)

<JavaScript>

let foo = 42; // foo는 이제 숫자입니다
foo = "bar"; // foo는 이제 문자열입니다
foo = true; // foo는 이제 불리언입니다

<Java>

public class Main {
    public static void main(String[] args) {
        // 숫자형 변수
        int fooInt = 42;
        
        // 문자열 변수
        String fooString = "bar";
        
        // 불리언 변수
        boolean fooBoolean = true;
        
        // 각 변수를 사용하여 출력
        System.out.println("Integer value: " + fooInt);
        System.out.println("String value: " + fooString);
        System.out.println("Boolean value: " + fooBoolean);
    }
}

위 예시처럼 자바는 정적 타입 언어로 변수 타입을 컴파일 타임에 명시적으로 선언해야하며, 변수의 타입을 실행 중에 변경할 수 없는데요. 이와 달리 자바스크립트는 동적 언어이기 때문에 유동적으로 타입을 변환할 수 있다는 특징을 가지고 있습니다. 이 부분을 이해하는 것이 매우 아주 가장 중요합니다.

 

자바스크립트에서는 데이터 타입이 크게 두 가지 범주로 나눌 수 있습니다: 원시 데이터 타입(Primitive Data Types)과 객체 데이터 타입(Object Data Types). 원시 데이터 타입은 단일 값으로 구성되며 불변(immutable)합니다. 객체 데이터 타입은 복잡한 데이터 구조를 표현할 수 있습니다.

1. 원시 데이터 타입 (Primitive Data Types)

원시 데이터 타입은 불변한 값을 가지며, 변수에 저장된 값 자체를 변경할 수 없습니다.

1. 숫자 (Number)
   • 설명: 정수와 부동 소수점을 포함하는 데이터 타입입니다. 자바스크립트에서는 Number 타입 하나만을 사용하여 모든 숫자를 표현합니다.
   • 예시:

      let num = 42;
      let pi = 3.14;

   • ⭐중요: 자바스크립트는 NaN (Not-a-Number)과 Infinity 같은 특별한 숫자 값도 지원합니다.
2. 문자열 (String)
   • 설명: 텍스트를 표현하는 데이터 타입입니다. 문자열은 작은따옴표('), 큰따옴표("), 또는 백틱(`)으로 감싸서 생성합니다.
   • 예시:

      let name = 'John';
      let greeting = "Hello, World!";
      let template = Hello, ${name};

   • ⭐중요: 템플릿 리터럴(백틱을 사용하는 문자열)은 문자열 내에서 변수 삽입과 멀티라인 문자열을 지원합니다.
3. 불리언 (Boolean)
   • 설명: 참(true) 또는 거짓(false) 두 가지 값만 가지는 데이터 타입입니다. 논리 연산에서 주로 사용됩니다.
   • 예시:

      let isTrue = true;
      let isFalse = false;

   • ⭐중요: 불리언 값은 조건문에서 자주 사용되며, 다른 데이터 타입을 불리언으로 변환할 수 있는 방법이 있습니다 (예: Boolean(0)은 false).
4. undefined
   • 설명: 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다. undefined는 자바스크립트에서 자동으로 할당되는 기본값입니다.
   • 예시:

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

   • ⭐중요: undefined와 null은 비슷해 보이지만, undefined는 값이 아직 정의되지 않았음을 의미하고, null은 의도적으로 "값이 없음"을 의미합니다.
5. null
   • 설명: 의도적으로 "값이 없음"을 나타내기 위해 사용되는 데이터 타입입니다. null은 객체가 존재하지 않거나 아직 초기화되지 않은 상태를 표현합니다.
   • 예시:

     let x = null; //개발자가 의도적으로 null을 넣은 것
     let y; //개발자가 의도하진 않았지만 자동으로 undefined가 할당된 것

   • ⭐중요: undefined와 null의 차이점은 둘다 값이 없다는 뜻이나 JS에서는 개발자가 명시적으로 "빈 값"을 할당할 때 null을 사용하며, 타입 검사에서 null은 객체로 간주됩니다.
6. 심볼 (Symbol)
   • 설명: 고유하고 변경 불가능한 값을 생성하는 데이터 타입입니다. 주로 객체의 프로퍼티 키로 사용됩니다. 다른 프리미티브 값과 다르게 symbol 함수를 호출해서 사용합니다.
   • 예시:

     const symbol1 = Symbol('1');
     const symbol2 = Symbol('1');
     console.log(symbol1 === symbol2); // false

   • ⭐중요: 심볼은 객체의 프로퍼티 키로 사용되며, 다른 심볼과 절대 중복되지 않습니다.
7. 빅인트 (BigInt)
   • 설명: 매우 큰 정수를 표현하기 위한 데이터 타입입니다. Number 타입이 표현할 수 있는 범위를 넘어서는 큰 정수를 다룰 때 사용됩니다.
   • 예시: const bigInt = 1234567890123456789012345678901234567890n;
   • ⭐중요: BigInt는 Number와의 연산에서 호환되지 않으므로, 혼합 사용 시 주의가 필요합니다.

2. 객체 타입(Object Types)

객체 타입은 다양한 데이터 구조를 표현할 수 있습니다. 대표적인 객체 타입은 다음과 같습니다:

• Object
  • 키와 값의 쌍으로 이루어진 데이터 구조를 나타냅니다.
  • 예: let obj = { name: "Alice", age: 25 };
• Array
  • 순서가 있는 데이터의 집합을 나타냅니다. 배열은 인덱스를 통해 접근할 수 있습니다.
  • 예: let arr = [1, 2, 3, 4, 5];
• Function
  • 실행 가능한 코드 블록을 나타냅니다. 함수는 객체로 취급됩니다.
  • 예: function greet() { return "Hello"; }

템플릿 리터럴(Template Literals)

템플릿 리터럴은 문자열을 다룰 때 더 강력하고 유연한 방법을 제공해주는데요. 백틱(`)을 사용하여 문자열을 정의하며, 변수와 표현식을 포함할 수 있습니다.

let name = "Alice";
let age = 25;
let message = `Name: ${name}, Age: ${age}`;
console.log(message); // "Name: Alice, Age: 25"

⭐중요: 템플릿 리터럴은 문자열 내에 변수나 표현식을 삽입할 수 있어 코드 가독성을 높이고 문자열 조작을 간편하게 해줍니다.

타입 확인

자바스크립트에서는 typeof 연산자를 사용하여 변수의 타입을 확인할 수 있습니다:

let num = 0;
console.log(typeof num); // "number"

⭐중요: 자바스크립트에서 숫자 0은 number 타입이며, falsy로 평가되어 조건문에서 false로 처리됩니다. 모든 데이터 타입이 truthy 또는 falsy로 평가될 수 있음을 이해하는 것이 중요합니다

자주 실수하는 조건문에서 동작 방법!! (나의 경험담)

자바스크립트에서 if 문은 조건을 평가할 때, 조건이 truthy(참으로 평가되는 값)인지 falsy(거짓으로 평가되는 값)인지에 따라 동작하는데요. 이때 숫자 0은 값이 없다고 판단한답니다...!?!

 

예를 들어 아래와 같은 상황이 있을때 무슨 값이 출력될까요?

let zero = 0;
console.log(typeof zero); // "number"

if (zero) {
  console.log('zero is here!');
} else {
  console.log('there is no zero');
}

정답은 'there is no zero' 입니다.

 

• console.log('Hello');는 "Hello"를 출력합니다.
• let zero = 0;은 변수 zero에 0을 할당합니다.
• console.log(typeof zero);는 zero의 타입을 출력하며, "number"가 출력됩니다.
• if (zero)는 zero의 값이 0이므로, 조건을 평가할 때 0은 falsy로 평가됩니다

0처럼 자바스크립트에서는 falsy로 포함되는 값들이 몇가지 있는데요.

• 0
• "" (빈 문자열)
• null
• undefined
• NaN
• false

이 부분을 꼭 짚고 넘어가셔야 코딩할 때 실수하지 않을 수 있습니다.

저의 경우는 회사에서 디버깅할 때 rotate가 있을때만 left, top을 보정해주는 조건문이 있었는데 0일때만 0은 조건문을 타지 않는다는 것을 몰랐거든요. 그래서 각도가 0일 때만 그 조건문을 타지 않아 0일때 left와 top이 0이었던 것이었어요.. 조건문에서 rotate를 제거만 해주면 되었던 일인데 이걸 몰라서 엄청 헤맸네요 ㅠㅠ

⭐중요: 자바스크립트에서 0을 포함한 위 값들은 falsy 값으로 간주되며, if 문에서 falsy 값은 false로 평가되어 else 블록이 실행됩니다.