상세 컨텐츠

본문 제목

객체

웹 < 프론트앤드 >/자바스크립트

by 코린’s 2023. 4. 25. 22:17

본문

728x90
반응형

자바스크립트의 객체란?

자바스크립트 객체는 속성과 메서드를 포함하는 데이터 집합체입니다.

객체는 중괄호({})를 사용하여 정의하며, 각 속성은 쉼표로 구분된 이름-값 쌍으로 정의됩니다.

예를 들어, 다음과 같이 객체를 정의할 수 있습니다.

let person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  },
  sayHello: function() {
    console.log('Hello!');
  }
};
  1. 위 예제에서 person은 객체이며, name, age, address, sayHello는 person 객체의 속성입니다.
  2. name, age는 문자열과 숫자 값을 갖고 있으며, address는 다른 객체를 값으로 갖습니다.
  3. sayHello는 함수를 값으로 갖고 있으며, 이러한 함수를 메서드라고 합니다.
  4. 객체는 변수에 저장될 수 있으며, 객체의 속성에 접근하기 위해서는 점(.) 또는 대괄호([]) 표기법을 사용할 수 있습니다.
  5. 예를 들어, person.name은 John을 반환하며, person['age']는 30을 반환합니다.
  6. 메서드를 호출하기 위해서는 속성 이름 뒤에 괄호를 붙이면 됩니다.
  7. 예를 들어, person.sayHello()는 Hello!를 출력합니다.

여러 자료를 한꺼번에 담는 객체 

외우자  Object!

객체를 왜 사용하는가 ?

 

자바스크립트에서 객체는 매우 유용한 데이터 구조 중 하나입니다.

객체를 사용하면 다양한 타입의 값을 하나의 변수에 저장하고, 그 값을 손쉽게 조작할 수 있습니다.

객체는 속성과 메서드를 포함하는데, 속성은 다른 변수의 값이나 다른 객체를 포함할 수 있습니다.

따라서 객체를 사용하면 복잡한 데이터를 효율적으로 관리하고, 코드의 가독성과 유지보수성을 높일 수 있습니다.

 

예를 들어, 웹 애플리케이션에서는 대개 DOM 요소들을 객체로 표현합니다. 이렇게 객체로 표현하면 각 요소의 속성과 메서드에 접근하여 요소를 조작할 수 있습니다. 또한, 서버와 통신할 때도 자바스크립트 객체를 사용하여 데이터를 구조화하고 전송할 수 있습니다.

객체는 또한 상속, 다형성, 캡슐화 등의 객체 지향 프로그래밍의 개념을 구현하는 데 중요한 역할을 합니다. 객체는 자바스크립트에서 매우 중요한 개념이므로, 자바스크립트를 배울 때 객체를 잘 이해하고 활용하는 것이 중요합니다.


객체의 종류

  1. 내장 객체(Built-in Objects) - 자바스크립트에서 기본적으로 제공하는 객체
    • 예: Object, Array, String, Number, Boolean, Math, Date, RegExp 등
  2. 호스트 객체(Host Objects) - 자바스크립트가 내장되어 있는 호스트 환경에서 제공하는 객체
    • 예: Window, Document, XMLHttpRequest, setTimeout, setInterval 등
  3. 사용자 정의 객체(User-defined Objects) - 개발자가 직접 만든 객체
    • 예: 자신이 만든 함수, 객체 리터럴로 생성한 객체 등
  4. DOM 객체(Document Object Model Objects) - 웹 페이지의 HTML, XML 등 문서의 구조를 표현하는 객체
    • 예: document, Element, NodeList, HTMLCollection 등
  5. BOM 객체(Browser Object Model Objects) - 브라우저의 창, 화면 등을 제어하는 객체
    • 예: window, screen, location, history, navigator 등

객체의 속성과 메서드

객체는 다양한 속성과 메서드를 가지고 있습니다. 이 속성과 메서드를 사용하여 객체를 다루거나, 객체의 정보를 조회할 수 있습니다.

객체의 속성은 객체의 상태를 나타냅니다. 이 속성은 객체의 프로퍼티(Property)라고도 합니다. 객체의 메서드는 객체가 제공하는 기능을 나타내며, 함수(Function) 형태로 구현됩니다. 메서드는 객체 내부에서만 사용할 수 있는 함수입니다.

다음은 객체의 속성과 메서드에 대한 예시입니다.

// 객체 생성
const car = {
  brand: 'Toyota',
  model: 'Prius',
  year: 2021,
  drive: function() {
    console.log('The car is driving.');
  }
};

// 객체 속성 조회
console.log(car.brand); // 'Toyota'
console.log(car.year); // 2021

// 객체 메서드 호출
car.drive(); // 'The car is driving.'

위 예시에서는 car 객체를 생성하고, brand, model, year 속성을 설정하고, drive 메서드를 정의했습니다. 이후에는 .을 사용하여 속성에 접근하거나, 메서드를 호출할 수 있습니다.

객체의 속성과 메서드는 다양한 종류와 형태를 가지고 있으며, 객체마다 구성이 다를 수 있습니다. 따라서 객체를 다룰 때는 객체의 속성과 메서드를 먼저 파악하고, 필요한 정보를 조회하거나 작업을 수행할 수 있도록 코드를 작성해야 합니다.

 


자바스크립트는 객체기반의 언어이다.

 

자바스크립트는 객체 기반(Object-based) 언어입니다. 이는 자바스크립트의 모든 값이 객체나 원시값(primitive value) 중 하나이며, 객체는 일종의 사전(딕셔너리)과 비슷한 형태로 키-값 쌍으로 구성된다는 것을 의미합니다.

 

자바스크립트에서 객체는 다양한 속성(Property)과 메서드(Method)를 가지고 있으며, 속성은 이름(key)과 값(value)으로 구성됩니다. 객체를 생성할 때 중괄호({})를 사용하여 객체 리터럴(Object literal)을 만들거나, new 키워드를 사용하여 생성자 함수(Constructor function)를 호출하여 객체를 생성할 수 있습니다.

 

객체 기반 언어의 특징 중 하나는 상속(Inheritance)입니다. 자바스크립트에서도 상속을 지원하며, 프로토타입(Prototype)을 이용하여 구현합니다.

 

또한, 자바스크립트에서는 함수도 객체이므로, 함수를 일급 객체(First-class object)로 취급합니다. 이는 함수를 변수에 할당하거나, 인자로 전달하거나, 함수를 반환하는 등의 다양한 작업을 수행할 수 있게 해줍니다.

 

따라서, 자바스크립트에서는 객체를 중심으로 개발이 이루어지며, 객체를 다루는 기술과 패턴이 중요합니다.

 

 

* 메서드(Method)는 객체(Object)가 가지고 있는 동작이나 행위를 나타내는 함수(Function)입니다.

 

728x90
반응형

'웹 < 프론트앤드 > > 자바스크립트' 카테고리의 다른 글

화살표 함수  (0) 2023.05.17
javascript underscore 언더스코어  (0) 2023.05.16
원시자료형과 참조 자료형  (0) 2023.05.01
배열  (0) 2023.04.24
자바스크립트 - 변수와 데이터 타입  (0) 2023.03.10

관련글 더보기