JavaScript에서 "in"연산자 사용

이 짧은 튜토리얼에서는 JavaScript의 "in"연산자가 무엇인지, 무엇을 하는지, JavaScript 코드에서 어떻게 구현할 수 있는지 살펴보겠습니다.

준비가 된? 시작하자!

어쨌든 "in" 연산자는 무엇입니까?

물어봐주셔서 기쁩니다. JavaScript에서 "in"연산자는 inbuilt operator이 property에 있는지 확인하는 데 사용되는 Object입니다.

표현식에서 사용될 때 "in"연산자는 boolean value 을 반환합니다. 속성이 Object에서 발견되면 true이고, 그렇지 않으면 false입니다.

배열은 기술적으로 JavaScript의 객체이기 때문에 "in"연산자는 배열에서도 사용할 수 있습니다. 여기서 차이점은 배열의 값이 배열의 속성이 아니기 때문에 "in"연산자는 특정 인덱스가 배열 내에 있는지 확인하는 데에만 사용할 수 있다는 것입니다.

이것은 약간 혼란스럽게 들릴 수 있으므로 실제로 실행해 보겠습니다.

"in" 연산자는 어떻게 사용합니까?

구문은 매우 간단합니다. "in"연산자에는 두 개의 매개변수가 있습니다.

prop(속성 이름 또는 배열 인덱스를 나타내는 문자열 또는 기호)

개체(소품이 포함되어 있는지 확인하기 위해 검사할 개체)

코드에서는 다음과 같습니다.

prop in object

일부 맥락에서:

let obj = { prop1: 1, prop2: 2, prop3: 3 };

"prop1" in obj;
//=> true

"prop2" in obj;
//=> true

"prop5" in obj;
//=> false

우리가 볼 수 있듯이 처음 두 props는 obj Object의 키(및 속성)이며 true boolean을 반환하는 반면 "prop5"는 키 또는 속성이 아니므로 false를 반환합니다.

Object의 키는 다음과 같이 Object에서 직접 호출할 수 있으므로 속성으로 간주됩니다.

let obj = { prop1: 1, prop2: 2, prop3: 3 };

obj.prop1;
//=> 1

obj["prop1"];
//=> 1

이것이 "in"연산자를 사용하여 배열의 요소/값을 확인하는 데 사용할 수 없는 반면 인덱스 또는 길이 속성과 같은 Array 객체의 속성을 확인하는 데 사용할 수 있는 이유입니다.

let arr = [1, 2, 3, 4, 5];

// These operators check for Array indices, not values:
0 in arr;
//=> true
2 in arr;
//=> true
5 in arr;
//=> false

// This operator checks for a property of the Array Object:
"length" in arr;
//=> true
//=> This returns true because arr.length is a property

실제 프로그램에서 이것을 어떻게 사용할 수 있습니까?

"in"연산자는 객체에 속성이나 키가 있는지 확인해야 할 때 읽기 쉽고 인간 친화적인 코드를 작성하는 데 주로 유용합니다.

for 루프 내의 Object에 키가 존재하는지 확인하는 기존 함수의 조각이 있다고 가정해 보겠습니다. 키가 있는 경우 한 비트의 논리를 수행하고 없는 경우 다른 논리의 비트를 수행합니다.

이 예에는 많은 맥락이 없지만 저와 함께 참으세요.

let agesOfUsers = {
  18: ["Adam", "Jess"],
  21: ["Mike", "Alex"],
  24: ["Tom"]
};

function getNamesForAge(age) {
  if (age in agesOfUsers) {
    agesOfUsers[age].forEach( user => console.log(user) );
  } else {
    console.log(`No users of age ${age} on record.`);
  }
}

getNamesForAge(18);
//=> Adam
//=> Jess

getNamesForAge(30);
//=> No users of age 30 on record.

기록을 위해 if 문은 다음과 같이 작성할 수도 있습니다.

if (!!agesOfUsers[18]) {
  // logic
}

그러나 특히 공유 코드베이스에서 코드를 보다 인간 친화적이고 가독성 있게 만드는 데에는 상당한 주관적 가치가 있습니다. 따라서 "in"연산자를 사용하는 것이 좋은 옵션인 이유입니다!


여기까지 오셨다면 읽어주셔서 정말 감사합니다! 이 게시물이 JavaScript 여정에 도움이 되거나 교육적이었기를 바랍니다. :)

나는 스스로 학습하면서 개념에 대한 튜토리얼과 분석을 계속 작성할 것이므로 앞으로 더 많은 것을 지켜봐주십시오!