[JS] Object : in 연산자

colki·2021년 3월 3일
1

Qu. 빈문자열 " " vs 빈 배열 [ ] 의 데이터 타입을 말해보시오!



( 위 질문에 바로 0.000000001 초만에 머릿속에 정답이 떠올랐다면,
사실 이 내용이 필요 없을 수도 있다. 나는 틀렸었다..)

두가지의 data-type에 을 정의한다면 빈배열[]은 array가 아니라 object이다.
다만 array는 요소와 인덱스를 가지고 있으며 length라는 속성을 가진 특별한 유형의 객체로, 일반적인 객체와는 접근 방식이 다르다는 걸 알아야 한다.

배열은 요소 인덱스로 문자열(연관 배열)을 사용할 수 없으며
무조건 정수만 허용한다.
속성 접근자를 사용해 정수 외 키에 접근할 경우,
배열 리스트의 요소가 아니라 배열 객체의 속성 변수를 설정하거나 리턴한다.

(ex. arr.length)
배열 객체의 속성과 배열 요소의 리스트의 요소는 서로 다른 별개의 항목으로,
순회 및 변형 작업은 객체 속성에 적용되지 않는다.

Referebce MDN Array

배열에서의 인덱스가 숫자라면 (0,1,2 ...)
객체에서의 인덱스는 key/속성/property이다.

쉽고 간단한 fact이지만 기본기가 탄탄하지 못해 혼란을 겪었던 나와 같은 😳(없나요?) 동지가 있다면, 이제 object 의 관계연산자 in에 대해 알아볼 준비가 됐다!


Relational Operator IN


관계연산자 중 하나인 in 연산자는
객체안에 해당 속성(프로퍼티)이 있는 지 확인하고 존재하면 TRUE,
존재하지 않다면 FALSE를 리턴한다
구문은 아주 심플 그 자체이다. 허나 in 이라는 단어를 직관적으로 보기 쉽기 때문에 보이는대로 boolean을 외쳤다가는 낭패를 볼 수 있다.


in

'속성' in 객체명
'property' in Object


  • 속성(property)에는 ' ', " " 를 붙여주어야 한다.
  • a in object
    ( x ) a 가 object 안에 있는가?
    ( o ) a 라는 속성이 object 안에 있는가?

in 연산자를 object, array 에 각각 적용해서 나타내서 예제를 만들어보았다.
다음 예제를 훑어 본다면 이해가 빠를 것이다.


in object ( ex )


const favorite = { food: 'kimchi', dessert: 'chicken', fruit: 'banana' };

console.log(favorite);
/* {food: "kimchi", 
    dessert: "chicken", 
    fruit: "banana"}
*/


** 🔸 kimchi 라는 속성이 favorite-object 안에 있는가? **

console.log('kimchi' in favorite);
// false   = >  kimchi는 속성이 아니므로 false 리턴

console.log('food' in favorite);
// true
// food라는 속성이 있으므로 true 리턴



** 🔸 Additional Question: favorite객체의 length는? **

console.log(favorite.length);

//undefined
// favorite은 배열이 아니다.

* object의 length 구하는 법*/
console.log(Object.keys(favorite).length);
// 3


in Array ( ex )

const earth = ['mountain', 'sea', 'air', 'creature'];

console.log(earth);
// ["mountain", "sea", "air", "creature"]
// object일 때와 완전히 다른 구조이다.

** 🔸 mountain 이란 속성이 earth-object 안에 있는가? **

console.log('mountain' in earth);
// false  =>  mountain은 속성이 아닌 요소이므로 false 
console.log(0 in earth);
// true  => 배열에서의 인덱스는 객체의 속성과 매칭된다. 


**🔸 그래도 배열의 요소에 접근하고 싶다면 **

console.log(earth[0]);
//mountain   => [] 대괄호 안에 인덱스를 넣어 요소 return
console.log(earth.indexOf('mountain'));
//0  =>  indexOf() 소괄호 안에 요소를 넣어 인덱스return


**🔸 배열의 length! **

console.log(earth.length);
// 4      =>object에서는 안 통했지만 배열에선 가능하다.

console.log('length' in earth);
// true   => arr.length 에서 length는 array의 속성임을 알 수 있다.

profile
매일 성장하는 프론트엔드 개발자

0개의 댓글