마치 영어문법을 연상케 하는 자바스크립트 in 연산자

발견

scroll event 관련해서 stackoverflow를 찾아보다가

    const windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;

띠용.....?!!?!?! 이게 돼????

근데 처음 봤을땐 삼항연산자는 못보고 너무도 영어문법과 같은 in window에 꽂혔다.

단지 이 모양새에 꽂혀서 헐헐 하고 벙쪄있다가 트친님께서 in 연산자라고 알려주셔서
앞으로 잘 활용해보자는 마음에 써보는 포스팅!!
SNS의 순기능 후후...

쓰임새

MDN 정의에 따르면 in 연산자는 지정된 객체나 프로토타입의 체인 안에 해당 속성이 있을 때 true를 리턴한다고 한다.
아래의 예시들을 살펴보자!

객체에서..

const macaron = {
  flavour: "strawberry",
  from: "laduree",
  price: 2500
}

console.log("from" in macaron) //true
console.log("laduree" in macaron) //false
console.log("macron" in macaron) //false

배열에서..

const flavours = ['strawberry', 'coffee', 'chocolate', 'vanilla', 'greentea'];
console.log(0 in flavours); // true
console.log(4 in flavours); // true
console.log(5 in flavours); // false

표준 내장객체 - Math

'random' in Math // true
'floor' in Math // true
'PI' in Math // true

와.. 진쯔ㅏ신기쓰.......
이렇게 신기한걸 이제야 알다니 ㅠㅠ
아냐 ! 이제라도 알았음 됐지 암암~~

활용

다시 처음의 예시로 돌아가보자!!

    const windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;

window의 innerHeight이 안 먹힐때가 있는건가...?!
안 먹힐땐 후자로 쓰라고 이렇게 표현한 것 같은데...
일단 크롬과 사파리에서 콘솔을 찍어봤을땐 둘다 잘 나온다!

그렇다면 범인은...

익.......

익스...

정말이었다.....

그리고 또 놀라운 사실
이 글은 무려 10년 전에 쓰인 답변쓰...!

in 연산자 이렇게 오래된 문법이었네 하핫....😂
포폴이나 더 손봐야겠다 하핫!

5년 후에 알 수도 있었던 내용을 이제라도 발견했다니 다행이다(정신승리)
좋은 발견이었다😂😂