[Javascript] Object란?

이름·2021년 12월 26일

JS

목록 보기

1/1

이 게시글은 https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics, 모던 자바스크립트 Deep Dive(이웅모 저) 를 참고하여 작성되었습니다.

자바스크립트에서 객체(Object)란 key 와 value 쌍으로 이루어진 프로퍼티들의 순서가 없는 집합입니다. 세 가지 방법으로 만들 수 있는데요.

1. Object 형성방법

1-1. 객체 리터럴

let or const 를 사용하여 생성하는 방식입니다. 변수를 선언하고, 중괄호를 이횽해 오브젝트를 할당합니다.

let object1 = {};

1-2. object 생성자 함수

new 라는 연산자를 이용한 방식인데요. 사실 아직 객체 리터럴과의 차이점은 잘 모르겠어요. 하지만 이것도 let 이나 const를 사용하여 선언하는 방식입니다.

let object2 = new Object();

생성자 함수란 new 키워드와 함께 객체를 생성하고 초기화하는 함수를 의미한다고 합니다. 이렇게 형성된 객체를 인스턴스라고 하며, 생성자 함수는 일반 함수와는 달리 대문자로 쓰여집니다.

1-3. 생성자 함수

function Object(key1, key2) {
this.key1 = value1;
this.key2 = value2}

let person1 = new Object('value1', 'value2')
let person2 = new Object('value1', 'value2')

생성자 함수를 통한 object 만들기는 나중에 class를 다루면서 다시 이야기하도록 하겠습니다.

2. object의 기본 형태

let object = {
key1: value1,
key2: value2,
.
.
.}

object는 위와 같이 key: value의 한 쌍으로 구성되며, 각 쌍은 쉼표로 구분됩니다. 모든 값은 중괄호{}로 묶이게 됩니다.

3. value의 종류

key는 문자열이나 심볼만을 사용할 수 있지만, 밸류로는 모든 값을 사용할 수 있습니다.
string, number 같은 data, null이나 undefined도 가능합니다. array나 object같은 데이터의 집합도, 심지어 함수도 가능합니다. 함수의 경우는 특별히 프로퍼티가 아닌 메소드라고 칭합니다.

4. value 값 불러오기

MDN에서 제시된 object 예시를 가져와서 사용합니다.

const person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  lovers: {girl:'lena', boy:'gregory'}
  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};

console.log(person)을 찍어보면 다음과 같이 리턴됩니다.

{name: Array(2), age: 32, gender: 'male', interests: Array(2), bio: ƒ, …}

4-1. string, number type

person.age 혹은
person['age'] 로 불러올 수 있습니다. 대괄호[]를 사용해서 호출할 경우, key 값은 꼭 ''따옴표(혹은 큰따옴표)로 감싸주어야 합니다.

4-2 array type

person.name[0] 혹은 person['name'][0]으로 호출할 수 있습니다. array의 순서를 []대괄호로 감싸서 불러주어야 합니다.

4-3 object type

person.lovers.girl 혹은 person.lovers.boy 처럼, array를 호출하듯이 부르지만 순서 대신 key 값을 부르면 됩니다. 마찬가지로 person['lovers']['girl']과 같은 대괄호 호출방식도 가능합니다.

4-4 function type(method)

위의 데이터로 주어진 값들을 프로퍼티라고 불렀던 것과 달리, 객체의 value가 함수형일때 그것은 메서드라는 새로운 이름을 갖습니다. 'person'이라는 예시에서는 bio와 greeting이 있습니다.

console 창에서 person.bio 라고 호출했을 경우에는

ƒ () {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  }

처럼 함수에 대한 정보를 리턴합니다.
반면 person.bio() 라고 호출한 경우에는 실제로 알럿 함수가 실행됩니다.

5. property 수정/추가

예시로 사용된 밥 스미스의 시간을 조금 더 빨리 돌려볼까요?

person.age= 45;

위와같이 선언된 변수에 재할당을 하는 것 만으로 오브젝트의 값은 변경될 수 있습니다. 심지어 person이 const로 선언된 오브젝트인데도 말이에요. key-값 쌍을 추가하는 것도 가능합니다. 밥 스미스씨가 한국에 오신다면 원하든 원하지 않든 한살을 더 먹게 된다고 가정해봅시다.

person.koreanAge = function() {return this.age +1;}

이제 person.koreanAge()를 실행하면 46이라는 값을 리턴받을 수 있습니다.

6. this

사실 위의 koreanAge key를 보시면, 리턴 안에 person.age +1 이 아닌 this.age +1 이라고 적혀있는 것을 볼 수 있습니다.
this란, object 내부에서 자신을 감싸고 있는 object를 지칭할 때 사용됩니다. 생성자 함수나 클래스를 통해 오브젝트를 찍어낼 경우에, this를 사용하는 것이 유연한 활용에 용이합니다.

7. Object.keys() , Object.values(), Object.entries()

위 세 함수를 통해 우리는 각각 키, 값, 키-값 페어를 배열의 모양으로 반환받을 수 있습니다. 엔트리의 경우 키-값의 2개짜리 배열들의 배열을 반환받지만, 어쨌거나요.

또 배열에서 For-in 문을 사용했듯이, 객체 내에서도 for in 문을 사용할 수 있는데요.

i 대신 key 를 넣어주면 됩니다.

이름