객체(Object)

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

1  var minji = {
2    firstName: 'Minji',
3    lastName: 'Kim'
4  };

속성(Property)

객체 안을 보면 firstName과 lastName이 왼쪽에 있고, 'Minji'와 'Kim'이 오른쪽에 있네요. 콤마로 구분되는 것들을 객체의 속성이라고 부릅니다. minji 객체에는 firstName: 'Minji'와 lastName: 'Kim'까지 두 개의 속성이 있는거죠. 속성끼리는 쉼표로 구분해줍니다. 위에서는 보기 좋게 줄 바꿈을 했지만, 꼭 줄바꿈을 해야하는 것은 아닙니다. var minji = { firstName: 'Minji', lastName: 'Kim' }; 처럼 쉼표로 구분되기만 하면 충분합니다.
저를 minji라는 객체로 표현했다고 했죠. 너무 간단한게 마음에 안 드나요? firstName, lastName 외에도 age, height, weight 등의 여러 가지 속성을 더 추가할 수 있겠죠? 자신을 직접 객체로 표현해보세요!

키(Key)와 값(Value)

속성에서 firstName과 lastName 같은 것들을 객체의 키라고 부르고 'Minji'와 'Kim'를 값이라고 부릅니다.(괄호 안의 영어는 외워두시는 게 좋습니다.) 즉, 속성은 키: 값의 관계로 이루어져있죠. 키는 속성명이라고 생각하시면 됩니다.
참고로 키는 문자열만 가능합니다. 또 한가지, 속성명은 따옴표가 없어도 됩니다. 있어도 상관은 없습니다. 위를 보시면 firstName과 lastName은 문자열인데도 따옴표로 안 감싸줬죠? 반드시 따옴표로 감싸줘야 하는 경우도 있습니다. 바로 키에 띄어쓰기가 들어간 경우입니다.

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

위와 같은 경우, wrap 객체의 속성명은 'ex ample'입니다. 이렇게 속성명 안에 띄어쓰기가 들어있을 경우는 따옴표로 감싸줍니다.
속성값은 어떤 값이든지 상관없습니다. 문자열이어도 되고, 숫자여도 되고, 객체여도 됩니다. 아직 안 배웠지만, 객체나 함수여도 상관 없습니다. 미리 알려드리자면, 속성값이 함수인 것을 우리는 메소드라고 특별히 따로 부릅니다.
그렇다면 minji 객체 안에 firstName이나 lastName 속성의 값을 사용하고 싶을 땐 어떻게 할까요? 아까 키가 속성의 이름이라고 했죠? 객체한테 속성의 이름을 부르면 됩니다!

1  minji.firstName; // 'Minji'
2  minji['firstName']; // 'Minji' (이렇게도 가능합니다)
3  minji.lastName; // 'Kim'
4  miinji['lastName']; // 'Kim'

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

1  minji.lastName = 'Kim';
2  minji; // { firstName: 'Minji', lastName: 'Kim' }

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

1  var minji = {
2    body: {
3      height: 100,
4      weight: 100
5    }
6  };
7  minji.body.height; // 100

아까도 말했듯이 객체 안에 속성값으로 객체가 들어갈 수도 있습니다. minji 객체의 속성으로 body가 있는데 그 값이 다시 객체인 겁니다. 객체의 속성에 접근하는 것이니까 마침표를 사용해서 점점 더 안으로 들어가면 됩니다. 객체를 사용해서 복잡한 데이터 구조를 짤 수 있겠죠?
객체의 속성을 삭제하는 방법도 있습니다. 앞에 delete 키워드를 붙이면 됩니다. 위의 예제와 이어집니다.

1  delete minji.body.height;
2  minji.body; // { weight: 100 }

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

1  var miinji = new Object();
2  minji.firstName = 'Minji';
3  minji.lastName = 'Kim';
4  minji.body = new Object();
5  minji.body.height = 100;
6  minji.body.weight = 100;

이렇게 new 라는 키워드를 사용해서 만드는 방법은 중급 강좌 때 알려드리겠습니다. new를 사용하는 방법은 다른 프로그래밍 언어를 배우셨던 분들이라면 보신 적이 있을 겁니다. 그러나 위와 같이 만드는 경우는 거의 없고 그냥 { } 안에 바로 만들어버립니다. 또한 { }를 사용하는 게 권장사항입니다. { }를 사용해서 만든 객체를 객체 리터럴(literal)이라고 부릅니다.
new를 사용하지 않고 만드는 것을 리터럴이라고 부릅니다. 문자열이나 숫자도 사실 new String(), new Number() 이렇게 만들 수 있습니다. 하지만 그러지 않고 그냥 'Minji'나 100처럼 그냥 값을 바로 썼죠? 이런 것이 다 문자열 리터럴, 숫자 리터럴입니다. 문자 그대로의 것들을 의미합니다.
객체 중에는 특수한 객체가 있습니다. 바로 함수(Function)와 배열(Array)입니다.