신기한 연구소

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

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

오늘은 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 연산자에 대해 간단히 살펴봤습니다.

쉽게 이해가 되었을까요?

신기한 연구소입니다.

일반적으로 논리 연산자인 &&, ||, !는 조건문에서 둘 전부 참 또는 거짓이거나

둘 중 하나가 참 또는 거짓인 경우를 판별해서 활용하곤 했습니다.

그럼 꼼꼼히 잘 확인해 보고 기본 개념도 파악하고 활용할 수 있는 응용력도 키워보겠습니다.

1. && (논리 AND) 연산자.

&&를 사이에 두고 양쪽에 피연산자를 평가해서 둘 다 true이면 결과로 true가 나옵니다.

예를 들어볼께요.

결과.

Boolean 값을 할당받은 변수 a, b, c로 테스트를 해 봅니다.

3번 라인을 보면 a = true, b = true로 둘 다 true이기에 결과 1번 라인을 보면 true가 나옵니다.

4번 라인부터 6번 라인까지 보면 false값을 가진 변수 c가 들어가 있습니다.

결국 둘 중 하나 또는 둘 다 false인 경우는 && 논리 연산자는 false를 반환하게 됩니다.

&&를 사이에 둔 양쪽의 피연산자는 boolean값을 할당받은 변수뿐만 아니라

관계 표현식, 객체 프로퍼티, 함수 등 truthy, falsy 값의 형태로 변환된다면 모두 가능합니다.

위 코드를 보면 d에 함수를 할당했습니다.

true를 리턴하는 이 함수를 논리 연산에 피연산자로 사용했습니다.

결과는 true가 반환됩니다.

피연산자로 true/false인 불리언 값 외에도 truthy와 falsy로 불리언 값으로 평가될 수 있다면

모두 가능합니다.

우리가 false로 평가되는 값은 다음과 같습니다.

false로 평가되는 falsy들...

undefined.
null.
0 또는 -0.
'' 또는 "".
NaN.
그리고 정확한 false

위 falsy들은 false로 평가되며 논리 연산자에서 피연산자로 사용이 가능합니다.

만약 두 변수가 값이 할당된 경우에만 다음 문장을 실행해야 하는 경우라면

다음 예제를 확인해 봅니다.

변수 age와 fname을 논리 연산자를 사용해서 평가하고 있습니다.

age와 fname은 Boolean 값이 아니지만 평가가 됩니다.

null, undefined 등 falsy 평가가 아니면 truethy라 true로 평가되어 문제없이

if {} 문이 실행이 됩니다.

하지만 age 또는 fname에 값이 할당이 안되면

undefined로 기본 할당되기 때문에 falsy 평가로 false가 되므로 

if {} 문은 실행되지 않게 됩니다.

&& (AND) 연산자의 특징 중 하나는 첫 번째 피연산자를 평가한 뒤 true인 경우만

두 번째 피연산자를 평가합니다.

단순히 생각하면 그렇구나 하겠지만

이를 응용한다면 조건식을 대신해서 간단하게 함수를 실행할 수 있습니다.

위 예제를 보면

chk가 true이면 7번 라인의 논리 표현식은 test() 함수를 실행합니다.

test() 함수가 true/false로 평가되는 것은 의미가 없고

단지 chk가 true이면 test() 함수를 실행시킬 수 있다는 것이 중요합니다.

chk가 false라면 함수 test()는 실행되지 않습니다.

두 피연산자가 true인지 false인지가 중요한 것이 아니라

첫 번째 피연산자를 평가해서 두 번째 피연산자를 실행하도록 구현한 것입니다.

if문을 대신해서 사용했다는 부분이 흥미롭습니다.

2. || (논리 OR) 연산자.

&&(AND)와 마찬가지로 이 논리 연산자도 두 개의 피연산자를 평가합니다.

다른 점은 둘 중 하나만 true이면 된다는 것입니다.

우선 첫 번째 피연산자를 평가합니다.

그리고 false가 나온다면 두 번째 피연산자를 평가합니다.

즉, 첫 번째 피연산자가 true가 된다면 두번째 피연산자를 평가할 이유가 없습니다.

이미 둘 중 하나가 true임을 만족하기 때문입니다.

우리가 생각하는 SQL 문의 A 또는 B라서 둘 다 적용하는 개념이 아닌

첫번째 피연산자를 Boolean으로 평가하는 형식입니다.

또한 표현식을 평가만 하지 않고 실행을 하고 평가를 한다는 부분이 중요합니다.

다음 예를 보겠습니다.

||(OR) 연산자를 사용해서 값을 할당하는 방법을 확인해봅니다.

4번 라인의 obj에 값을 할당하는 방식을 보면

mainObj가 true이면 그 값을 할당하고 뒤 2개의 표현식은 실행하지 않습니다.

하지만 undefined로 falsy로 평가되어 false가 되기에 

두 번째 피연산자를 확인합니다.

subObj에 "apple"이 할당되어 있으므로 truthy가 되고 obj에 "apple"가 할당됩니다.

그리고 그다음 피연산자는 실행되지 않습니다.

마지막 "lemon"은 두 번째 피연산자가 true이기 때문에 평가되지 않습니다.

이렇게 값을 할당할 때 유용하게 사용할 수 있겠네요.

가끔 공통 js를 보면 첫 라인에 객체를 체크하는 부분이 있는데요.

var obj = obj || {};

obj객체가 있으면 obj객체를 사용하고 처음이면 빈객체 {}를 만든다는 의미입니다.

3. !(NOT) 연산자

! 은 피연산자 앞에 놓입니다.

피연산자는 하나이며 피연산자의 true/false를 반대로 바꾸는 역할을 합니다.

먼저 피연산자를 truthy/falsy로 평가하고 그 결과를 boolean인 true/false로 변환합니다.

그리고 반전을 시키는 구조입니다.

! 연산자는 결과가 항상 true/false 중 하나가 됩니다.

주의할 점은! 연산자를 사용할 때 식 전체를 적용할 경우는 ()를 사용해합니다.

!(a == b)

만약 어떤 truthy 또는 falsey 값을 true 또는 false값으로 바꾸고 싶다면

var a;

a = !!a; 로 하면 false로 할당됩니다.

와우~