프로그래밍 스터디( 공부노트 )/Javascript (자바스크립트)

자바스크립트 객체, Object 에 대해서 설명 하겠습니다.

김갤럭시 2024. 7. 25. 19:11
반응형

자바스크립트에서 객체(Object)는 속성(프로퍼티)과 메서드(함수)를 포함할 수 있는 데이터 구조입니다.

객체는 키-값 쌍으로 구성되며, 키는 문자열이고 값은 어떤 타입도 될 수 있습니다.

객체를 쉽게 이해하려면, 실생활에서 쉽게 마주할 수 있는 것과 같이 생각할 수 있습니다.

예를 들어, "자동차"라는 객체는 색상, 모델, 제조사 등의 속성을 가질 수 있고, 운전하거나 멈추는 기능을 메서드로 가질 수 있습니다.

자바스크립트에서 객체를 정의하고 사용하는 방법은 다음과 같습니다:

 

 

 

객체 생성


1. 객체 리터럴을 사용하여 객체를 생성할 수 있습니다.

 
  let car = {
  make: "Toyota",
  model: "Corolla",
  year: 2020,
  start: function () {
  console.log("Car started");
  },
  stop: function () {
  console.log("Car stopped");
  },
};
 


2. 생성자 함수를 사용하여 객체를 생성할 수 있습니다.

 
  function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.start = function () {
  console.log("Car started");
  };
  this.stop = function () {
  console.log("Car stopped");
  };
}

  let myCar = new Car("Honda", "Civic", 2019);
 


클래스를 사용하여 객체를 생성할 수 있습니다 (ES6+).

 
  class Car {
  constructor(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
  }

  start() {
  console.log("Car started");
  }

  stop() {
  console.log("Car stopped");
  }
  }

  let myCar = new Car("Ford", "Focus", 2018);
 

 

 

 

객체 속성에 접근

객체의 속성에 접근하거나 수정하는 방법은 두 가지가 있습니다.

 

1. 점 표기법 (Dot Notation)

 
  console.log(car.make); // Toyota
  car.year = 2021;
  console.log(car.year); // 2021
 


2. 대괄호 표기법 (Bracket Notation)

 
  console.log(car["model"]); // Corolla
  car["year"] = 2022;
  console.log(car["year"]); // 2022
 

 

 

 

객체 메서드 호출
객체의 메서드를 호출하는 방법은 다음과 같습니다

 
  car.start(); // Car started
  car.stop(); // Car stopped

 

 

 

객체의 특성

 

1. 중첩 객체: 객체는 다른 객체를 속성으로 가질 수 있습니다.

 
  let person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York",
    country: "USA",
    },
  };
  console.log(person.address.city); // New York

 

2. 프로토타입 상속: 자바스크립트 객체는 프로토타입 기반 상속을 사용하여 다른 객체의 속성과 메서드를 상속받을 수 있습니다.

 
  function Animal(name) {
    this.name = name;
  }
  Animal.prototype.speak = function () {
  console.log(this.name + " makes a noise.");
  };

  let dog = new Animal("Dog");
  dog.speak(); // Dog makes a noise.


3. 객체 메서드: 객체는 다양한 내장 메서드를 가지고 있습니다.

예를 들어, Object.keys(), Object.values(), Object.entries()는 객체의 키, 값, 키-값 쌍을 배열로 반환합니다.

 
  let keys = Object.keys(car); // ["make", "model", "year", "start", "stop"]
  let values = Object.values(car); // ["Toyota", "Corolla", 2020, ƒ, ƒ]
  let entries = Object.entries(car); // [["make", "Toyota"], ["model", "Corolla"], ["year", 2020], ["start", ƒ], ["stop", ƒ]]

 

자바스크립트에서 객체 (Object)는 데이터를 구조화하고 관련 기능을 그룹화하는 매우 유용한 방법입니다. 이를 통해 복잡한 프로그램을 더 쉽게 관리하고 유지보수할 수 있습니다.

반응형