자바스크립트 - 객체(Object), 배열(Array)

객체(Object)

 

객체란, 현실의 사물을 프로그래밍에 반영한 거다. 코드로 보는 게 이해하기 쉽겠지? 

나를 프로그리맹에 반영해서 간단한 코드로 만들어보자!

 

바로 이게 나를 자바스크립트로 구현한 것이다. 위와 같이 heo라는 변수에 { }로 감싼 덩어리를 넣었다.

바로 이 덩어리가 나를 표현하는 객체이다. 객체의 부분별 이름을 살펴보자!

 

속성(Property)

 

객체 안을 보면 firstName과 lastName이 왼쪽에 있고, 'inhaeng'과 'Heo'가 오른쪽에 있다.

콤마로 구분되는 것들을 객체의 속성이라고 부른다. heo 객체에는 firstName: 'inhaeng'과 lastName:'Heo'까지 두 개의 속성이 있다.

속성끼리는 쉼표로 구분해준다. 위에서는 보기 좋게 줄 바꿈을 했지만, 꼭 줄바꿈을 해야 하는 것은 아니다. 

var heo = { firstName: 'inhaeng', lastName:'Heo'}; 처럼 쉼표로 구분되기만 하면 충분하다.

 

나를 heo라는 객체로 표현했다고 했는데 너무 간단한게 마음에 들지 않는다면 age, height, weight 등 여러가지 속성을 더 추가할 수 있다. 자신을 직접 객체로 표현해보자!

 

키(key)와 값(value)

 

속성에서 firstName과 lastName같은 것들을 객체의 키라고 부르고 'inhaneg'과 'Heo'를 값이라고 부른다.

(괄호 안의 영어는 외워두는게 좋다.) 즉, 속성은 키:값의 관계로 이루어져있다. 키는 속 성명이라고 생각하면 된다.

 

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

 

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

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

 

속성 값은 어떤 값이든지 상관없다. 문자열이어도 되고, 숫자여도 되고, 객체여도 된다. 아직 안 배웠지만, 객체나 함수여도 상관없다.

미리 말하자면 속성 값이 함수인 것을 우리는 메서드라고 특별히 따로 부른다.

 

그렇다면 heo 객체 안에 firstName이나 lastName 속성의 값을 사용하고 싶을 땐 어떻게 할까?

아까 키가 속성의 이름이라고 했다. 객체한테도 속성의 이름을 부르면 된다!

 

이렇게 접근할 수 있다. 마침표를 사용해서 heo 객체 안의 속성들에 접근하는 거다. 

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

 

객체를 다양하게 활용하는 방법을 살펴보자

 

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

 

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

 

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

 

 

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

 

배열(Array)

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

 

자바스크립트는 배열의 길이를 미리 정할 필요가 없다. 안의 요소에 따라 자동으로 늘어나거나 줄어든다.

 

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

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

 

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

 

heo[0]; // 'inhaneg'

heo[1]; // 'heo'

 

사실 배열도 키가 있다. 배열은 자동으로 키가 0,1,2,3,... 순서로 주어진다. 즉 'inhaeng' 값의 키는 0이고, 'heo'값의 키는 1이다. 위에서 요소를 선택한 원리가 바로 이거다. 키를 통해 배열의 요소를 선택한 것이다.

아까 객체는 []안에 속성 이름을 넣어서 값을 불러오는 방법도 있다. 그와 비슷하다.

어떻게 보면 

 

하지만 위와 같은 방법보다는 그냥 [] 안에 넣는 것을 자주 사용한다. 그리고 []를 사용하는 게 권장사항이기도 하다.

new를 사용하지않고 []만 사용해서 만든 배열을 배열 리터럴이라고 부른다. 객체 리터럴 같은 거다.

 

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

 

마지막 객체로는 함수가 있다. 함수는 객체나 배열보다 더 중요하기 때문에 다음에 설명한다.