객체1. 기본 개념

목차

1. 객체란?
2. 객체 생성
3. 객체의 속성/메서드에 접근하기
4. 객체의 속성/메서드 설정하기
5. 속성 부여 시, 괄호 표기법의 특이점

 

 

1. 객체란?

• 객체는 관련된 데이터 또는 함수의 집합
• 객체 내부에서 속성과 메서드라고 불리는 변수와 함수들로 구성됨

 

<참고>
표준국어대사전에서 객체를 검색해보면 '작용의 대상이 되는 쪽'이라고 나온다.
그렇다. 우리가 객체를 쓰는 이유는
앞서 객체의 설명에서 보았듯이, 객체 내부의 속성과 메서드라는 항목들을 통하여 속성값에 특별한 작용을 하기 위해서이다.
(쉽게 말해서, 속성값을 사용하기 위해서 객체를 씀)

이 점을 잘 기억해두면 객체를 이해하는데 큰 도움이 될 것이다.

 

 

자 그럼 다시 본론으로 돌아와서, 일반적인 방법으로 객체를 한번 생성해보자

 

 

2. 객체 생성

• 객체는 속성(properties)과 메서드(methods)를 가질 수 있음
• 객체의 속성과 속성값은 key:value의 형태로 작성됨
• 속성값으로는 문자열, 숫자, 객체, 배열, 함수 등이 작성될 수 있음.
• 메서드는 객체의 속성값이 함수.객체의 속성의 접근하는 방식으로 함수 호출 가능

const person = {
    name: ['Conan',`O'brien`],
    age: 59,
    bio: function() {
        console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
      }
};

 

위의 객체 생성 코드를 한줄한줄 해석해보면 다음과 같다.

1. 객체를 생성해서 person이라는 변수에 담았다.(즉, person이라는 객체 생성)
2. name이라는 속성을 작성 후 속성값을 배열로 작성, 배열의 첫번째 엘리먼트로는 'Conan', 두번째 엘리먼트로는 'O'brien' 할당
3. age라는 속성 작성 후 속성값을 int로 할당
4. bio라는 속성 작성 후 속성값으로 함수 선언문 할당

 

위의 코드를 콘솔창에 찍어보면

다음과 같이 반환된다.

console.log(person);

//{ name: [ 'Conan', "O'brien" ], age: 59, bio: [Function: bio] }

 

자, 그럼 객체를 쓰는 목적에 맞게 객체의 속성에 한번 접근해보자!

 

 

<참고> 객체 생성의 3가지 방법

1. 객체 초기화
2. Object 클래스의 생성자를 이용한 방법(new 키워드를 이용한 방법)
3. Object.create() 메서드를 이용한 방법

 

 

3. 객체의 속성에 접근하기

3-1. 객체의 속성에 접근하는 두 가지 방법

• 점 표기법
• 괄호 표기법

 

3-2. 점 표기법(Dot notation)

• 객체명이 namespace의 역할을 함
• (객체 내부의 속성이나 메서드에 접근하기 위해서는 반드시 객체명이 필요하단 뜻)

 

 

(1) 객체의 속성에 접근해서 속성값 반환

console.log(person.name);	//[ 'Conan', "O'brien" ]

console.log(person.name[0]);		//Conan
console.log(person.name[1]);		//O'brien

console.log(person.age);		//59
console.log(person.bio);		//[Function: bio]
person.bio();		//Conan O'brien is 59 years old.

 

(2) 속성으로서의 객체

• 앞서 말한대로 객체의 속성은 문자열, 숫자, 함수, 배열 등이 될 수 있으며 객체 또한 객체의 속성이 될 수 있다.

 

person 객체의 name 속성의 값을 배열이 아닌 객체로 변경해보자

person.name = {
    first: 'Conan',
    last: `O'brien`
};

console.log(person.name);	//{ first: 'Conan', last: "O'brien" }

 

person객체의 name속성값으로 객체를 할당했고, name 객체의 속성으로 first와 last를 할당했다.

'Conan'과 'O'brien'이라는 데이터에 접근하기 위해서는

객체의 속성에 접근하는 점 표기방식과 동일하게 체인식으로 아래와 같이 작성하면 된다.

console.log(person.name.first);		//Conan
console.log(person.name.last);		//O'brien

 

 

 

 

3-3. 괄호 표기법(Bracket notation)

• 객체의 속성이나 메서드와 관련된 이름을 인덱스로 사용하는 방식
• 배열이 엘리먼트의 값을 숫자로 찾는 것처럼, 객체는 엘리먼트의 값을 문자열로 찾음
• 이 때문에 객체는 결합 배열( associative arrays ) 이라고도 불림

(1) 객체의 속성에 접근해서 속성값 반환

console.log(person['name']);	//[ 'Conan', "O'brien" ]

console.log(person['name'][0]);		//Conan
console.log(person['name'][1]);		//O'brien

console.log(person['age']);		//59
console.log(person['bio']);		//[Function: bio]
person['bio']();		//Conan O'brien is 59 years old.

 

(2) 속성으로서의 객체

person객체의 name속성값으로 객체를 할당했고, name 객체의 속성으로 first와 last를 할당했다.

'Conan'과 'O'brien'이라는 데이터에 접근하기 위해서는

객체의 속성에 접근하는 괄호 표기방식과 동일하게 아래와 같이 작성하면 된다.

person.name = {
    first: 'Conan',
    last: `O'brien`
};

console.log(person['name']['first']);		//Conan
console.log(person['name']['last']);		//O'brien

 

 

4. 객체의 속성/메서드 설정하기

• 위의 점 표기법과 괄호 표기법을 통하여 객체의 속성/메서드에 접근하여 값을 꺼내오는 것 뿐만 아니라,
• 값을 재할당 하거나 새로운 속성/메서드를 작성하여 값을 할달할 수도 있다.

 

4-1. 값 재할당

person.name.last = 'Edogawa'
person.age = 8

console.log(person['name']['last'])		//Edogawa
console.log(person['age'])		//8

 

4-2. 새로운 속성 부여

person['eyes'] = 'brown';
console.log(person.eyes)		//brown


console.log(person)
//	{
//     name: { first: 'Conan', last: 'Edogawa' },
//     age: 8,
//     bio: [Function: bio],
//     eyes: 'brown'
//   }

 

5.  속성 부여 시 괄호 표기법의 특이점

속성 부여 시 점 표기법에서는 불가능한, 괄호 표기법만의 특이점이 존재한다.

• 괄호 표기법에서는 속성명을 동적으로 부여 가능하다.
• (쉽게 말해, 속성을 변수로 부여 가능)

 

텍스트로 읽어서는 곧잘 이해 하기 어려운 부분이므로 코드로 한번 확인해 보자

 

 

5-1. 속성명과 속성값이 될 변수 선언하고 값 할당

const propsName = 'starSign'
const propsValue = 'Taurus'

 

5-2. 속성과 속성값 부여 후 객체 속성에 접근

person.propsName = propsValue
console.log(person.starSign)		//undefined
console.log(person['starSign'])		//undefined

person[propsName] = propsValue
console.log(person.starSign)	//Taurus
console.log(person['starSign'])		//Taurus

 

놀랍게도, 선언한 변수를

• 점 표기 방식으로 속성 부여 시, undefined 값이 나오는 반면
• 괄호 표기방식으로 속성 부여 시, 'Taurus'라는 문자열로 할당한 값이 잘 반환되는 것을 볼 수 있다.