자바스크립트의 객체

원시 타입을 배웠으니 이제는 객체(참조 타입)를 배울 차례입니다. 원시 타입과 어떤 점들이 다를까 생각하면서 읽다보면 쉽게 이해하실 수 있을겁니다.

객체란?

---

객체는 영어로 object라고 합니다. 뜻을 찾아보면 물건, 물체라고 적혀있죠. 가령 이 글을 읽고 계시다면 휴대폰이나 컴퓨터를 이용하고 있겠죠? 휴대폰을 예로 들어 보겠습니다. 휴대폰은 물건입니다. 휴대폰의 색은 흰색, 휴대폰의 길이는 15cm, 제조사는 삼성, 홈버튼을 누르면 기본화면으로 돌아가는 등 하나의 물체 안에 여러가지 속성과 기능이 있습니다. 자바스크립트의 객체도 변수(휴대폰) 안에 속성(색깔, 길이, 제조사)과 기능(홈버튼을 누르면 기본화면으로 돌아감)들이 들어 있는 것입니다. 

객체 선언하기 

객체는 {}(중괄호)를 적고 그 안에 키라는 속성명을 적고 :(콜론)을 적고 값을 적어주시면 됩니다. 여러개의 키와 값들을 적어주실 땐 ,(쉼표)로 구분해주시면 됩니다. 아직 배우지 않았지만 객체에는 함수를 넣어줄 수도 있습니다. 객체 안에 들어있는 함수를 메소드라고 합니다. 함수를 배울 때 이부분은 다시 언급하도록 하겠습니다. 객체의 경우 키에는 문자열만 들어올 수 있습니다. 그리고 값엔 함수를 포함한 모든 데이터 타입을 다 넣을 수 있습니다. 

키에는 문자열만 들어올 수 있다는 것을 잊지마세요. 

키에 문자열만 들어갈 수 있다면 color나 height, brand와 같은 속성들이 따옴표로 감싸있어야 하는데 왜 적지 않았냐고 궁금하신 분들도 있겠죠? 키에는 당연히 문자열만 들어가야 하기 때문에 자동적으로 문자열로 인식합니다.

객체 불러오기

객체가 만들어지면 객체 전체를 항상 갖고올 필요가 없습니다. 필요한 정보가 있다면 그 정보만 골라서 가져오면 됩니다. 

cellphone.color;
cellphone["color"];

객체를 불러오는 방법은 두가지가 있습니다. 하나는 객체명.속성명으로 불러오는 방법이고, 또 하나는 객체명["속성명"]으로 불러오는 방법입니다. 아직 정의되지 않은 값을 불러온다면 어떻게 될까요? 자바스크립트는 이럴 때 오류를 내는 것이 아니라 "undefined"를 반환합니다.

cellphone.cost; //undefined 반환
cellphone.cost = "100만원";

그리고 위의 소스코드처럼 등호를 적고 값을 할당해 준다면 기존에 있던 속성이면 값이 수정되고, 없던 속성이면 새로운 값이 추가됩니다. 

객체를 불러올 때 주의사항

객체를 불러올 때 .(점)을 이용하시도 되고, []를 이용하셔도 되지만 대괄호만 이용하셔야 할 때가 있습니다. 위에서 키 값엔 당연히 문자열만 들어가야 하니 자동으로 문자열이라 인식한다고 말씀드렸죠? 키 값으로 123이라고 적고 값을 주었어도 에러가 나지 않았을 겁니다. 하지만 그럴경우 cellphone.123이라는 형태로 값을 불렀다면 에러가 날 것 입니다. 이때는cellphone["123"]이라고 값을 불러오면 에러가 나지 않습니다.

직접 만들어보면서 연습해보세요. 빨리 기본적인 것들을 다 포스팅하고 같이 또 재밌는 것들을 만들어 보고 싶네요.

공감은 제작자에게 큰 힘이 됩니다.