ZeroCho Blog

안녕하세요, 이번 시간에는 자바스크립트 객체(Object)에 대해 알아보겠습니다.

객체(Object)

객체란, 현실의 사물을 프로그래밍에 반영한 겁니다. 코드로 보는게 이해하기 쉽겠죠? 저를 프로그래밍에 반영해서 간단한 코드로 만들어보겠습니다!

var zero = {
  firstName: 'Zero',
  lastName: 'Cho'
};

짜잔, 간단하게 만들었습니다!(너무 간단한가요?) 이게 저를 자바스크립트로 구현한 것입니다. 위와 같이 zero라는 변수에 { }로 감싼 덩어리를 넣었습니다. 바로 이 덩어리가 저를 표현하는 객체입니다. 객체의 부분별 이름을 알려드리겠습니다.

속성(Property)

객체 안을 보면 firstName과 lastName이 왼쪽에 있고, 'Zero'와 'Cho'가 오른쪽에 있네요. 콤마로 구분되는 것들을 객체의 속성이라고 부릅니다. zero 객체에는 firstName: 'Zero'와 lastName: 'Cho'까지 두 개의 속성이 있는거죠. 속성끼리는 쉼표로 구분해줍니다. 위에서는 보기 좋게 줄 바꿈을 했지만, 꼭 줄바꿈을 해야하는 것은 아닙니다. var zero = { firstName: 'Zero', lastName: 'Cho' }; 처럼 쉼표로 구분되기만 하면 충분합니다.

저를 zero라는 객체로 표현했다고 했죠. 너무 간단한게 마음에 안 드나요? firstName, lastName 외에도 age, height, weight 등의 여러 가지 속성을 더 추가할 수 있겠죠? 자신을 직접 객체로 표현해보세요!

키(Key)와 값(Value)

속성에서 firstName과 lastName 같은 것들을 객체의 키라고 부르고 'Zero'와 'Cho'를 값이라고 부릅니다.(괄호 안의 영어는 외워두시는 게 좋습니다.) 즉, 속성은 키: 값의 관계로 이루어져있죠. 키는 속성명이라고 생각하시면 됩니다.

참고로 키는 문자열만 가능합니다. 또 한가지, 속성명은 따옴표가 없어도 됩니다. 있어도 상관은 없습니다. 위를 보시면 firstName과 lastName은 문자열인데도 따옴표로 안 감싸줬죠? 반드시 따옴표로 감싸줘야 하는 경우도 있습니다. 바로 키에 띄어쓰기가 들어간 경우입니다.

var wrap = { 'ex ample': 'wrap' };

위와 같은 경우, wrap 객체의 속성명은 'ex ample'입니다. 이렇게 속성명 안에 띄어쓰기가 들어있을 경우는 따옴표로 감싸줍니다.

속성값은 어떤 값이든지 상관없습니다. 문자열이어도 되고, 숫자여도 되고, 객체여도 됩니다. 아직 안 배웠지만, 객체나 함수여도 상관 없습니다. 미리 알려드리자면, 속성값이 함수인 것을 우리는 메소드라고 특별히 따로 부릅니다.

그렇다면 zero 객체 안에 firstName이나 lastName 속성의 값을 사용하고 싶을 땐 어떻게 할까요? 아까 키가 속성의 이름이라고 했죠? 객체한테 속성의 이름을 부르면 됩니다!

zero.firstName; // 'Zero'
zero['firstName']; // 'Zero' (이렇게도 가능합니다)
zero.lastName; // 'Cho'
zero['lastName']; // 'Cho'

이렇게 접근할 수 있습니다. 마침표를 사용해서 zero 객체 안의 속성들에 접근하는 겁니다. 아니면 [ ] 안에 속성명을 적어서 접근할 수도 있습니다. 하지만 [ ] 안에 적는 것보다는 주로 마침표를 사용합니다. 어쩔 수 없이 [ ] 안에 적어야하는 경우는 위에서처럼 속성명에 띄어쓰기가 들어가 있는 경우입니다. 아까 wrap 객체 안의 'ex ample' 속성에 접근하고 싶을 때는 wrap['ex ample'] 이렇게 접근해야 합니다. 그냥 wrap[ex ample] 하면 오류가 납니다.

객체를 다양하게 활용하는 방법을 살펴봅시다.

zero.lastName = 'Lee';
zero; // { firstName: 'Zero', lastName: 'Lee' }

위와 같이 객체 안의 속성을 바꿀 수도 있습니다.

var zero = {
  body: {
    height: 173,
    weight: 66
  }
};
zero.body.height; // 173

아까도 말했듯이 객체 안에 속성값으로 객체가 들어갈 수도 있습니다. zero 객체의 속성으로 body가 있는데 그 값이 다시 객체인 겁니다. 객체의 속성에 접근하는 것이니까 마침표를 사용해서 점점 더 안으로 들어가면 됩니다. 객체를 사용해서 복잡한 데이터 구조를 짤 수 있겠죠?

