이 문서에서는 자바 스크립트 객체와 관련된 기본적인 문법을 살펴보고 이전 코스에서 학습해서 이미 알고 있는 자바스크립트의 특징들도 다시 복습할 것입니다.  우리가 이미 사용하고 있는 기능들이 이미 객체와 관련되어 있다는 사실을 다시 한번 복습하게 될 것입니다.

선수조건:  컴퓨터와 관련된 기본지식, HTML과 CSS, 그리고 자바스크립트에 대한 기본 지식 ( First steps and Building blocks 참조).
목표: 객체지향 프로그래밍에 대한 기본 이론을 이해하고,  자바스크립트에서 객체가 어떻게 처리되는지 ( 대부분이 객체임 ) 학습 후, 자바스크립트 객체를 실제로 이용하는 방법에 대해 알게되는 것을 목표로 합니다.

객체에 대한 기초

객체는 관련된 데이터와 함수( 일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다 )의 집합입니다. 예제를 통해서 실제 객체가 무엇인지 알아보도록 합시다.

시작하기 앞서, oojs.html 파일의 복사본을 로컬 환경에 만듭니다. 이 파일은  우리가 작성한 소스코드를 포함하는  작은  —  <script> 요소를 포함하고 있습니다.  이 파일은 객체와 관련된 문법을 알아보는 기반이 될거에요. 예제를 제대로  따라하려면  반드시 developer tools JavaScript console 을 열어두고, 몇몇 명령어를 직접 입력할 준비가 되어있어야 합니다.

여타 자바스크립트의 요소들과 마찬가지로, 객체를 생성하는 것은 변수를 정의하고 초기화하는 것으로 시작합니다.  아래의 자바스크립트 코드를  oojs.html 파일의 script tag 사이에  입력하고 저장 한 후, 리로드 해보세요.

var person = {};

이제 JS 콘솔에서 person 을 입력하면 다음과 같은 결과를 보게됩니다:

[object Object]

축하합니다, 당신은 벌써 첫번째 객체를 생성한 것입니다. 하지만 텅 빈 객체여서 우린 이걸로 뭘 할 수는 없겠네요. 자, 이제 이 오브젝트를 다음과 같이 고쳐봅시다:

var person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  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] + '.');
  }
};

저장 후 리로드 한 다음에 아래의 내용을 브라우져의 JS 콘솔에  입력해보세요.

person.name
person.name[0]
person.age
person.interests[1]
person.bio()
person.greeting()

자, 이제 당신은 객체에 포함된 데이터와 함수를 갖게 되었네요. 이제 이것들을 간단하고 멋진 문법을 통해 사용이 가능해졌습니다!.

Note: 만약 여기까지 진행하는데 어려움이 있다면 ,제가 만들어놓은 파일과 비교해보세요 — oojs-finished.html (그리고 see it running live). Live 버젼에서는 텅빈 화면만 보이겠지만,그게 정상입니다 — 다시, 개발자도구를 열고 객체 구조를 들여다보기 위해 위에 언급된 명령어를 입력해보세요

자, 이제 뭘 해볼까요? 객체는 각기 다른 이름(위의 예에서는 name 과 age )과 값(예제에서. ['Bob', 'Smith'] 과32)을 갖는 복수개의 멤버로 구성됩니다.  한 쌍의 이름과 값은 ','로 구분되야 하고, 이름과 값은 ':'으로 분리됩니다.  결국 문법은 아래와 같은 패턴이 됩니다.

var objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
};

객체를 구성하는 멤버의 값은 어떤 것이라도 될 수 있습니다. — 우리가 만든 person 객체는 문자열, 숫자, 배열 두개와 두개의 함수를 가지고 있네요. 처음 4개의 아이템은 데이터 아이템인데, 이걸 객체의 프로퍼티 라고 부른답니다. 끝에 두개이 아이템은 함수인데 이 함수를 통해 데이터를 가지고 뭔가 일을 할 수 있게 됩니다. 이걸 우리는 메소드 라고 부릅니다.

이런 오브젝트는 상수형 객체(object literal ) 라고 부릅니다.— 객체를 생성할 때 상수를 그대로 대입했습니다. 상수형 객체는 클래스로 부터 생성하는 방식과는 다릅니다. 이 방식은 뒤에서 살펴보게 될겁니다.

상수 객체를 사용해서 객체를 생성하는 것은 연속된 구조체나 연관된 데이터를 일정한 방법으로 변환하고자 할 때  많이 쓰이는 방법입니다.  예를 들면 서버에게 주소를 데이터베이스에 넣어달라고 요청하는 경우입니다. 각 아이템들을 하나 하나 개별 전송하는 것보다, 하나의 객체를 전송하는 것이 훨씬 효율적입니다. 또  각 아이템들을 이름을 통해 구분해서 사용하기 원할 때도 배열을 사용하는 것보다 훨씬 쉽습니다.

점 표기법

