[JS] Object.keys()

truthone·2021년 11월 7일
0

상황 :
todolist에서 입력 받은 todo 배열 객체의 프로퍼티들의 값들이 비어있는지 확인 하고 싶다.

const data = [{},{}] // 이런 경우가 생길 수 있다.

배열 안 객체들의 key가 있는지 체크하는 방법을 쓰기 위해 아래 메소드를 써보자

Object.keys(obj)

  • 메소드
  • 괄호안에 순회해서 객체 속성 뽑아 내고 싶은 객체를 넣는다.
  • 반환값 형태: 문자열 배열
  • 일반 반복문과 같은 순서로 순회하여 '열거 할 수 있는 객체 속성'의 이름들(key)을 배열로 반환한다.
  • 열거 할 수 없는 속성도 포함해서 속성이름을 원한다면 Object.getOwnPropertyNames()를 참고해보자

Obejct.keys 결과값을 얻을 수 있는 객체 (열거 가능 속성 객체) : 단순 배열, 배열형 객체, key와 순서가 무작위인 배열형 객체

// 단순 배열
const arr = ['a','b','c']
console.log(Object.keys(arr)) // 결과: ['0','1','2'] 배열인덱스가 나온듯

//배열형객체
const todo = {
	todo: '자바스크립트 공부하기',
    	iscomplete: true,
   	when: '2021.11.07',
}
console.log(Object.keys(todo));
// 결과 -> Array ["todo", "iscomplete", "when"]

// 키와 순서가 무작위인 배열형 객체
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); 
// 결과: ['2', '7', '100'] 알아서 정렬되서 나오..네..??

Obejct.keys 결과값을 얻을 수 없는 객체

열거할 수 없는 속성 포함해서 모든 속성 이름 뽑아내길 원한다면
Object.getOwnPropertyNames()를 참고해보자.

const myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  }
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

주의: 메서드 인수가 객체가 아닐때

  • ES5 : TypeError 남
  • ES2015+ : 객체 아닌 인수, 객체로 강제 변환됨.
// In ES5
Object.keys('foo');  // TypeError: "foo" is not an object

// In ES2015+
Object.keys('foo');  // ["0", "1", "2"]

참고: MDN Web Docs - Object.keys()

profile
FE 개발

0개의 댓글