JavaScript/Javascript

Object(객체)

MoZZANG 2022. 2. 27. 16:34

<표준 내장 객체>

 

표준 내장 객체(Standard Built-in Object)는 JS가 기본적으로 가지고 있는 객체들을 의미한다. 내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문이다. 결국 우리는 이 내장 객체들을 이용하여서 새로운 객체를 만들고 이를 통해서 새로운 소프트웨어를 만들어 내기 때문에 더욱이 중요하다고 할 수 있다.

 

JavaScript는 그렇게 많지 않은 내장 객체들을 가지고 있는데 다음과 같다.

 

  • Object
  • Function
  • Array
  • String
  • Boolean
  • Number
  • Math
  • Date
  • RegExp

 

 

우리는 이 객체들의 기능을 확장해볼 수도 있다.  배열(Array)의 기능을 확장시켜보자.

 

▲ new생성자를 이용해 Array라는 새로운 객체를 만들고 우리는 그 객체안의 데이터를 랜덤하게 뽑고싶다. 그러기 위해서 만든 코드가 바로 3행에 있는 코드이다. Math.random이라는 코드는 Math라는 내장 객체에서 random이라는 method를 이용해서 0이상 1미만의 숫자를 랜덤으로 추출하는 것이다. 그리고 Array.length를 이용해 데이터 갯수를 구하고 둘을 곱한 후 Math.floor를 통해서 소숫점이하를 내림한 값을 index에 저장시킨다. 

이를 통해서 랜덤으로 Array객체안의 데이터값을 추출할 수 있다.

 

 

 

위 코드가 잘못된 코드는 아니다. 하지만 이 함수자체를 배열 객체에 포함시키면 훨씬 깔끔한 코드가 될 것이다.

아래와 같이 말이다.

 

▲ prototype을 통해서 random이라는 기능의 함수 즉, 무작위 뽑기의 기능을 Array라는 객체에 넣어버린 것이다.

그 Array라는 객체를 변수 arr에 넣고 결과적으로 변수 arr에는 무작위 뽑기의 기능인 random을 마치 내장된 메소드 인 것처럼 사용할 수 있게 된 것이다.

여기서 this가 가리키는 것은 random이라는 기능이 실행될 때의 상위객체 즉, 여기서는 new Array에 의해 생성된 객체를 가리킨다. 

 

 

 

 

 

 

 

<Object라는 객체>

 

Object라는 Object 즉, Object라는 이름의 객체는 가장 기본적인 객체이다. 다시 말해서 아무것도 상속받지 않는 순수한 객체다. JS에서는 값을 저장하는 기본적인 단위로 객체(Object)를 사용하는 동시에 모든 객체(Object)는 Object라는 이름의 객체를 상속받는데, 그런 이유로 모든 객체는 Object라는 이름의 객체의 property를 가지고 있다.

 

무슨말인지 이해하기 어렵다. 하나의 예제를 보면서 이해해보자.

 

▲ 우리가 score라는 새로운 객체를 만들면 이 객체는 눈에 보이지는 않지만 Object라는 이름의 내장객체로부터 상속을 받게 된다. 하지만 Object라는 이름의 내장객체는 우리가 method등을 추가하지 않는이상 순수한 상태로 있기 때문에 다른 어떠한 기능이 추가된 상태는 아닌 것이다.

 

 

이러한 모~든 우리가 새로만드는 객체의 리더(?) 혹은 왕(?)이라고 할 수 있는 Object라는 이름의 객체를 확장하면 모든 객체가 사용할 수 있는, 다시말해 모든 객체가 접근할 수 있는 API를 만들 수 있다.

 

아래는 Object라는 이름의 내장 객체를 확장한 예시이다.

 

▲ 순수한 상태의 Object라는 이름의 내장 객체에 상속을 해주는 기능인 prototype이라는 property를 이용해서 객체 안의 데이터들의 존재유무를 boolean값으로 리턴하는 기능의 contain을 만들어서 넣어주었다. 그 결과 우리가 입력하는 인자가 매개변수인 gap에 대입되고 결국 그 인자가 객체안에 있다면 true를, 없다면 false를 출력하게 된다.

 

 

 

하.지.만 Object객체는 확장하지 않는 것이 좋다. 왜냐하면 모든 객체에 영향을 주기 때문이다.

 

아래에서 어떻게 영향을 주는지 보자.

▲ 우리가 예상하기로는 'name'과 'city'만 출력될 것 같지만 아니다. 실제로 출력해보면

▲ contain까지 출력되는 것을 볼 수 있다. 객체를 확장시켜 contain이라는 property도 객체안에 저장되었기 때문이다.

 

 

 

이처럼 객체가 기본적으로 가지고 있을 것으로 예상하고 있는 객체 외에 다른 객체를 가지고 있는 것은 우리가 예상치 못한 결과를 일으킬 수 있다. 이럴 때는 hasOwnProperty라는 property를 사용해서 해당 객체의 소속인지를 체크해볼 수 있다.

hasOwnProperty라는 이름에서 알 수 있듯이 자신이 인자로 전달된 property의 이름이 객체의 속성인지를 판단한다. 만약 상속을 받았다면 false가 된다.

 

 

 

하지만 굳이 hasOwnProperty를 사용하지않고 처음부터 Object객체는 확장하지 않는 것이 바람직하다고 할 수 있다.

 

 

 

 

 

'JavaScript > Javascript' 카테고리의 다른 글

Prototype  (0) 2022.02.20
상속(inheritance)  (0) 2022.02.20
this  (0) 2022.02.20
생성자와 new  (0) 2022.02.20
함수의 호출  (0) 2022.02.19