위에서 이미 우리는 객체의 프로퍼티와 메소를 점 표기법 을 통해 사용해봤습니다. 객체 이름(person) 은  네임스페이스 ( 객체에 포함되어있는 모든 것을 접근하려고 하면 먼저 이게 나와야 합니다. 그 다음 점을 찍고 접근하고자 하는 아이템 이름을 적는거죠 ) 같은 겁니다. 간단한 프로퍼티의 이름일 수도 있을 것이고 배열의 일부이거나 객체의 메소드를 호출할 수도 있습니다.

person.age
person.interests[1]
person.bio()

Sub-namespaces

객체의 속성으로 다른 객체를 갖는 것도 물론 가능합니다. 예를 들면, 다음과 같은 name 속성을 

name: ['Bob', 'Smith'],

아래와 같이 바꿔봅시다.

name : {
  first: 'Bob',
  last: 'Smith'
},

자, 이제 우리는 성공적으로 sub-namespace을 만들었습니다. 이름만 들으면 뭔가 복잡해보이지만, 사실 그렇지도 않죠 —이 속성을 사용하려면 그저 끝에 다른 점을 하나 찍어주기만 하면 됩니다. JS 콘솔에서 아래와 같이 입력해보세요.

person.name.first
person.name.last

중요: 객체의 속성이 바꿨으니까, 기존 메소드 코드를 바꿔 줘야 합니다.  기존 코드를

name[0]
name[1]

아래와 같이 바꿔줘야 합니다.

name.first
name.last

안그러면 기존 메소드는 전혀 동작하지 않을껄요.

중괄호 표기법

객체의 프로퍼티에 접근하는 다른 방법이 있습니다. — 중괄호를 사용하는거죠.  아래처럼 "."을 사용하는 대신

person.age
person.name.first

아래와 같이 하는 거죠.

person['age']
person['name']['first']

이런 방식은 배열 속에 있는 아이템에 접근하는 것와 매우 유사보이고, 실제로도 같은 겁니다 — 아이템의 인덱스를 사용하는 대신, 객체 멤버의 이름을 사용한 것 뿐입니다. 자, 이제 객체가 이따금 associative arrays 라고 불리는 이유를 알겠죠? — 객체는 배열의 멤버와 값들을 매핑하고 있는 것처럼,  이름도 각 값에 매핑하고 있답니다.

객체 멤버 설정하기

지금까지는 객체 멤버를 단순히 가져오기만 해습니다. — 물론 객체 멤버의 값을 설정 (수정) 할 수 있습니다. 아래와 같이 점이나 중괄호 표기법을 사용하면 됩니다. 

person.age = 45;
person['name']['last'] = 'Cratchit';

위의 코드를 입력한 다음, 객체 멤버값을 아래와 같이 다시 확인해봅시다.

person.age
person['name']['last']

객체 멤버를 설정하는 것은 단순히 기존에 존재하는 프로퍼티나 메소드로 값을 설정하는 것 뿐 아니라, 완전히 새로운 멤버를 생성할 수도 있습니다. JS 콘솔에서 아래 내용을 입력해보세요

person['eyes'] = 'hazel';
person.farewell = function() { alert("Bye everybody!"); }

자, 이제 새로운 멤버를 테스트해보세요.

person['eyes']
person.farewell()

중괄호 표현의 잇점 중 하나는 멤버의 값을 동적으로 변경할 수 있을 뿐아니라, 멤버 이름까지도 동적으로 사용할 수 있다는 겁니다. 자, 만약 사용자가 두개의 텍스트 입력을 통해서 people 데이터에 커스텀 값을 넣고 싶어한다고 가정해봅니다. 그 값은 다음과 같이 얻어올 수 있을겁니다.

var myDataName = nameInput.value;
var myDataValue = nameValue.value;

이제   person 객체에 다음과 같이 새 멤버의 이름과 값을 추가할 수 있습니다.

person[myDataName] = myDataValue;

자, 제대로 동작하는지 보려면 아래와 같이   person 객체에 중괄호를 붙여서 확인해보면 됩니다.

var myDataName = 'height';
var myDataValue = '1.75m';
person[myDataName] = myDataValue;

이제 저장하고 리로드후 아래코드를 입력해보세요.

person.height

점 표기법으로는 위의 예제처럼 멤버의 이름을 동적으로 사용할 수 없고, 상수 값만을 사용해야 합니다.

 "this"가 뭐야?

자, 우리가 이제 보게될 메소드가 좀 이상하게 보일 수도 있을겁니다.  예제를 한번 봐주세요

greeting: function() {
  alert('Hi! I\'m ' + this.name.first + '.');
}

아마도 "this"가 뭔지 의아해하고 계시겠죠?. this 키워드는 지금 동작하고 있는 코드를 가지고 있는  객체를 가리킵니다 — 위의 예제에서 thisperson객체겠죠.. 그럼 왜 직접 person 객체를 쓰지 않은걸까요? 앞으로 보게될 Object-oriented JavaScript for beginners 문서에서 우리가 생성자를 공부하게 될 때, 혹은 그것 말고도 기타 등등의 상황에서 this 는 매우 유용하게 사용됩니다. — 이 this라는 녀석은 객체 멤버의 컨텍스트가 바뀌는 경우에도 언제나 정확한 값을 사용하게 해줍니다. (예를 들어. 두개의 다른  person 객체가 각각 다른 이름으로 인스턴스로 생성된 상태에서 인사말을 출력하기 위해 객체의  name을 참조해야 한다고 생각해보세요. ).

