신기한 연구소

안녕하세요. 신기한 연구소입니다.

요즘 초심으로 돌아가 자바스크립트를 다시 꼼꼼히 읽어보고 있답니다.

오늘은 in과 instanceof 연산자에 대해 포스팅해보겠습니다.

대부분 프로그래밍 언어 책, 초보자를 위한 책도 어려운 설명으로 이해하기 힘든 경우가 종종 있더군요.

최대한 쉽게 설명해보겠습니다.

1. in 연산자

객체 내 어떤 프로퍼티가 존재하는지 확인할 수 있습니다.

var obj = { width : 100, height : 150};

obj 객체를 정의했습니다.

객체 안에는 width, height 두 개의 프로퍼티가 정의되었습니다.

물론 값도 같이 설정되었습니다. 100, 150.

if ("width" in obj) console.log("width 존재");

in 연산자 왼쪽에는 문자열 또는 문자열로 변환 가능한 값이 오는데

위 조건문에서 in의 왼쪽에는 문자열("width")이 지정되었습니다.

in 연산자 오른쪽은 대상 객체를 지정했습니다.

위 in 연산자는 객체 obj에 "width"라는 속성이 존재(in) 하는가? 라고 이해하면 됩니다.

다음 예제를 보겠습니다.

conlose.log("toString" in obj);

위에 obj 객체를 보면 toString은 보이지 않습니다.

하지만 true가 출력됩니다.

왜?

바로 toString은 모든 객체에 자동 상속되기에 우리가 명시하지 않아도 

내부에 존재하게 됩니다.

obj에 없는 프로퍼티를 in 연산자로 확인하면 false가 됩니다.

그런데~

다음 예를 중요하게 확인해 봐야 합니다.

var arr = [2, 4, 6];

배열 arr을 정의했습니다. 객체는 { } 배열은 [ ]로 선언합니다.

다음 예를 보고 결과를 예측해 봅니다.

console.log(2 in arr);

우선 in 왼쪽에 숫자 2를 뒀습니다.

문자열을 두라고 했지만 문자열로 변환이 가능해도 된다고 했습니다.

그래서 숫자 2도 문자 "2"로 변환되기에 가능합니다.

그럼 어떻게 해석해야 할까요?

우선 결과는 true입니다.

위 배열의 첫 번째 항목이 2입니다.

그래서 true일까요? 

아닙니다.

배열은 객체와 다르게 in 연산자를 사용하면 배열 내 값을 찾는 것이 아니라

위치를 찾습니다.

즉 index값과 매칭을 합니다.

위 배열의 인덱스 값은 0, 1, 2입니다.

총 3개의 값을 가지고 있고

배열의 위치 인덱스는 0부터 시작합니다.

위치 2는 존재합니다. 값은 6이고요.

그래서 true를 출력합니다.

만약 배열에 값 6이 있다고

console.log("6" in arr);

로 평가한다면 false가 됩니다.

이해되셨나요?

객체는 프로퍼티 값을 배열은 index값을 지정한다는 것을 반드시 기억하세요.

2. instanceof 연산자

instanceof 연산자는 해당 객체가 어떤 타입의 클래스인지 판단하는 기능을 담당합니다.

예를 살펴보겠습니다.

어떤 객체를 받을 때 어떤 클래스인지 확인해서 적절한 구현을 하고 싶을 때 사용하면 됩니다.

var arr = [1,2,3];

arr은 배열 객체입니다.

그렇다면

console.log(arr instanceof Array);

이렇게 arr 인스턴스(객체가 생성된)가 Array클래스의 객체라면 true가 됩니다.

console.log(arr instanceof Object);

위 결과는 어떻게 될까요?

배열 arr은 Object클래스의 인스턴스다.?

true가 됩니다. 모든 객체는 사실 Object의 객체이기도 합니다.

var re = new RegExp();

RegExp() 생성자를 통해서 new로 새로운 객체를 인스턴스화 합니다.

console(re instanceof RegExp);

위 평가는 어떻게 될까요?

true가 나옵니다.

그런데 객체를 인스턴스화 할 때는 RegExp()라고 생성자를 호출했습니다.

하지만 instanceof에서는 생성자 RegExp()를 사용하지 않고 ()를 뺐습니다.

()가 있으면 함수입니다. 그래서 RegExp()는 함수(생성자)이고

인스턴스화 할때는 생성자를 호출해야 하기에 ()가 필요합니다.

()를 빼면 클래스 이름이 됩니다. 즉 클래스가 되는 겁니다.

instanceof는 클래스로 객체를 비교해야 하기에 ()를 사용하지 않습니다.

()는 생성자이니깐요.

()를 사용한다면 TypeError 예외가 발생합니다.

console.log(re instanceof Object);

당연히 모든 객체는 Object의 객체이므로 true가 됩니다.

만약 타입이 다르다면 false가 됩니다.

in과 instanceof 연산자에 대해 간단히 살펴봤습니다.

쉽게 이해가 되었을까요?