자바스크립트 객체 리터럴 (원시값과 객체를 비교하면?)

자바스크립트는 객체 기반의 프로그래밍 언어인데 원시값을 제외한 나머지는 모두 객체이다. 자바스크립트의 원시값에는 숫자, 문자열, 불리언, null, undefined, 심벌 등이 있고 객체 타입에는 함수, 배열, 정규 표현식 등이 있다.

 

1. 객체 생성 방법

자바스크립트는 클래스 타입의 객체지향 언어가 아니라 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방법을 지원하는데 아래와 같은 방법으로 객체를 생성할 수 있다.

• 객체 리터럴
• Object 생성자 함수
• Object.create 메서드
• 생성자 함수
• 클래스(ES6)

 

이 중에서 가장 흔하게 사용되며 간단하게 객체를 생성할 수 있는 방법은 객체 리터럴을 이용하는 방법이다. 객체 리터럴은 객체를 생성하기 위한 표기법으로 약속된 기호를 사용하여 값을 생성하는데 아래와 같이 생성할 수 있다. 만약 student의 중괄호 안에 아무것도 작성하지 않으면 빈객체가 생성된다.

const student = {
    name: 'Lia',
    sayHello: function () {
    	alert(`Hello, ${name}`);
    }
};

console.log(typeof person) // object
console.log(student) // {name: 'Lia', sayHello: f}

2. 프로퍼티란? (키와 값으로 구성)

객체는 프로퍼티의 집합이라고 할 수 있는데 프로퍼티의 구성요소는 key와 value이다. 즉, 키값과 벨류값으로 구성된 프로퍼티의 집합이 객체라는 것이다.

const student = {
    name: 'Lia',
    gender: 'female',
    age : '27'
}

 

프로퍼티를 나열할 때는 세미콜론이 아닌 쉼표로 구분하며 마지막 프로퍼티 뒤에는 쉼표를 사용해도 되고 사용하지 않아도 된다. 각각의 key 값과 value 값을 작성할 때 한가지 알아두어야할 사항이 있는데 아래와 같은 조건도 지켜줘야한다.

• key 값 : 문자열 또는 심벌 값
• value 값 : 자바스크립트에서 사용 가능한 모든 값

또한, 프로퍼티의 키로 사용하는 값이 식별자 네이밍 규칙을 준수한다면 따옴표를 생략할 수 있지만 식별자 네이밍 규칙을 지키지 않은 값은 따옴표를 생략하지 않고 작성해주어야한다. mathScore은 네이밍 규칙을 준수하여 따옴표를 생략했고, english-score은 식별자 네이밍 규칙을 준수하지 않아 따옴표를 써준 것이다.

const score = {
    mathScore: 95,
    'english-score': 60
};

console.log(student) // {mathScore: 95, english-score: 60}

 

프로퍼티의 키에 문자열이나 심벌 값을 제외한 값을 사용하면 암묵적 타입 변환을 통해 문자열로 자동 변환되는데 아래와 같이 숫자 타입을 사용할 경우 따옴표는 붙지 않지만 암묵적 타입 변환을 통해 문자열로 변환된다. 아래의 예제 역시 프로퍼티의 키 값에 숫자를 넣어줬지만 실제로는 문자열을 의미하게 되는 것이다.

const date = {
    0 : '2022-12-15',
    1 : '2022-12-16',
    2 : '2022-12-17'
}

console.log(date) // {0: '2022-12-15', 1: '2022-12-16', 2: '2022-12-17'}

 

객체를 생성하며 프로퍼티의 키 값을 중복으로 사용하면 나중에 선언한 프로퍼티가 앞서 선언한 프로퍼티를 덮어쓰게 되는데 이 때, 에러가 발생하지 않으니 사용할 때 중복되는 값을 사용하지 않도록 주의해야한다.

const student = {
    name: 'Lia',
    name: 'Minsu'
}

console.log(student) // {name: 'Minsu'}

 

반응형

 

3. 원시 값과 객체 비교

원시 타입(변경 불가능한 값) : string, number, boolean, undefined, null, symbol

• 원시 값은 변경 불가능한 값이기 때문에 값을 직접적으로 변경할 수 없는데 이러한 특성을 불변성이라고 한다.
• 불변성을 갖는 원시 값을 할당한 변수는 재할당으로만 값을 변경할 수 있다.

객체 타입(원시 타입 이외의 변경 가능한 값) : 함수, 객체, 정규표현식 등

• 객체는 변경 가능한 값으로 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다.
• 프로퍼티의 동적 추가, 삭제, 갱신 등의 방법을 사용