객체탐색과 배열탐색

객체탐색

const obj = {key : "KimJye", children : [{name:"ruby"},{age:24}]};

for - in 

for(key in obj){
	console.log(obj[key]);
}

Object.keys()

Object.keys(obj); // ['key', 'children']

Object.keys()와 배열메서드(forEach)

Object.keys(obj).forEach(v=>{console.log(obj[v])}); // KimJye \n [{name : 'ruby' }, { age: 24 } ]

Object.values()

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

// 유사 배열 (숫자를 속성으로 사용하는 객체)
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

// 유사 배열의 경의 속성으로 사용한 숫자의 크기 순으로 정렬되어 반환됩니다.
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']

// 객체가 아닌 경우에는 객체로 강제로 변환되어 적용됩니다.
console.log(Object.values('foo')); // ['f', 'o', 'o']

Object.entries()

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

// non-object argument will be coerced to an object
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

// returns an empty array for any primitive type, since primitives have no own properties
console.log(Object.entries(100)); // [ ]

// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

 

배열탐색

const array = ['가','나','다','라'];
const size = array.length;

//객체의 반복 in, 배열 of
console.log("basic");
for(let i=0; i<size; i++){
  console.log(array[i]); // 가 나 다 라
}
 
console.log('forEach');
array.forEach(function(j){
  console.log(array[j]); // undefined
});
 
console.log('for of');
for (let k of array){
  console.log(array[k]); // undefined
}
 
console.log('for in');
for (let z in array){
  console.log(array[z]); // 가 나 다 라
}

basic for문과 for in은 반복변수에 index를 리턴.

forEach 와 for of 는 해당 값을 리턴 (forEach는 callback 함수가 필요. 굳이 이걸 쓸 필요 없이 같은 기능을 하는 for of)

 

for in 문은 객체의 모든 열거 가능한 속성을 반복. 반복대상으로 지정한 객체(Array)가 

기본적으로 가지고 있는 내부함수들과 직접추가한 함수들까지 포함하여 반복한다.

 

for of 문은 모든 객체가 아닌 컬랙션만 반복. [Symbol.iterator] 속성이 있는 컬렉션의 프로퍼티를 반복.

// for in
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};
 
let iterable = [3, 5, 7];
iterable.foo = "hello";
 
for (let i in iterable) {
    console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

// for of 
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};
 
let iterable = [3, 5, 7];
iterable.foo = "hello";
 
for (let i of iterable) {
    console.log(i); // logs 3, 5, 7
}

 

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Object.values()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

Object.entries()

https://aljjabaegi.tistory.com/354