자바스크립트 객체

객체는 함수를 기반으로 존재하는 것이다. 

객체를 설명하기 위해서는 많은 말들이 필요할 수도 있다. 

하지만 처음이니깐 느낌만 알아도 충분하다. 

 

객체는 하나의 묶음이다. 

코드를 극단적으로 생각했을 때 몇천만줄이 될 수도 있다. 근데 반복되는 A 가 100마리라면? 그리고 이 A가 A' 라는 행동을 50회 반복을 한다면? 이걸 일일히 다 써주는 거는 효율과는 거리가 멀다. 이런 상황을 위해 '객체'라는 그룹핑이 필요한 거다. 

 

또 생각을 해보자. 

1억 줄 안에 새로운 함수를 만든다고 생각해보자. 근데 그 함수가 1억 줄 안에 존재하지 않다고 확신하는 게 쉬울까? 쉽지 않다. 이와 같은 상황을 해결하기 위해 또 객체가 존재하는 것이다. 

 

만약 머리의 색깔을 바꾸는 함수를 만든다고 생각해보자.

함수 이름은 'changeColor()' 라고 했다. 

 

근데 좀 이따 보니 옷 색깔도 바꾸고 싶다. 'changeColor()'... 는 이미 앞에서 썼다!

 

'그럼 대상을 앞에 써줘야겠다!' 라고 생각이 들거다. 

 

그래서 머리 색을 바꾸는 함수를 'hairChangeColor()' 로 하고 

옷 색깔 바꾸는 함수는 'ClothChangeColor()' 로 바꾸어 줬다. 

근데 이게 몇 백, 몇 천개가 된다면...? 생각만 해도 끔찍하지 않은가.

그래서 여기 객체를 추가하게 된다. 

대학교 3학년이지만 객체의 개념을 이해하기는 쉽지 않았다. 

어쨌든 코드는 다음과 같이 바뀔거다.

 

객체

hair.changeColor();

Cloth.changeColor();

 

어떤가? 알아보기도 편하고 동작의 의미도 쉽게 파악할 수 있다. 

똑같은 거 같다고?? 

아니다. 

만약 옆집에 사는 동생의 강아지의 털 색깔을 바꾼다고 생각해보자.

객체로 만들지 않는다면 다음과 같아진다. 

 

nextHomeSisterPuppyHairColorChange();

 

딱 봐도 이해가 되지 않는다. 

객체를 잘 사용하면 다음과 같이 코드를 짤 수 있다. 

 

nextHome.Sister.Puppy.Hair.ColorChange();

 

옆집 동생의 강아지의 머리의 색을 바꾸는구나! 

훨 눈에 잘 들어온다.(진짜다). 

 

생각해보니 document.querySelector(); ...

맞다. document는 객체다. querySelector()는 이 객체 안에 속한 함수인거다. 

 

그럼 객체에 대해 배워보자

객체에 아무렇게나 박아넣으면 될까?

 

안된다. 그거는 어지럽고 우리가 생각하는 정리를 위한다는 객체의 목적과 맞지 않다. 

즉 이름표같은 걸 붙여서 저장을 해주어야한다. 

 

 

객체를 생성해주자. 

 

위 코드는 'info'라는 객체를 생성하고 'PNU'를 'school' 이라는 이름표로 저장한거고 'wholeworldisblue' 라는 것을 'name'이라는 이름표에 저장한 것이다. 이를 화면에 나타내고 싶으면 다음과 같이 하면 된다. 

 

 

 

 

이걸 화면에 나타내면 다음과 같이 나타나는 것을 볼 수 있다. 

 

 

여기서 성별이라는 정보를 추가하고 싶으면 이런 식으로 쓰면 된다. 

info.sex = "W";

 

만약 띄어쓰기를 쓰고 싶다면 . 을 그대로 사용할 수 없기 때문에 아래와 같이 해준다. 

info["hair color"] = "blue";

불러올때도 동일하게 해주면 된다. 

document.write("hair color :" + info["hair color"] +"<br>");

 

 

 

이 객체 정보를 다 출력하고 싶을때는 어떻게 할까?

 반복문을 쓰면 된다. 

검색을 하니 for(variable in object) ... 라고 적혀져있다. 

객체의 :을 중심으로 왼쪽은 key 오른쪽은 value 라고 한다. 'key : value' 

for 문 을 보면 key 값을 도는 거다. 

이해하기 힘들 수 있으니 이를 실행하면 다음과 같다. 

키 값이 다 나오는 걸 볼 수 있다.

그럼 value 는 어떻게 출력할까?

info[key] 로 write() 쪽을 변형시키면 가능하다. 

 

 

 

객체는 다양한 형식을 담을 수 있다.

문자열, 정수, 그리고 배열도 가능하다. 

메소드를 추가해보자.

 

 객체에 소속된 함수를 메소드라고 하고 속성들을 프로퍼티라고 한다.