(JS) Object

Mirrer·2022년 5월 1일

JavaScript

목록 보기

6/24

객체(Object)란?

객체는 관련된 데이터와 함수의 집합

객체(Object)란 { key, value }형태로 서로 연관있는 속성(property), 행동(method)을 묶어 놓은 일종의 복합데이터다.

key에는 문자열, Symbol타입의 값이 할당 가능하며 value에는 원시, 객체타입 데이터 모두 할당 가능하다.

객체의 사용방법

객체 생성 방법

Object literal { key: value };
new Object();
Object.create();

일반적으로 1번 (Object literal)을 사용하여 객체를 생성한다.

let apple = {
  name: 'apple',
  'hello-bye': 'bye',
  0: 1,
  ['hello-bye']: 'bye bye',
};

객체 속성, 데이터에 접근 방법

**마침표 표기법 (dot notation)** : 대괄호 표기법으로도 접근 가능
**대괄호 표기법 (bracket notation)** : 특수문자를 포함한 key에 접근

// 마침표 표기법
console.log(apple.name); // apple

// 대괄호 표기법
console.log(apple['name']); // apple
console.log(apple['hello-bye']); // bye bye

객체 속성 추가, 삭제

객체는 마침표 표기법을 이용해서 속성을 추가하고 delete키워드를 이용해서 속성을 삭제 한다.

let apple = {
  name: 'apple',
  'hello-bye': 'bye',
  0: 1,
  ['hello-bye']: 'bye bye',
};

// 속성 추가
apple.size = 10;
console.log(apple.size); // 10

// 속성 삭제
delete apple.size; 
console.log(apple.size); // undefined

객체 정적, 동적 접근

객체는 마침표 표기법을 이용해 객체에 정적으로 접근하고 대괄호 표기법을 이용해 객체에 동적으로 접근한다.

const mirrer = {
  name: 'mirrer',
  age: 30,
}

// 코딩하는 시점에, 정적으로 접근이 확정
console.log(mirrer.name); // mirrer

// 동적으로 객체에 접근
const mirrer = {
  name: 'mirrer',
  age: 30,
}

// 동적으로 속성에 접근하고 싶을때 대괄호 표기법 사용
function getValue(obj, key) {
  // 전달받은 객체에 'key'라는 key가 없기 때문에 출력X
  // return obj.key;
  return obj[key];
}

console.log(getValue(mirrer, 'name')); // mirrer

객체 축약

객체의 key, 참조하고 있는 변수명이 같을 때 변수명을 생략할 수 있다.

const x = 0;
const y = 0;

const coordinate1 = { x: x, y: y, };
console.log(coordinate1); // { x: 0, y: 0 }

const coordinate2 = { x, y };
console.log(coordinate2); // { x: 0, y: 0 }

메서드 (Method)

객체의 value값으로 저장된 함수를 메서드라고 부른다.

이 때 메서드가 객체 자신의 속성에 접근하려면 this키워드를 사용해야 한다.

const apple = {
  name: 'apple',
  display: function () {
    console.log(`name: ${this.name}`);
  },
};

apple.display(); // name: apple

생성자 함수

생성자 함수란 특정한 템플릿에 맞게 객체를 생성하는 함수다.

보통 함수명을 대문자로 작성하며 생성자함수 마지막에는 return this; 키워드를 이용해서 객체를 반환한다.

그리고 함수를 new키워드와 함께 전달될 인수를 작성하여 객체를 생성한다.

function Animal(name) {
  this.name = name;
  this.display = () => {
    console.log(`name: ${this.name}`);
  }
  // 생략 가능
  // return this;
}
const dog = new Fruit('dog'); 
const cat = new Fruit('cat'); 

console.log(dog); // Animal { name: 'dog', display: [Function (anonymous)] }
console.log(cat); // Animal { name: 'cat', display: [Function (anonymous)] }

console.log(apple.name); // dog
console.log(orange.name); // cat

console.log(apple.display()); // name: dog
console.log(orange.display()); // name: cat