Language/JavaScript

[JS] 타입과 객체

혬수 2024. 2. 28. 23:59

자바스크립트의 값은 원시 타입(Primitive Type)과 객체(참조형)으로 나뉜다.

 

📍 원시 타입

하나의 값만 가지며, 불변 데이터이다.

종류로는 Number, String, Boolean, Null, Undefined, Symbol, BigInt 타입이 있다.

 

Number

숫자를 표현하는 타입

정수, 실수 구분 없이 숫자 타입 하나만 존재

 

cf) NaN (Not a Number)
: 숫자로 변환할 수 없는 값을 숫자로 변환하려고 하거나, 산술 결과가 숫자가 아닌 경우 반환

 

String

텍스트를 표현하는 타입

홑따옴표(''), 쌍따옴표(""), 백틱(``)을 이용해 표현

 

  • 이스케이프
    : 텍스트 데이터로 홑따옴표, 쌍따옴표를 사용할때 역슬래시( \ ) 문자로 이스케이프 처리해 사용
const message = 'I\'m a test message';

 

  • 템플릿 리터럴
    : ES2015 이후 등장
    : 변수나 상수 조합에 사용 `${}`
const lang = 'JavaScript';
const sentence = `Hello, ${lang}`;

 

Boolean

true, false 값만 가지며, 참과 거짓을 표현할 때 사용

 

Null 과 Undefined

  • null : 값이 없음
  • undefined : 값이 할당되지 않음

값이 비어있다 == 값이 없다, 할당되지 않았다

 

Symbol

ES2015에서 도입된 원시 타입으로, 데이터의 유일함을 나타낼 때 사용

Symbol() 함수를 호출해 생성 (단, 원시 타입이므로 new 키워드 붙이지 않음)

객체나 클래스에서 유일한 프로퍼티 만들때 사용

const sym1 = Symbol('foo');
const sym2 = Symbol('foo');

console.log(sym1 === sym2); // false
  • 전역 심볼
    : Symbol.for() 메서드
    : 인자로 전달받은 키를 갖는 심볼을 전역 심볼 레지스트리에서 탐색 후 반환
    : 탐색 실패시, 해당 키로 심볼 생성 후, 전역 심볼 레지스트리에 저장

 

BigInt

ES2020에서 추가된 타입

기존 숫자 범위보다 큰 정수를 표현하기 위해 등장

정수 뒤에 n 또는 BigInt() 함수 호출

 

❗️숫자 타입이나 Math 객체의 메서드를 함께 사용해 연산할 수 없음 → 명시적으로 타입 변환 필요

const bigNum = 1n;
const num = 2;

console.log(bigNum + num); // TypeError: Cannot mix BigInt and other types, use explicit conversions

 

 

📍 객체

원시 타입을 제외한 나머지 타입

함수, 배열, 정규식 등도 객체에서 파생된 특수한 타입이다.

 

생성 방법

  • Object 생성자 함수
    : 객체를 생성하도록 자바스크립트에 내장된 생성자 함수
const obj = new Object();

 

  • 객체 리터럴
    : 중괄호 {} 사용하여 객체 생성 → 가장 많이 쓰임
const obj = {};

 

  • 생성자 함수
    : 함수를 선언하고 new 키워드로 호출하여 생성자 함수로 동작 → 새로운 객체 생성
function Animal(type) {
    this.type = type;
}

const dog = new Animal('Dog');

(단, 화살표 함수는 생성자 함수로 사용할 수 없다.)

 

 

객체 프로퍼티 접근

자바스크립트 객체는 생성된 후에도 동적으로 프로퍼티 추가하거나 갱신 가능

 

  • 점 표기법 또는 대괄호 표기법으로 접근
const obj = {};

obj.name = 'test'; // 점 표기법
obj['age'] = '23'; // 대괄호 표기법

 

  ❗️단, 변수를 사용해 프로퍼티에 접근하거나, 프로퍼티 명에 연산자가 포함된 경우는 반드시 대괄호 표기법 사용

const obj = {};

const prop = 'name';
obj[prop] = 'test';
obj['test-age'] = '23';

 

  • getter와 setter 접근자 프로퍼티
    : 어떤 프로퍼티에 접근할 때마다 동적인 계산이 필요하거나 별도의 처리 코드가 필요할 때 사용

    1. 객체 리터럴 문법 사용 → get / set 문법
    : 메서드 안에서 this키워드가 객체 자신을 가리키므로 객체의 프로퍼티에 접근 가능
    2. Object.defineProperty() 
    : 객체에 직접 새로운 프로퍼티 정의하거나 수정 후, 그 객체 반환
    : 프로퍼티 서술자
// 객체 리터럴 - get/set 문법 사용
const obj = {
    myCount: 0,

    get getCount() {
        return this.myCount;
    },
    // value가 null이 아니고 0보다 클 경우 값을 갱신
    set setCount(value) {
    	if(value && value > 0){
        	this.myCount = value;
        }
    }
}

obj.setCount = -2;
console.log(obj.getCount); // 0

 

// Object.defineProperty() 사용
const obj = { myCount : 0 };

Object.defineProperty(obj, 'count', {
    get(){
        return this.myCount;
    },
    set(value){
        if(value && value > 0) {
            this.myCount = value;
        }
    },
});

obj.count = 10;
console.log(obj.count); // 10

 

++ 참고

 

 

 

 

저작자표시 (새창열림)