리스트(list)는 데이터를 저장하는 데 유용한 자료구조지만, 하나의 대상에 대한 여러 속성을 함께 담아야 할 때는 다소 불편합니다. 예를 들어 쿠키 가게에서 판매하는 모든 쿠키의 정보를 저장한다고 생각해 보세요. 이름, 가격, 재고 등 속성마다 별도의 리스트를 만들어야 하므로 코드가 복잡해지고 관리하기 어려워집니다.
바로 이럴 때 객체(object)가 빛을 발합니다. 객체를 사용하면 데이터를 '이름(name):값(value)' 쌍으로 저장할 수 있어서, 애플리케이션에 저장된 데이터에 라벨을 붙여 체계적으로 관리할 수 있습니다.
이 가이드에서는 JavaScript 객체가 무엇인지, 그리고 실제 코드에서 어떻게 활용할 수 있는지 살펴보겠습니다. 객체 생성, 수정, 삭제 방법까지 차근차근 알아봅니다.
JavaScript 객체란?
객체는 JavaScript의 기본 데이터 타입 중 하나입니다. 객체는 0개 이상의 이름과 값이 한 쌍을 이루어 구성되며, 각 이름은 값에 대한 라벨 역할을 합니다. 따라서 객체 안의 특정 값에 접근하고 싶다면 해당 값의 라벨만 참조하면 됩니다. 이때 이름은 흔히 '키(key)'라고도 불립니다.
값에는 문자열, 숫자, 심지어 다른 객체까지 어떤 타입의 데이터든 담을 수 있습니다. 또한 값에는 프로퍼티(property)와 메서드(method)가 포함될 수 있는데, 메서드란 특정 객체에 적용되는 함수를 의미합니다.
이처럼 키와 값이 서로 매핑되어 하나의 '키:값(key:value)' 쌍을 이루는 것이 JS 객체의 핵심 구조입니다.
참고로 JSON(JavaScript Object Notation)은 바로 이 JavaScript 객체 개념을 바탕으로 만들어졌습니다. JSON은 JavaScript와 약간의 차이가 있지만, 두 데이터 구조 모두 이름:값 쌍 방식으로 데이터를 저장한다는 공통점이 있습니다.
객체 생성 방법
JavaScript에서 객체를 생성하는 방법은 크게 두 가지입니다. 객체 생성자(object constructor)를 사용하는 방법과 객체 리터럴(object literal)을 선언하는 방법입니다.
객체 생성자는 'new' 키워드를 사용해 새로운 객체를 만듭니다:
const cookie = new Object();
이렇게 하면 값을 추가할 수 있는 빈 객체가 생성됩니다. 객체 리터럴 방식은 단순히 중괄호 한 세트로 객체를 선언하는 방법입니다:
const cookie = {};두 예제 모두 빈 객체를 생성한 것입니다. 실제 JavaScript 애플리케이션에서는 이 두 방식이 혼용되어 사용되지만, 객체 리터럴 방식이 문법이 간결해서 더 널리 쓰이는 편입니다. 중괄호만 작성하면 되니까요.
데이터를 포함한 객체를 만들려면 객체 리터럴 문법을 다음과 같이 활용할 수 있습니다:
const raspberry_white_choc = {
name: "Raspberry White Chocolate Chip",
price: 1.50,
available: true,
stock: 42
}이 객체에는 네 개의 이름과 값이 들어 있습니다. 예를 들어 'price'라는 라벨에는 부동소수점 숫자 1.50이 연결되어 있고, 'available'이라는 라벨에는 불리언(boolean) 값 true가 연결되어 있습니다.
객체 값 읽는 방법
지금까지 객체를 생성하는 방법을 알아봤는데, 내용에 접근할 수 없다면 객체는 큰 의미가 없겠죠. 객체의 내용을 읽는 방법은 두 가지입니다. 점 표기법(dot notation, .)과 괄호 표기법(bracket notation, [])입니다.
예를 들어 라즈베리 화이트 초콜릿 칩 쿠키의 이름을 가져오고 싶다면 다음 코드를 사용할 수 있습니다:
console.log(raspberry_white_choc.name);
이 코드는 "Raspberry White Chocolate Chip"을 반환합니다. 객체 이름인 'raspberry_white_choc' 뒤에 점(.)을 붙이고, 그다음 값을 가져오고 싶은 프로퍼티 이름을 적었습니다. 객체와 프로퍼티 이름 사이에 점이 있기 때문에 '점 표기법'이라고 부르는 것입니다.
괄호 표기법으로도 객체를 읽을 수 있습니다:
console.log(raspberry_white_choc["available"]);
이 코드는 true를 반환합니다. 괄호 표기법은 객체 이름 뒤에 가져오고자 하는 값의 이름을 대괄호로 감싸서 지정하는 방식입니다. 이때 값의 이름은 반드시 따옴표로 감싸야 합니다.
객체 수정 방법
객체를 수정하는 방법은 세 가지로 나눌 수 있습니다:
- 객체에 새 항목 추가하기
- 기존 객체 항목 변경하기
- 객체에서 항목 삭제하기
앞서 살펴본 쿠키 예제를 통해 하나씩 알아보겠습니다.
객체에 항목 추가하기
리스트와 달리 객체에는 push()나 append() 같은 함수가 없습니다. 대신 할당 연산자(=)를 사용해 프로퍼티에 새 값을 할당하기만 하면 됩니다.
예를 들어 객체에 'gluten_free'(글루텐 프리 여부)라는 값을 추가하고 싶다면 다음 두 문장 중 하나를 사용할 수 있습니다:
// 괄호 표기법 사용 raspberry_white_choc["gluten_free"] = false; console.log(raspberry_white_choc.gluten_free); // 점 표기법 사용 raspberry_white_choc.gluten_free = false; console.log(raspberry_white_choc.gluten_free);
두 코드 모두 다음과 같은 결과를 출력합니다:
false false
두 예제 모두 객체에 'gluten_free'라는 새 항목을 만들고, 그 값으로 false를 할당한 것입니다.
기존 객체 항목 변경하기
객체의 내용을 변경하는 방식은 새 값을 할당하는 방식과 동일합니다. 두 경우 모두 할당 연산자를 사용해 객체를 수정합니다.
라즈베리 화이트 초콜릿 칩 쿠키 레시피를 글루텐 프리로 바꿨다고 가정해 보겠습니다. 다음 코드로 객체의 'gluten_free' 항목을 변경할 수 있습니다:
raspberry_white_choc.gluten_free = true; console.log(raspberry_white_choc.gluten_free);
이 코드는 true를 반환합니다. 물론 괄호 표기법을 사용해도 같은 결과를 얻을 수 있습니다.
객체에서 항목 삭제하기
'delete' 키워드를 사용하면 객체에서 프로퍼티를 제거할 수 있습니다. 다음 코드는 객체에서 'gluten_free' 프로퍼티를 삭제합니다:
delete raspberry_white_choc.gluten_free; console.log(raspberry_white_choc);
실행 결과는 다음과 같습니다:
{ available: true, name: "Raspberry White Chocolate Chip", price: 1.5, stock: 42 }출력 결과에서 'gluten_free'가 더 이상 보이지 않죠? delete 키워드로 해당 프로퍼티를 제거했기 때문입니다.
마무리
JavaScript 객체 구조를 활용하면 서로 연관된 데이터를 손쉽게 저장할 수 있습니다. 이번 글에서는 쿠키 가게의 쿠키 정보를 객체에 저장하는 예제를 통해 객체의 생성, 읽기, 수정, 삭제 방법을 살펴봤습니다. 같은 원리로 사용자 계정, 베이커리 레시피, 일정 관리 데이터 등 다양한 정보를 객체로 저장할 수 있으니 직접 활용해 보시기 바랍니다.