All'alba vincerò

At dawn, I will win!

Javascript

[JS] 자료형(Data type) & typeof 연산자

나디아 Nadia 2024. 5. 30. 17:14

 

자료형(Data type)

 

 

1. 숫자형(Number)

  • 정수
    한계값: 2**53 -1
  • 소수
  • 특수 숫자값 (Infinity, NaN)
let n = 123;

n = 12.345;

alert("문자열" / 2); // NaN (문자열을 숫자로 나누면 에러)

 

 

 

2. BigInt

: (253-1)(9007199254740991)보다 큰 값 / -(253-1)보다 작은 정수를 표현

  • 정수 리터럴 끝에 n을 붙이면 만들 수 있다.
  • 암호 관련 작업에서 사용
const bigInt = 12n;

 

 

 

3. 문자형(String)

  • 큰따옴표: "Hello"
  • 작은따옴표: 'Hello'
  • 역 따옴표(백틱, backtick): `Hello`

 

* `${Template literals}` 

: 백틱으로 변수/식을 감싼 후 ${…}안에 넣으면 문자열 중간에 변수/식을 넣을 수 있다. (보간법)

let name = "John";

// 변수를 문자열 중간에 삽입
alert( `Hello, ${name}!` ); // Hello, John!

// 표현식을 문자열 중간에 삽입
alert( `the result is ${1 + 2}` ); // the result is 3



 

4. 불린형(Boolean)

  • true
  • false

* 비교 결과를 저장할 때도 사용

let isGreater = 4 > 1; // isGreater에 결과값이 저장됨

alert( isGreater ); // true (비교 결과: "yes")

 

 

 

5. null

: 의도적으로 비워둔 값

  • 어느 자료형에도 속하지 않는 값
  • 객체 X
let age = null;

 

 

 

6. undefined

: 값이 할당되지 않은 상태

  • 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당된다.
  • undefined를 직접 할당하는 걸 권장하진 않는다. (null을 사용하는 것이 좋음)
  • 객체 X

 

 

 

7. 심볼(Symbol)

  • 고유한 대상을 선택할 때 사용
  • 생성자 함수로만 만들 수 있음
const id = Symbol('uuid');
const id2 = Symbol('uuid');

 

 

----- 원시(primitive) 자료형 -----

 

 

 

8. 객체(Object)

  • 복잡한 개체(entity)를 표현
  • 객체를 제외한 다른 자료형은 원시(primitive) 자료형
    배열(array)
    함수(function)
  • 내용의 순서를 고려하지 않음
const obj = {
  name: 'tiger',
  aaa: 'bbb',
  bbb: 'ccc',
};

 

 

 

 

모든 데이터 타입(null, Undefined 제외)은 객체고 생성자 방식으로 만들어지지만, 편의를 위해 String literal로 사용된다.

 

 

✨ 생성자는 해당 데이터 타입의 객체를 만드는 것이고, 그렇게 만들어진 객체는 데이터 타입 생성자 객체의 속성을 가지고 포함된 메소드도 사용할 수 있다.

 


 

객체

{ 키(key): 값(value) }

 

 

객체 접근하기

객체명.키값
const user = {
  name: 'tiger',
  age: 20,
  sum: function (a, b) {
    return a + b;
  },
};

console.log(user.age);

 

 

 

배열

배열명 = [값1, 값2...];

 

 

배열 접근하기

배열명[index]
const arr = [
  10,
  100,
  null,
  undefined,
  'hello',
  { name: 'tiger' },
  function () {},
];

console.log(arr[0]);

 

 

 

함수

function 함수명(매개변수) {
    return  ...
}

 

 

함수 사용하기

함수명(인자);
function plus(a, b) {
  return a + b;
}

plus(1, 2);

 

 

 

✨ 객체 안에 함수를 정의하는 법

  • 객체 안에 함수가 포함된 상태 = 메서드(method)

 

1. nomal function

  • 내부에 prototype 포함
  sayHi: function () {
    return 'hello';
  }

 

 

2. arrow function

  • 내부에 prototype 미포함
  • return this; 시 window가 나옴 ➡ 잘 사용하지 않음
  • 메서드 안에서 함수를 사용할 때는 arrow function 사용
  sayHi2: () => {
    return 'hi';
  }

 

 

3. concies method

  • 자주 사용
  • 가장 가벼운 형태
    내부에 prototype 미포함
  • return this; 시 자신을 가리킴
  sayHi3() {
    return 'hola';
  }

 


 

typeof 연산자

: 인수의 자료형을 문자열로 반환

 

연산자: typeof 인수

함수: typeof(  )

  • null의 자료형은 object(객체)로 나옴
    (그냥 오류, 진짜 객체는 아님)
  • 함수의 자료형은 function(함수)로 나옴
    (함수 ➡ 객체형에 속함)
typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

 


 

 

자료형

 

ko.javascript.info