[JS Study] 자바스크립트 중요 Method(작성중)

자바스크립트에서는 여러 메소드들이 존재한다. 수동적으로 반복문을 사용하여 코드를 길게 작성하는 것보다 메소드를 사용한다면 보다 편리하고 좋은 코드를 작성할 수 있게 된다.

map()

우리가 배열을 사용하는 도중에 배열 안에 있는 모든 요소들의 값을 하나하나 변경해줘야 하는 경우가 있다. 보통 배열을 for 나 while 과 같은 루프를 이용하여 값을 하나하난 변경해줄 수 있다. 하지만 이는 코드가 길어지는 단점이 있고, 시간이 오래 걸린다. 이때 Array.map() 메소드를 사용하면 된다.

Array.map() 메소드는 콜백 함수를 이용하여 각각의 요소에 호출하여 값을 변환할 수 있게 해준다. 한마디로 정리하자면 콜백 함수는 배열의 각 요소에 실행이 된다.

🙅 반복문 사용

let arr = [3, 4, 5, 6];

for(let i = 0; i < arr.length; i++) {
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

🙆 map 사용

let arr = [3, 4, 5, 6];

let newArr = arr.map(function(element){
  return element * 3;
});

console.log(newArr); //[9, 12, 15, 18]

완전한 map() 메소드 사용하기

arr.map(function(element, index, array){}, this);

콜백함수 function()은 각 배열 요소에 대해 호출되며, map()메소드는 언제나 현재의 element, 그것의 index, 그리고 전체 array객체를 해당 요소에 전달한다.
this 인수는 콜백함수 내부에서 사용하게 된다. 기본적으로 이 값은 undefined이지만 예를 들어 this값을 숫자 10으로 변경하는 방법은 다음과 같다.

let arr = [1,3,5,7];
arr.map(function(element, index, array){
  console.log(this) // 10
}, 10);

filter()

자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백함수를 반복 호출한다.
매개변수 3개(요소값, 인덱스, this)를 받는다.
filter() 함수는 순회하면서 해당 조건에 부합하는 참인 배열값만을 남겨두고 배열로 반환다.

const numbers = [1,2,3,4,5];
const odds = numbers.filter((item) => item%2 === 0);
console.log(odds); // [1,3,5]

forEach()

map()함수와 for 반복문과 비슷하다. map()함수와는 다르게 배열을 리턴하지 않고 기본값으로 undefined를 리턴한다. 배열을 새로 만들고 싶으면 빈 배열 안에 push로 넣어주면 된다.
그렇다면 왜 for 반복문을 사용하지 않고 forEach()를 사용할까? 그 이유는 반복문과 다르게 순회하는 도중에 멈출 수 없기 때문에 배열을 순회하는 속도가 더 빠르기 때문이다.
forEach는 배열에서만 사용이 가능하다.

let arr = [1, 2, 3];
arr.forEach((item, index, array) => {
  console.log(`${item} is ${index}th ${array}`);
});

위 코드를 살펴보더라도 forEach는 세개의 인수를 받는다. 첫번째 인수는 값을 의미하고, 두번째 인수는 index, 세번째 인수는 해당 배열을 의미한다.