자바스크립트 Array.prototype 표준 내장 객체 1(map, reverse, pop, push)

map

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

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

매개변수

callback
새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

• currentValue : 처리할 현재 요소.
• index (Optional) : 처리할 현재 요소의 인덱스.
• array (Optional) : map()을 호출한 배열.

thisArg (Optional)
callback을 실행할 때 this로 사용되는 값.

반환 값

배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.

예제

console.log("test start");
let arr = [1, 3, 4, 2, 9];
console.log(arr);
console.log("processing...");
arr = arr.map((v, i, a) => {
  console.log(`${v}/${i}/${a}`);
  return v * 2;
});
console.log(arr);

test start 
(5) [1, 3, 4, 2, 9]
processing... 
1/0/1,3,4,2,9 
3/1/1,3,4,2,9 
4/2/1,3,4,2,9 
2/3/1,3,4,2,9 
9/4/1,3,4,2,9 
(5) [2, 6, 8, 4, 18]

thisArg 예제

• thisArg를 사용해 callback 함수 내에서 특정 객체를 this로 사용할수 있게 해준다.
• map 메서드에서 thisArg로 obj를 넘겨주고 callback 함수에서 obj.multiplier를 this.multiplier로 사용할수 있다.

console.log("test start");
const obj = {
  multiplier: 2,
};
let arr = [1, 2, 3, 4, 5, 6, 7];
console.log(JSON.parse(JSON.stringify(arr)));
console.log("processing...");
const multipliedArray = arr.map(function(element) {
  return element * this.multiplier;
}, obj);

console.log(multipliedArray);

test start 
(7) [1, 2, 3, 4, 5, 6, 7]
processing... 
(7) [2, 4, 6, 8, 10, 12, 14]

---

reverse

reverse() 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.

a.reverse()

반환 값

순서가 반전된 배열.

예제

• console.log는 참조를 로깅하기 때문에 실시간으로 값이 바뀌는 객체는 조심해야한다.
• 아래 코드에서 arr을 그냥 console.log(arr)찍으로 reverse가 적용된 값으로 log가 출력됨(브라우저에 따라 다를수도 있음)

console.log("test start");
let arr = [1, 2, 3, 4, 5, 6, 7];
//console.log는 참조를 로깅하기 때문에, 객체와 같이 내용물이 변할 수 있는 것들은 내용이 실시간으로 바뀜
//객체를 깊은복사해서 로깅하거나, 객체가 아닌 값을 로깅
console.log(JSON.parse(JSON.stringify(arr)));
arr = arr.reverse();
console.log("processing...");
console.log(arr);

test start 
(7) [1, 2, 3, 4, 5, 6, 7]
processing... 
(7) [7, 6, 5, 4, 3, 2, 1]

---

pop

pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.

 arr.pop()

반환 값

배열에서 제거한 요소. 빈 배열의 경우 undefined 를 반환합니다.

예제

console.log("test start");
let arr = [1, 2, 3, 4, 5, 6, 7];
console.log(JSON.parse(JSON.stringify(arr)));
arr.pop();
arr.pop();
console.log("processing...");
console.log(arr);

test start 
(7) [1, 2, 3, 4, 5, 6, 7]
processing... 
(5) [1, 2, 3, 4, 5]

---

push

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

arr.push(element1[, ...[, elementN]])

매개변수

elementN
배열의 끝에 추가할 요소.

반환 값

호출한 배열의 새로운 length 속성.

예제

console.log("test start");
let arr = [1, 2, 3, 4, 5, 6, 7];
console.log(JSON.parse(JSON.stringify(arr)));
arr.pop();
arr.pop();
arr.push(99);
arr.push(991);
console.log("processing...");
console.log(arr);

test start 
(7) [1, 2, 3, 4, 5, 6, 7]
processing... 
(7) [1, 2, 3, 4, 5, 99, 991]