[반복문] for() forEach() map() filter() 어떨때 사용??

이글을쓰게된이유는 forEach()문에서 break 가되지않아서 

디버깅하면서 많이 해맸기때문에 포스팅을하게되었다.

 

이참에 반복문과 데이터를 가공하는 기본을 다져보자

 

 

다른블로그에서 퍼온글이다.

forEach() 하고 map() 함수는둘다 break가 되지않는거구나

 

 

 

실무에서 많이썻던 map() 부터 먼저살펴보고자한다

1. 새로운배열을 만들땐 -> map()을 사용

// chapter1

let array1 = ["크러쉬", "뷔", "태민"];

let arrayList1 = array1.map(function (item) {

return item + "가수";

});

console.log(arrayList1);

//결과 [ '크러쉬가수', '뷔가수', '태민가수' ]

새로운배열을 return해서 그변수에 값을 담아줬다.

 

 

 

let array = [

{ name: "크러쉬", age: "31살" },

{ name: "뷔", age: "28살" },

{ name: "태민", age: "30살" },

];

let arrayList = array.map(function (item) {

return { realName: item.name, realAge: item.age };

});

console.log(arrayList);

//결과 [

// { realName: '크러쉬', realAge: '31살' },

// { realName: '뷔', realAge: '28살' },

// { realName: '태민', realAge: '30살' }

// ]

List데이터의 key이름도 바로 수정이가능하다.

 

 

 

2. 특정조건의 데이터만  반환하고자할때 -> filter()을 사용

 

 

let array2 = [

{ food: "치킨", category: "food", price: 16000 },

{ food: "피자", category: "food", price: 30000 },

{ food: "운동", category: "exercise", price: 0 },

];

let filter2 = array2.filter((item) => item.food === "치킨");

console.log(filter2);

// 결과 [ { food: '치킨', category: 'food', price: 16000 } ]

특정조건에서 참일때의 데이터를 반환해준다.

 

 

let filter3 = array2.filter((item) => item.category === "food");

var filter31 = filter3.map((item) => {

return {

food: item.food,

price: item.price,

kcal: "200kcal",

};

});

console.log(filter31);

//결과

// [

// { food: '치킨', price: 16000, kcal: '200kcal' },

// { food: '피자', price: 30000, kcal: '200kcal' }

// ]

map 과 filter를 병행해서 사용할수도있다.

 

3. 단순반복할때는 forEach()

const array = ["만두", "강정"];

const newArray = [];

array.forEach(function (data) {

newArray.push(data + "음식");

});

console.log(newArray);

return 문이 없어 새로운 배열에 값을 넣어줬다.

 

 

foreach 에서  break를 해주고싶을땐 try catch문을 사용해서 return 하는 방법도 있지만

그럴때는 for문으로 break를 표현해주는 방법이있다.