객체의 속성을 삭제하는 방법도 있습니다. 앞에 delete 키워드를 붙이면 됩니다. 위의 예제와 이어집니다.

delete zero.body.height;
zero.body; // { weight: 66 }

객체는 다음과 같이 만들 수도 있습니다.

var zero = new Object();
zero.firstName = 'Zero';
zero.lastName = 'Cho';
zero.body = new Object();
zero.body.height = 173;
zero.body.weight = 66;

이렇게 new 라는 키워드를 사용해서 만드는 방법은 중급 강좌 때 알려드리겠습니다. new를 사용하는 방법은 다른 프로그래밍 언어를 배우셨던 분들이라면 보신 적이 있을 겁니다. 그러나 위와 같이 만드는 경우는 거의 없고 그냥 { } 안에 바로 만들어버립니다. 또한 { }를 사용하는 게 권장사항입니다. { }를 사용해서 만든 객체를 객체 리터럴(literal)이라고 부릅니다.

new를 사용하지 않고 만드는 것을 리터럴이라고 부릅니다. 문자열이나 숫자도 사실 new String(), new Number() 이렇게 만들 수 있습니다. 하지만 그러지 않고 그냥 'Zero'나 173처럼 그냥 값을 바로 썼죠? 이런 것이 다 문자열 리터럴, 숫자 리터럴입니다. 문자 그대로의 것들을 의미합니다.

객체 중에는 특수한 객체가 있습니다. 바로 함수(Function)와 배열(Array)입니다.

배열(Array)

var array = [];
var array2 = [1, "Hello", [1,2,3], { hi: 1 }];

배열은 [ ]로 감싸서 나타내고, 객체 리터럴처럼 안에는 무엇이든지 다 들어갈 수 있습니다. 배열 안에 배열이 들어가도 되고, 배열 안에 객체가 들어가도 됩니다. 아직 안 배웠지만 함수도 들어갈 수 있습니다. 배열 안에 들어간 것들을 우리는 요소(item)이라고 부릅니다. 객체의 속성처럼 쉼표로 구분하면 됩니다.

다른 프로그래밍 언어를 배우셨던 분들을 위해 한 가지 알려드리자면, 자바스크립트는 배열의 길이를 미리 정할 필요가 없습니다. 안의 요소에 따라 자동으로 늘어나거나 줄어듭니다.

객체와의 차이점은 키가 없다는 거죠. 그냥 값들만 순서대로 나열되어 있습니다. 아까 zero 객체를 생각해보세요. 거기서 키만 없으면,

var zero = ['Zero', 'Cho'];

이런 모양이 되는 겁니다. 굳이 키가 필요하지 않고 값만 많이 나열하고 싶을 때 배열을 사용합니다. 

배열 안의 요소를 선택하려면 뒤에 몇 번째 요소인지 숫자를 붙여주면 됩니다. 자바스크립트에서는 0이 첫 번째입니다. 따라서 [0]을 붙이면 첫 번째 요소 Zero가 선택되고, [1]을 붙이면 두 번째 요소 Cho가 선택됩니다.

zero[0]; // 'Zero'
zero[1]; // 'Cho'

사실 배열도 키가 있습니다. 한 문단만에 말이 바뀌어서 죄송합니다. 배열은 자동으로 키가 0, 1, 2, 3, ... 순서로 주어집니다. 즉 'Zero' 값의 키는 0이고, 'Cho' 값의 키는 1입니다. 위에서 요소를 선택한 원리가 바로 이거죠. 키를 통해 배열의 요소를 선택한 겁니다.

zero['firstName']; // 'Zero'

아까 객체는 [ ]안에 속성 이름을 넣어서 값을 불러오는 방법도 있었죠? 그와 비슷합니다. 어떻게보면

var array = ['hi', 'js', 123];
var object = {
  0: 'hi',
  1: 'js',
  2: 123
};

위의 두 개가 비슷하다고 볼 수도 있습니다. 다만, 배열은 객체보다 몇 가지 추가적인 기능들을 제공합니다. 그 기능은 배열 강좌에서 알려드리겠습니다. 또한 배열이 아닌 일반 객체도 배열과는 다른 기능들이 몇 개 있습니다.

배열도 역시 다음과 같이 만들 수도 있습니다.

var array = new Array();
array[0] = 1;
array[1] = 'Hello';

하지만 위와 같은 방법보다는 그냥 [ ] 안에 넣는 것을 자주 사용합니다. 그리고 [ ]를 사용하는 게 권장사항이기도 합니다. new를 사용하지 않고 [ ]만 사용해서 만든 배열을 배열 리터럴이라고 부릅니다. 객체 리터럴 같은 겁니다.

객체와 배열은 특성상 대부분의 프로그래밍 언어에 있습니다. 이들은 나중에 배울 자료구조와 알고리즘의 기본이기도 합니다. 

마지막 객체로는 함수가 있습니다. 함수는 객체나 배열보다 더 중요하기 때문에 다음 강좌에서 따로 설명드리겠습니다!