[JavaScript] map, for...in, for...of, forEach문

map()

- 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

 

구문)

arr.map(callback(currentValue[, index[, array]])[, thisArg])

paramter

callback

- 새로운 배열의 element를 생성하는 함수

• currentValue : 현재 처리할 element
• index (Optional) : 처리하는 현재 element의 index
• array (Optional) : map()을 호출한 배열, 원래 배열

thisArg (Optional)

- callback을 실행할 때 this로 사용되는 값

 

return value

배열의 각 element를 callback 수행 후 나온 결과를 순서대로 모든 새로운 배열

 

예제)

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

 

for ... in

- 객체에서 문자열로 키가 지정된 모든 열거 가능한 non-symbol 속성에 대해 반복을 수행

- 인덱스의 순서가 중요한 Array의 반복을 위해 사용할 수 없음 => forEach나 for...of를 사용하는 것이 좋음

- for...in은 객체의 속성을 확인(object 내에 key가 존재하는지 확인)할 때 사용 ≒ hasOwnProperty()

 

구문)

for (variable in object) { ... }

parameter

variable

- 매번 반복마다 다른 속성 이름(value name)이 variable에 할당됨

 

object

- 반복 작업을 수행할 객체

- 열거형 속성을 가지고 있음

 

예제)

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

 

for...of

- 반복가능한 객체(Array, Map, Set, String, TypedArray 등)에 대해서 loop를 돔

- 컬렉션 전용. [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복

 

구문)

for (variable of iterable) { statement }

variable

- 각 반복에서 서로 다른 속성값이 variable에 할당됨

 

iterable

- 반복되는 열거 가능(enumberable)한 속성이 있는 객체

 

예제)

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

 

for...of와 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 (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

 

forEach

- 배열에 있는 각 element에 대해 오름차순으로 한번씩 실행

- 기존 배열을 변형하지 않으나, callback이 변형할 수 있음

- 예외를 던지지 않고 forEach를 중간에 멈출 수 없음

 

※ 조기 종료가 가능한 반복문

- for

- for...of

- for...in

- Array.prototype.every()

- Array.prototype.some()

- Array.prototype.find()

- Array.prototype.findIndex()

 

구문)

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

callback

- 각 요소에 대해 실행할 함수

• currentValue : 현재 처리할 element
• index (Optional) : 현재 처리할 element의 index
• array (Optional) : forEach()를 호출한 배열, err

 

thisArg (Optional)

- callback을 실행할 때 this로 사용할 값

 

return value

undefined

 

예제)

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

 

출처

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

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in

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

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