간략화된 person 객체를 가지고 설명을 좀 해보겠습니다:

var person1 = {
  name: 'Chris',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

var person2 = {
  name: 'Brian',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

이 예제에서, 메소드의 실제 코드는 완전히 동일하지만 person1.greeting() 은  "Hi! I'm Chris."를 출력합니다. 반면  person2.greeting() 은 "Hi! I'm Brian."을 출력하게 되죠. 앞서 이야기한 것처럼, this 은 실행중인 코드가 속해있는 객체입니다. — 상수 객체를 직접 지정해서 사용하는 경우라면 그리 유용하지 않겠지만,동적으로 객체를 생성하는 경우 (예를 들면 생성자를 사용하는 경우)에 매우 유용합니다. 이 부분은  공부를 좀더 하고, 추후에 더 명확하게 이해될 겁니다.

이미 계속 객체를 사용하고 있었어요

예제코드를 따라하다보니, 이쯤 되면 슬슬 "점" 표기법을 사용하는 것이 꽤  자연스럽게 느껴질 겁니다. 물론 이 코스 내내 사용했기 때문이죠! 샘플에서 사용하였던 브라우저 내장 API나 자바스크립트 객체들은 실제로 우리가 공부했던 구조와 완전히 동일한 방법으로 구현된 것들입니다. 물론 우리가 봤던 예제보다 복잡하기는 할테지만요.

자, 다음과 같이 String의 메소드를 사용했다고 칩시다.

myString.split(',');

String 클래스의 인스턴스가 가진 메소드를 사용하고 있습니다. 코드에서 String을 생성할 때 마다  String 의 인스턴스가 만들어지고 그렇게 만들어진 인스턴스는 당연히 공통적으로 사용할 수 있는 메소드와 프러퍼티를 가집니다.

아래와 같이 도큐먼트 오브젝트 모델(DOM)에 접근할 때 면,

var myDiv = document.createElement('div');
var myVideo = document.querySelector('video');

Document 클래스의 인스턴스를 통해 메소드를 사용하고 있는 겁니다.각 웹페이지가 로딩될 때, ,  Document 인스턴스가 만들어지고 , 전체 웹 페이지 구조와 컨텐츠 그리고 URL같은 기능들을  제공하는  document가 호출됩니다.  다시 말하지만 이건 여러 공통 메소드와 프로퍼티들이 이 인스턴스를 통해 사용가능하게 됩니다.

우리가 계속 사용해왔던 다른 내장 객체/API  — Array, Math나 기타 등등 — 들도 마찬가지입니다

모든 내장 객체/API가 자동으로 객체의 인스턴스를 생성하는 것은 아니라는 것에 주의 하세요. 예를 들어,  Notifications API — 최근 브라우져들이 시스템 알림을 사용하게 하는 기능 — 는 사용자가 발생시시길 원하는 notification만을 선택하게 하는 생성자를 사용해야 합니다. JavaScript 콘솔에 다음 내용을 입력해보세요

var myNotification = new Notification('Hello!');

다음 문서에서 생성자에 대해서 좀더 자세히 알아볼 것입니다.

Note: 객체간 통신은  message passing 방식을 사용한다고 생각하는게 좋습니다— 한 객체가 다른 객체에게 어떤 액션을 요청해야 하는 경우, 그 객체는 다른 객체가 가지고 있는 메소드를 통해서 메세지를 보내는 것이고, 응답을 기다리는 것입니다. 그 응답이라는 것이 우리가 알고 있는 return 값일 뿐인거죠  .

요약

축하합니다 ,첫번째 자바스크립트 객체 설명 문서를 끝까지 읽으셨네요 —이제 당신은 자바스크립트 객체를 어떻게 이용하는지  이해하게 되었습니다 —간단한 사용자 정의 객체를 만드는 방법을 포함해서요. 또 객체는 데이터와 연관된 함수를 저장하는데 매우 유용한 구조라는 것도 알게 되었습니다 — 만약  person 객체가 가지고 있는 모든 프로퍼티와 메소드를 따로 따로 분리된 변수와 함수로 구현하려고 한다면 그것이야 말로 비효율적이고 끔찍한 일이 될겁니다. 변수명과 함수명들이 중복된다거나 하는 일도 비일비재 할 거구요. 객체는 고유의 패키지에 우리의 정보를 안전하게 정보를 보호해주는 역활을 합니다.

다음 장에서는 객체지향(OOP) 이론을 배우고, 자바스크립트에서는 객체지향이 어떻게 사용되었는지 알아볼겁니다.

이번 장에서는

문서 태그 및 공헌자

이 페이지의 공헌자: dsma73
최종 변경: dsma73,