JavaScript | Object (객체)

Ryan·2020년 8월 18일

JavaScript

목록 보기

8/18

객체란 배열과 마찬가지로 여러 데이터를 담을 수 있는 그릇을 얘기한다.
다만 차이점은 자동으로 위치가 지정되는 인덱스와 다르게 직접 키값을 정할 수 있다는 것이다.
객체의 프로퍼티로 함수가 올 수도 있는데, 이러한 프로퍼티를 메서드(method)라고 한다.
우리가 메서드를 직접 만들 수 있다는 것이다.

1. 객체 생성

: 객체를 지정하는 방법은 컬리브 브라켓{}을 사용한다.

const profile = { name: 'ash', old: 35 };

자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체다.
하지만 숫자, 문자열, 불리언과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지게 된다.

const profile = {};
profile['name'] = 'ash';
profile['old'] = 35;

비어있는 객체에 키,값을 추가시키는 방법이다.
아래 프로퍼티에 엑세싱 하는 방법에서 알려주겠지만 profile['name']는 프로필이라는 객체의 name이라는 키에 엑세스 하라는 의미이다.
하지만 name은 존재하지 않는 키값이며 이것에 값을 초기화하면 객체에 새로운 키,값이 추가된다.

const profile = new Object()

비어있는 객체를 만드는 방법으로 const profile = {} 와 같다.

2. 객체 Properties

1) Properties 접근

(1) Dot Notation

: 객체의 프로퍼티에 접근할 수 있는 방법은 .을 이용하는 방법이 있다.

'hello'.length; // Returns 5

우리는 이미 내장된 프로퍼티인 length를 사용해본적이 있다.

let spaceship = {
  homePlanet: 'Earth',
  color: 'silver'
};
spaceship.homePlanet; // Returns 'Earth',
spaceship.color; // Returns 'silver',

.을 이용해서 키에 접근할 수 있다.
객체명.키으로 접근하면 값을 반환한다.

(2) Bracket Notation

: 두번째 프로퍼티(키)에 접근하는 방법은 []을 이용하는 방법이 있다.

let spaceship = {
  'Fuel Type': 'Turbo Fuel',
  'Active Duty': true,
  homePlanet: 'Earth',
  numCrew: 5
};
spaceship['Active Duty'];   // Returns true
spaceship['numCrew'];   // Returns 5
spaceship['!!!!!!!!!!!!!!!'];   // Returns undefined

[''] 스퀘어 브라켓을 이용해서 키에 접근할 수 있다.
객체명['키']으로 접근하면 값을 반환한다.
키에 ''이 없는 경우 ''을 스퀘어 브라켓 안에 넣어서 접근해 주어야 한다.

2) Property 재할당

: 객체는 재할당이 가능하다.

프로퍼티가 이미 존재하는 경우, 이전에 보유하고 있던 값이 무엇이든 대체된다.
존재하지 않는 경우, 새로운 프로퍼티가 추가된다.

const spaceship = {
  'Fuel Type': 'Turbo Fuel',
  homePlanet: 'Earth',
  mission: 'Explore the universe' 
};

변수는 const로 선언할 경우 재할당이 불가능하지만, 객체의 프로퍼티는 변경이 가능하다.

delete spaceship.mission;  // Removes the mission property

delete 로 property를 삭제할 수도 있다.

3. 객체의 Method

: 객체에 저장된 데이터가 함수일 경우 그것을 메서드라고 한다.
프로퍼티는 객체가 가진 것이고, 메서드는 객체가 하는 것이라고 생각하면 편하다.

const MethodTest = {
  newKey: function () { 
    console.log('블라블라')
  }
};

MethodTest라는 객체에 newKey라는 키의 값은 함수가 된다.

const MethodTest = {
  newKey () { 
    console.log('블라블라')
  }
};

ES6부터 콜론과 함수 키워드를 생략할 수 있다.

MethodTest.newKey();

메서드를 호출하는 방법은 함수명.키()로 호출한다.

4. Nested Objects

: 객체 안에는 또 다른 객체를 가질 수 있다.
.과 []을 여러개 사용하여 접근하고 싶은 값을 추출할 수 있다.

5. Object Method

: 객체에는 내장되어 있는 메서드들이 존재한다. 그 종류와 용도를 알아보자.

1) Object.keys(obj)

: 객체가 가진 모든 키값을 배열에 담에 반환하는 메서드

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

형태 : Object.keys(obj)
파라미터 : 반환할 객체 이름
리턴 : 객체가 가진 모든 키값을 배열에 담아 반환

2) Object.entries()

: 키와 값을 모두 배열에 담아 반환하는 메서드

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

형태 : Object.entries(obj)
파라미터 : 열거 가능한 객체
리턴 : [키, 값] 으로 표현되는 배열을 반환

3) Object.assign()

: 하나 이상의 객체로 부터 키-값을 복사할때 사용한다.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);

console.log(target); // output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // output: Object { a: 1, b: 4, c: 5 }

형태 : Object.entries(target, source)
파라미터 : 대상 객체(target), 하나 이상의 출처 객체(source)
리턴 : 대상 객체
대상 객체와 출처 객체에 동일한 키값이 있을 경우 출처 객체의 키값으로 덮어씌여진다.