JavaScript- array method에 대해 알아보자

이병수·2020년 6월 27일
0

TIL

목록 보기
17/19

Array Method

Map

map 메소드에서는 배열을 반복해주는데, callback 함수에서 return한 값으로 매(each)요소를 수정해준다!
결국 map메소드의 return한 값은 수정된 값으로 다시 생성된 배열이다.

ref) callback 함수란, 인자로 전달되는 함수

예제

const squares = arr.map(function (x) { 
  return x * x;
});

위 예를 arrow function으로 하면 아래와 같다. array method는 아래와 같이 arrow function으로 쓴다!

const arr = [1, 2, 3];
const squares = arr.map(x => x * x);

immutable한 메쏘드로 길이는 같고 형태가 다른 array(배열)를 얻고자 할 때 유용하다

forEach

forEach는 for 대신 사용하는 반복문입니다.

forEach vs map

  • map과의 큰 차이는 forEach 함수 자체가 return 하는 것도 아무것도 없다는 것입니다.
    그냥 forEach 함수를 탈출하고 싶을 때 return을 사용하면 됩니다.

  • map은 요소가 수정된 새로운 배열이 return되었다면, forEach는 아무것도 return하는 것이 없습니다.

  • 그래서 forEach로 전달되는 callback 함수에서도 return하는 것이 없습니다.

    forEach는 단지 for문 대신 사용하는 반복 method 입니다.

예제 1

let users = [

    { name: 'Tim' , age : 40 },

    { name: 'Satya' , age : 30 },

    { name: 'Sundar' , age : 50 }

];  


>> for문을 사용했을 때 
for(let i=0; i<users.length; i++){

console.log('name: ' + users[i].name);

} // 

 name: Tim

 name: Satya

 name: Sundar
>> forEach를 사용할 때 
function printName(user){

console.log('name: ' + user.name);

};


users.forEach(printName); //
name: Tim
name: Satya
name: Sundar

예제 2

let words = ['code', 'states'];
undefined
function foo(word) {
console.log(word);
}

words.forEach(foo); 
code
states


function foo(a,b,c) {
console.log(a,b,c);
}  

words.forEach(foo); // 
code 0 (2) ["code", "states"]
 states 1 (2) ["code", "states"]

첫번째는 element를 두번째는 index, 세 번째는 original 값을 불러온다
parameter를 어떤 것으로 해도 무방

0개의 댓글