본문 바로가기

WEB/JavaScript

10일차 : 객체

반응형

10일차 : 객체

 

이번에 배울 내용은 객체(object)입니다. 객체는 엄청 어렵대요 ㅠㅠ

프로그래밍에는 큰 산이 두개가 있는데, 하나는 함수 하나는 객체라고 합니다.

 

객체는 함수와 전혀 다른 개념이 아니라, 함수라는 기반 위에 존재하는 것입니다.

객체는 정말 다양한 얼굴을 갖고 있는데, 전반적인 것을 한번에 이해하려고 하기 보다는, 우선 하나의 객체의 특성, 존재 이유, 기능을 살펴보면서 객체가 무엇인지 알아가 봅시다.

 

객체의 존재 이유 중 하나는 바로 정리정돈입니다.

함수의 존재 이유도 바로 정리정돈이었죠. 중복되는 코드가 많아짐에 따라 이를 정리정돈하기 위해 함수를 배웠습니다.

그런데 함수가 많아지면 어떻게 될까요? 함수뿐만 아니라 함수와 연관되어 있는 변수들이 엄청나게 많아지면요?

이런 상황에서 서로 연관된 함수와 변수를 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구가 바로 객체입니다.

 

만약 비슷한 함수를 여러개 만든다고 하면, 내가 이런 함수를 만들었는지, 중복되는 이름으로 설정하지는 않았는지 헷갈릴 수 있습니다. 매우 복잡한 페이지나 다른 사람과 함께 작업하는 코드라고 하면 더더욱 함수가 겹칠 확률이 높아집니다.

 

이런 상황에서 사용하라고 만들어 놓은 것이 바로 객체입니다.

객체는 마치 폴더와 같습니다. 파일이 무수히 많은데 폴더가 없다면 정리를 하지 못해 파일 하나를 찾는데도 엄청 오랜 시간이 걸릴 것입니다. 정리정돈을 위해 폴더라는 상자를 만들고, 파일들을 각 상자에 맞게 넣어주면서 드라이브를 정리할 수 있죠. 이야기가 너무 길어졌는데 우선 객체를 만들어 봅시다.

 

 

객체의 쓰기와 읽기

 

우선 object라는 파일을 하나 만든 후에, coworkers라는 객체를 생성해 봅시다.

상자 안에 각각 포지션과 이름을 매칭해서 정리를 해줍니다.

프로그래머에는 egoing, 디자이너에는 leezche를 넣어줄게요.

 

 

자, 이렇게 써놓은 객체는 어떻게 읽을 수 있을까요?

document.write을 이용해 객체를 나타내 봅시다.

객체 안의 아이템은 마치 폴더 안의 파일을 나타내듯, 온점(.)을 사용하여 표시할 수 있습니다.

훨씬 정렬되어 보이죠?

 

 

만약 내용(데이터)을 추가하고 싶으면, 같은 형식으로 짝을 지어 매칭해주면 됩니다.

만약 이름에 띄어쓰기나 .을 넣고 싶은 경우에는 대괄호[]를 사용하면 됩니다.

 

 

이렇게 bookkeeper와 data scientist가 추가되었습니다.

자 이렇게 객체를 생성하는 법, 객체 안에 데이터를 넣는 법, 객체의 데이터를 가져오는 법을 살펴보았습니다.

 

 

객체와 반복문

 

객체와 반복문이라니.. 객체에서 반복문은 어떤 상황에서 필요할까요?

반복문은 노가다를 하는 것이었는데요. 간혹 생성된 객체에 어떤 데이터가 있는지를 모조리 가져와야 하는 경우가 생깁니다. 바로 이럴 때, 반복문을 이용하면 됩니다.

 

반복문은 for ... in 을 이용해서 만들 수 있습니다.

 

 

여기서 key를 coworkers[key]로 바꾸면, 그 안의 내용이 나옵니다.

 

 

이를 활용해서, key와 coworkers[key]를 함께 적으면 아래와 같이 한번에 모든 내용을 표시할 수 있습니다.

 

 

이렇게 객체의 데이터를 순회하는 방법을 살펴봤습니다.

 

 

프로퍼티와 메소드

 

객체 안에는 문자를 넣을 수도, 숫자를 넣을 수도, 배열을 담을 수도 있습니다.

모든 것을 담을 수 있기 때문에 함수도 담을 수 있죠!

 

방금 사용한 반복문을 객체 안에 넣어보겠습니다.

 

 

이렇게 하면 만약 객체 이름이 coworkers 말고 다른 것으로 변경될때마다 함수를 수정해야 합니다.

따라서 coworkers를 this로 변경해 줍시다.

 

 

그런데 결과를 보면, 마지막에 showAll이 표시가 되죠.

함수라도 객체 안에 들어 있는 것은 마찬가지라서, 객체 안의 모든 내용을 보여줄 때 함께 등장하는 것입니다.

이를 없애려면 for 문 안에 if로 이 함수를 제거할 수도 있지만, 이런 어려운 내용은 지금 필요하지 않으니 넘어가겠습니다.

 

이렇게 객체에 소속된 함수를 메소드라고 하고, 객체에 소속된 변수들은 프로퍼티라고 합니다.

맥락에 따라서 같은 것도 부르는 이름이 조금씩 다릅니다.

 

처음이면 이해 못하는 것이 당연하다고 합니다.

오늘은 여기까지 하고 다음시간에 객체의 활용으로 넘어가겠습니다.

반응형