JavaScript 객체

소개

JavaScript 객체 실습에 오신 것을 환영합니다. 객체는 JavaScript 의 기본적인 구성 요소로, 관련 데이터와 더 복잡한 엔티티의 컬렉션을 저장하는 데 사용됩니다. 객체는 키 - 값 쌍으로 구성되며, 여기서 키는 문자열 (또는 Symbol) 이고 값은 다른 객체나 함수를 포함한 모든 데이터 타입이 될 수 있습니다.

이 실습에서는 다음을 배우게 됩니다.

• 객체 리터럴 (object literal) 구문을 사용하여 JavaScript 객체를 생성하는 방법.
• 객체에 속성 (property, 키 - 값 쌍) 을 추가하는 방법.
• 객체 속성의 값을 접근하고 업데이트하는 방법.
• 기존 객체에 새로운 속성을 추가하는 방법.

모든 작업은 script.js 파일에서 수행하게 됩니다. 코드의 출력을 보려면 브라우저의 개발자 콘솔을 열어야 합니다. Web 8080 탭으로 이동하여 개발자 도구를 열면 됩니다 (일반적으로 마우스 오른쪽 버튼을 클릭하고 "Inspect"를 선택한 다음 "Console" 탭을 클릭합니다).

시작해 봅시다!

중괄호로 객체 리터럴 생성하기

이 단계에서는 첫 번째 JavaScript 객체를 생성합니다. 객체를 생성하는 가장 간단한 방법은 중괄호 {} 쌍을 사용하는 객체 리터럴 (object literal) 구문을 이용하는 것입니다.

먼저, WebIDE 왼쪽의 파일 탐색기에서 script.js 파일을 찾으세요. 파일을 클릭하여 편집기에서 엽니다.

이제 script.js에 다음 코드를 추가하여 car라는 상수 변수를 선언하고 빈 객체를 할당합니다. 또한 console.log()를 사용하여 객체를 콘솔에 출력하여 생성 여부를 확인합니다.

const car = {};

console.log(car);

코드를 추가한 후 파일을 저장하세요. 결과를 보려면 Web 8080 탭을 클릭하세요. 개발자 콘솔을 엽니다 (마우스 오른쪽 클릭 -> Inspect -> Console). 콘솔에 빈 객체 {}가 출력되는 것을 볼 수 있습니다.

객체에 키 - 값 쌍 추가하기

빈 객체는 그다지 유용하지 않습니다. 객체는 데이터를 담기 위한 것이며, 데이터는 속성 (property) 으로 추가합니다. 속성은 키 - 값 쌍입니다. 키는 속성의 이름 (문자열) 이고, 값은 해당 키와 연관된 데이터입니다.

이 단계에서는 객체 생성 시 중괄호 안에서 직접 car 객체에 속성을 추가합니다. 자동차의 제조사 (make), 모델 (model), 연식 (year) 속성을 정의해 봅시다.

script.js의 코드를 다음과 같이 수정하세요.

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

console.log(car);

여기서 make, model, year는 키이고, 'Toyota', 'Camry', 2021은 각각의 값입니다. 문자열 값은 작은따옴표로 묶여 있다는 점에 유의하세요.

파일을 저장하고 Web 8080 탭의 개발자 콘솔을 다시 확인하세요. 이제 속성이 포함된 객체가 출력되는 것을 볼 수 있습니다.

점 표기법으로 속성 접근하기

속성이 있는 객체를 만들었다면, 특정 속성의 값을 검색해야 할 경우가 많습니다. 이를 수행하는 가장 일반적인 방법은 점 표기법 (.) 을 사용하는 것입니다. 구문은 objectName.propertyName입니다.

이 단계에서는 car 객체의 model에 접근하여 콘솔에 출력합니다.

script.js 파일 끝에 다음 줄을 추가하세요. 기존 코드는 그대로 유지해야 합니다.

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

console.log(car);

// Access and log the model property
console.log(car.model);

파일을 저장하고 Web 8080 탭을 새로고침하세요. 개발자 콘솔에 이제 두 줄의 출력이 표시됩니다. 전체 car 객체와 그 뒤에 문자열 Camry가 표시됩니다.

속성 값 할당 업데이트하기

객체 안의 데이터는 고정되어 있지 않습니다. 할당 연산자 (=) 를 사용하여 기존 속성의 값을 쉽게 변경할 수 있습니다. 이는 일반 변수에 값을 할당하는 것과 동일한 방식으로 수행됩니다.

이 단계에서는 car 객체의 year를 2021에서 2022로 업데이트해 보겠습니다.

script.js 파일 끝에 다음 줄을 추가하세요. 속성을 업데이트한 다음 변경 사항을 확인하기 위해 전체 객체를 다시 출력할 것입니다.

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

// Update the year property
car.year = 2022;

console.log(car);

명확성을 위해 이전 console.log 문을 제거할 수 있지만 필수는 아닙니다. 파일을 저장한 후 Web 8080 탭의 콘솔을 확인하세요. 이제 출력에는 year가 2022로 업데이트된 car 객체가 표시됩니다.

기존 객체에 새 속성 추가하기

JavaScript 의 객체는 동적입니다. 즉, 생성된 후 언제든지 새 속성을 추가할 수 있습니다. 구문은 속성을 업데이트하는 것과 동일합니다. 새 속성 이름에 점 표기법을 사용하고 값을 할당합니다.

이 마지막 단계에서는 car 객체에 새 color 속성을 추가합니다.

script.js 파일 끝에 다음 줄을 추가하세요. 이렇게 하면 새 속성이 추가되고 객체를 출력하여 추가를 확인합니다.

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

car.year = 2022;

// Add a new color property
car.color = "blue";

console.log(car);

파일을 저장하고 마지막으로 개발자 콘솔을 확인하세요. 이제 car 객체는 make, model, year 및 새로 추가된 color의 네 가지 속성과 함께 표시됩니다.

요약

JavaScript 객체 실습을 완료하신 것을 축하드립니다! JavaScript 에서 가장 중요한 데이터 구조 중 하나를 다루는 필수적인 작업들을 성공적으로 배우셨습니다.

이번 실습에서는 다음을 연습했습니다:

• 리터럴 구문 ({}) 을 사용하여 객체 생성하기
• 초기 키 - 값 쌍으로 객체 채우기
• 점 표기법 (object.property) 을 사용하여 속성 값에 접근하기
• 기존 속성의 값 업데이트하기
• 동적 객체에 새 속성 추가하기

객체를 이해하는 것은 모든 JavaScript 개발자에게 매우 중요합니다. 간단한 데이터 저장부터 복잡한 애플리케이션 아키텍처에 이르기까지 어디에나 사용되기 때문입니다. JavaScript 프로그래밍의 강력한 기반을 구축하기 위해 이러한 개념을 계속 연습하세요.