[Vanilla.js] Array.prototype.forEach() & Array.prototype.map(), for...in, for...of

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN

forEach()는 for문과 달리 순번과 배열의 크기 변수를 사용하지 않으므로 배열의 시작부터 끝까지 모두 작업하는 경우 사용하면 좋다.

map()도 forEach()와 마찬가지로 순번과 배열의 크기 변수를 사용하지 않는다. forEach와 차이점은 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

즉, map은 새로운 배열을 만드는 반면 forEach는 현재 배열에 영향을 끼친다는 것이다.

for문과 forEach(), map() 비교

const arr = [ 0,1,2,3,4,5]
 
for(var i =0; i<arr.length; i++){
    console.log(result)
}
 
arr.forEach((result)=>{
    console.log(result)
})
 
let map_arr = arr.map(x => x)
console.log(map_arr)
// expected output: Array [0,1,2,3,4,5]

arr.map(x=>x)

arr.map(x=>{return x})의 생략

 

 

 

 

for...in - JavaScript | MDN

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of

for...of - JavaScript | MDN

for...of는 배열순환(Map, Set, String, TypeArray 가능)이고 for...in은 객체 순환이지만

for...of는 객체에 사용하면 자료형 오류 뜨지만 for...in 배열에 사용해도 사용은 가능하지만 권장하지는 않는듯하다.

 

따라서 배열의 반복에는 Array.prototype.forEach(), for...of를 사용하면 되고

키-값 쌍이 선호되는 데이터의 경우(속성이 "key"의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용하면 된다.

 

function func1(text) {
    for (let i of text) {
        console.log(i)
    }
}
 
func1('hello')

for ... of를 이용하여 문자열을 이렇게 분해 할 수도 있다.

const array1 = ['a', 'b', 'c'];
 
for (const element of array1) {
    console.log(element);
}
 
//일반 for문처럼 arr[i]의 형태로 오는게 아니라 바로 element 변수로 와야된다