TIL - 21.06.29 👨‍💻

객체

Object.keys()

Object.keys(obj) 메소드는 인자 자리에 객체를 받아서 객체의 프로퍼티 키를 요소로 가지는 배열을 반환하는 메소드이다.

const obj = {
  name: 'sunghoon',
  job: 'dev',
  age: '26',
}

console.log(Object.keys(obj)) // [name, job, age]

배열과 in 연산자

in 연산자는 이전에도 포스팅 했듯, key in obj의 문법으로 사용하며, 해당 연산자는 in 뒤에 오는 객체에 in 앞에 오는 프로퍼티 키가 존재하는지 불리언 타입으로 반환하는 연산자이다.

const obj = {
  name: 'sunghoon',
  job: 'dev',
  age: '26',
}

console.log('name' in obj) // true; 프로퍼티 키로 해당 프로퍼티가 객체 안에 존재 하는지 불리언 타입으로 반환한다.

이 in 연산자를 배열에서도 사용할 수 있다.
그런데 배열 안에 있는 요소를 in 연산자로 찾아도 false로 반환한다.
왜냐, 배열에서의 in 연산자는 요소를 찾는 것이 아닌 index를 key 자리에 받으며 해당 index에 값이 할당되어 있는지 여부를 반환하기 때문이다.

const arr = [1, 2, 3, ,5,] // index 3은 빈 요소이다.

console.log(2 in arr) // true;
console.log(3 in arr) // false;  
// arr 의 3번 인덱스가 비어있기에 2번 인덱스에 3이 있든 말든 false를 반환한다.

코플릿 풀때는 끙끙거리면서 뭐가 문젠지, 왜 조건문 안으로 기어 들어가는지 이해를 못했지만 지금 와서 생각하면 당연한 결과였다.

애초에 이 in 연산자는 객체에서도 프로퍼티 값(property value)으로 프로퍼티 존재여부를 확인하는게 아니라 프로퍼티 키(property key)로 존재여부를 확인하고 불리언 타입으로 반환하는 메소드이다.

그러니 당연히 유사 객체인 배열에서 사용할땐, 객체에서의 키 역할을 하는 index를 가지고 존재여부를 반환하는 것이다.

코플릿 도중에 요소를 앞에 넣고선 왜 연산자가 이상하니 마니 하던게 객체에서 in 연산자 앞에 프로퍼티 값을 넣고 연산자가 이상하다고 투정부리던 꼴 이었던 것이다.

GOOD 😉

오늘 코플릿 문제를 풀며 대부분 막히는 것 없이 술술 풀었다.
코플릿에서 생겼던 몇가지 의문이 나중에 공부하면서 풀렸다.
오늘 코플릿 문제풀면서 크롬 개발자도구를 이용해 오류를 찾는 것에 조금 더 익숙해졌다.

BAD 😥

문제 풀어보고 한다고 정작 내가 따로 공부할 분량은 공부를 못했다.
늦잠자서 아침 공부도 많이 못했다.

TO DO 🔥

• 객체 공부
• 배열 thisArgu
• Node.js
• React 입문

Retrospect 🧐

주말에 실컷 놀고 생활패턴이 완전히 깨져 버려서 아침 시간을 자꾸 날리고 있다.
그래도 오늘은 어제보다 한시간 빨리 일어났으니 내일 아침에 오늘보다 한시간 빨리 일어나면 원복이다!

위에 적은 조건문에 in 연산자를 사용했던 문제는 결국 .includes 메소드를 이용해서 풀었다.
당연히 배열에선 .includes 메소드가 먼저 기억났어야 했는데 이 메소드를 써 본적이 없으니 바로 바로 생각이 나지 않는 것 같다.

역시 실제로 써보는게 배우는데 훨씬 도움이 되는 듯 하다.

오늘 못했던 배열의 thisArgu는 내일 아침에 운동 후딱 갔다와서 박살내겠다.

Reference 🙇

모던 자바스크립트 - https://ko.javascript.info/