{SFB} Javascript day 13 - 객체

● 객체(object)

 

객체라는 것은 함수라는 개념과 대립되는 개념이 아니고 함수라는 기반 위에 객체라는 것이 존재하는 것이라고 생각하면 된다.

 

객체라는 개념은 엄청 광범위하다. 여기에서는 그 중에서 한면만 공부하는 것으로 생각하자.

바로, 정리 정돈의 수단으로서의 객체이다.

프로그래밍을 하다 보면 코드가 많아지고, 코드가 많아지면 잘 정리 정돈하기 위해 함수라는 것을 쓴다. 그리고 함수뿐만 아니라 연관돼 있는 변수가 엄청나게 많아지면 역시나 똑같이 복잡도의 한계에 도달하게 됩니다. 바로 그러한 상황에서 서로 연관된 함수와 변수를 같은 이름으로 그루핑해서 잘 정리 정돈하기 위한 도구를 객체라고 생각하면 된다.

 

우선 우리가 했던 코드들을 중복된 부분을 함수로 만들어서 적용시킨 결과를 보자.

이렇게 중복되는 코드를 함수로 만들어서 그 함수를 사용하여 간결하게 만들 수도 있다. 이러한 작업도 방법이긴 하지만 js를 만든 사람들은 이런 경우에도 사용하라고 객체(object)를 만들었다.

 

즉, 서로 연관된 함수와 변수를 그루핑해서 정리 정돈하기 위한 수납상자로서 객체라는 것이 존재한다는 것이다.

우선 맛보기를 위해 객체를 도입한다면 객체를 사용하는 쪽의 코드는 어떻게 바뀌는가에 대해 살짝 알아보자.

객체를 사용하는 쪽의 코드는 body라는 객체와 links라는 객체가 있다면 body.  ,  links. 라는 객체를 사용하여 정리할 수 있는 것이다.

 

만약 객체를 사용하지 않는다고 하면, 저장장치에 디렉터리가 없는 것으로 비유할 수 있는데 음.. 즉 엄청나게 많은 파일의 이름을 서로 중복되지 않도록 파일의 이름을 길게 만들어야 되는 일이 생기게 되는 것이다.

하지만 디렉터리나 폴더가 있다면 연관된 것끼리 묶어서 파일을 정리 정돈할 수 있게 되는 것이다.

 

조금 쉽게 생각해서 객체라는 것이 폴더라는 관점으로 생각해도 된다.

또한, 우리가 여태 사용했던 코드 중 document.이라는 것이 있는데 이것 또한 객체인 것이다.

document.querySeletor() 의 형태를 보면 querySeletor() 라는 것이 document 라는 객체에 속한 함수라는 것을 알 수 있다.

그리고 객체에 속한 함수는 함수라고 하지 않고 메서드(method)라고 부른다.

 

이제부터 예제를 통해 조금 자세히 살펴보자.  

 

정보의 양이 많아졌을 때 서로 연관된 정보를 정리 정돈하기 위한 도구는 바로 배열이였다. 

배열은 순서에 따라 정리 정돈된다는 특징이 있다. 그리고 인덱스를 통해 각 순서에 맞게 정돈된 데이터를 가져올 수 있었다.

즉, 배열은 정보를 담는 그릇이면서 동시에 정보가 순서대로 저장된다는 특징이 있다.

 

하지만, 객체는 순서 없이 저장할 수 있는 정보를 가질 수 있는 아주 좋은 기능이다. 이말의 의미는 무조건 데이터를 집어넣는 것이 아니라 서로 연관된 것끼리 담아놓은 곳에서 사용자가 원할 때 꺼낼 수 있다는 의미이다. 따라서 데이터를 집어넣을 때 그 데이터에 대한 이름도 함께 집어넣게 된다.

따라서, 객체는 이름이 있는 정리 정된 상자라고 생각하면 된다.

 

 ○ 객체의 기본 문법

 

위 코드는 coworkers 라는 변수에 객체를 담기 위한 기본 문법의 형태이다. 객체를 만들 때 사용하는 기호를 객체 리터럴(object literal)이라고 하고 배열이라면 [] (대괄호) 를 썼겟지만 객체는 {} (중괄호) 를 쓴다.

지금 위와 같은 상태는 빈 객체 이다. 이 빈 객체에 정보를 넣으면 되는데 그냥 단순히 정보만 넣는 것이 아니라 그 정보에 대한 이름도 같이 넣는 것이다.

즉, 위 이미지를 보면 'egoing' 이라는 정보를 넣는데, 그냥 넣는 것이 아닌 정보에 대한 이름 'programmer' 을 같이 붙여서 넣는 것이다.

정보에 대한 이름 : programmer  designer

정보 : egoing  leezche 

가 되는 것이고 각 정보들은 , (콤마) 를 통해 구분해준다.

 

그렇다면 이 객체에서 내가 원하는 정보를 꺼내려면 어떻게 해야할까?

document.write("programmer : "+coworkers.programmer);   라고 써주면 왼쪽 홈페이지와 같이 egoing 이라는 정보를 꺼내올 수 있다.

즉, coworkers.grogrammer 는

원하는 정보가 있는 객체(coworkers) 를 써주고

객체에 접근하는 연산자인 . (점) 을 사용하여 객체에 접근한 뒤

그 정보의 이름 (programmer) 을 적어주면 되는 것이다.

 

그렇다면 leezche 를 가져오기 위해서는 다음과 같이 코드를 작성하면 된다.

원하는 정보가 있는 객체 : coworkers

객체에 접근하기 위한 연산자 : .

원하는 정보의 이름 : designer

 

바로 이것이 객체를 만드는 방법과 객체에서 데이터를 가져오는 방법의 기본이다.

 

그렇다면, 이미 만들어진 객체에 정보를 추가하고 싶다면 어떻게 해야할까?

coworkers.bookkeeper = "duru"; 를 통해 coworkers 객체에 bookkeeper 라는 이름을 가진 duru 정보를 추가한 것이다.

그리고 난 후

document.write("bookkeeper : "+coworkers.bookkeeper+"<br>"); 를 통해 duru 라는 정보를 꺼내올 수 있는 것이다.

 

아래 그림의 경우에는 객체의 이름에 띄어쓰기가 있는 경우에 정보를 추가하는 방법이다.

객체의 이름에 띄어쓰기가 있는 경우에는 . (객체 접근 연산자) 를 사용해서 추가할 수 없고 [" "] 를 통해서 객체에 정보를 추가할 수 있다. 이름에 공백이 들어가는 것은 문법적으로 오류로 인식된다. 따라서,

coworkers["data scientist"] = "taeho";  를 통해 정보를 추가한 뒤

그 정보를 불러올 때도 조금 상이하다.

document.write("data scientist : "+coworkers["data scientist"]+"<br>"); 라고 적어줘야 한다.

 

이렇게 객체의 기본적인 생성법과 객체의 데이터를 가져오는 법, 객체에 데이터를 넣는 방법을 살펴보았다.

 

 

참조 : 생활코딩 유튜브 (www.youtube.com/channel/UCvc8kv-i5fvFTJBFAk6n1SA)