자바스크립트의 in 연산자 for in 반복문 사용하기

Last Modified : 2021-03-21 / Created : 2016-04-23

7,109
View Count

주소 복사하기

자바스크립트는 in 연산자를 통해 객체가 가진 프로퍼티나 메소드가 맞는지의 여부를 확인할 수 있습니다. 다시말해 진짜 해당하는 프로터티를 가지고 있는 객체인지 판별해주는 연산자가 바로 in 입니다.

프로퍼티, 메소드 이름 in 객체명

먼저 간단한 예제를 만들어봅니다. 만약 아래와 같이 장난감이란 객체를 만들고 몇 가지 프로퍼티를 선언합니다.

toy = new Object;

toy.car = "sonata";
toy.plane = "drone";

위 예제처럼 toy 객체를 생성하였고 두 개의 프로퍼티를 가지게 되었습니다. 이제 여기서 in 연산자를 사용하여 car 그리고 plane 프로퍼티가 toy 객체의 프로퍼티임을 확인하는 방법은 다음과 같습니다.

먼저 if 분기문을 사용하여 해당 프로퍼티의 여부를 체크합니다.

if ('car' in toy) {
console.log('해당 객체가 맞습니다.');
}

if('plane' in toy) {
console.log('해당 객체가 맞습니다.');
}

위 예제는 해당하는 속성 car 그리고 plane이 toy 객체안에 존재하는 것임을 확인해주는 방법입니다. in 연산자는 해당하는 값이 toy 객체에 있다면 boolean으로 true/false를 반환하게도비니다. 위 두 가지 모두 실제로 toy 객체에 존재하므로 true를 반환하게 되죠.

여기서는 속성만 예를 들었지만 메소드의 경우도 동일하게 동작하게됩니다. 해당하는 메소드가 존재할 경우 true를 반환하게 됩니다.

toy.testFunc = function() {
...
}
// testFunc 메소드를 생성하였음

if ('testFunc' is toy) {
console.log('이 메소드 toy객체가 맞음');
}

위 스크립트를 실행하면 true를 실행하므로 if문이 실행되어 콘솔창에 정해진 문구가 나타나게 된다.

# for in을 사용해 가지고 있는 속성 메소드 확인하기

for 반복문에 in 키워드를 사용하여 객체가 가진 모든 속성과, 메소드를 사용할 수 있습니다. 이 방법은 매우 유용한데요 ~ 특정 객체의 모든 프로퍼티, 메소드를 사용하거나 반환해야 될 때 이처럼 for in을 함께 사용하면 좋죠.

아래는 위 예제의 toy 객체를 그대로 사용하여 for in을 수행하였습니다.

toy.car = 'gogo';
toy.plane = 'sky';
toy.testFunc = function() {
alert();
}
// 객체 안에 다양한 값을 등록함

for (const item in toy) {
console.log(item);
}

위 스크립트를 실행하면 콘솔창에 아래와 같이 출력됩니다.

car
plane
testFunc

출력된 결과를 확인해보겠습니다. 현재 가지고 있는 모든 메소드와 프로퍼티를 보여주었군요. 여기까지 in 연산자를 사용하는 방법과 for문에서 함께 사용하는 방법까지 확인해보았습니다.