객체(Object)와 배열(Array)

객체(Object)

객체란 현실의 사물을 프로그래밍에 반영한 것입니다.

var zero = {
	firstName: 'zero',
	lastName: 'cho'
};

간단하게 위의 예시를 보면 zero라는 변수에 {}로 감싼 덩어리가 바로 객체 입니다.

속성(Property)

객체 안을 보면 firstName과 lastName이 왼쪽에 있고, 'zero'와 'cho'가 오른쪽에 있습니다.
zero 겍체에는 firstName: 'zero'와 lastName: 'cho'까지 두 개의 속성이 있습니다. 속성끼리는 쉼표로 구분해 줍니다. age, height, weight 등의 여러 가지 속성을 더 추가할 수 있습니다!

키(Key)와 값(Value)

속성에서 firstName과 lastName 같은 것들을 객체의 키라고 부르고 'zero'와 'cho'를 값이라고 부릅니다. 즉 속성은 키 : 값의 관계로 이루어져 있습니다. 키는 속성명이라고 생각하시면 됩니다.

참고로 키는 문자열만 가능합니다. 또 한가지, 속성명은 따옴표가 없어도 됩니다.

예외로 반드시 따옴표로 감싸줘야 하는 경우가 있는데 바로 키에 띄어쓰기가 들어간 경우 입니다.

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'] 이렇게 따옴표를 꼭 넣어주어야 합니다.

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

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

위와 같이 lastName을 cho에서 Lee로 변경 할 수 있습니다.

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

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

객체의 속성을 삭제하는 방법은 앞에 delete 키워드를 붙이면 됩니다.

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

배열(Array)

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

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

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

var zero = ['zero', 'cho'];

이런 형태가 됩니다. 굳이 키가 필요하지 않고, 값만 많이 나열하고 싶을 때 배열을 사용합니다.

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

zero[0]; // 'zero'
zero[1] // 'cho'

사실 배열도 키가 있습니다. 배열은 자동으로 키가 0,1,2,3,... 순서로 주어집니다.
즉 'zero'값의 키는 0이고, 'cho'의 값의 키는 1입니다.

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

위 두 개가 비슷하다고 볼 수 있습니다🙌