array methods

array methods

• array-method
• 참고사이트

array-method

map과 forEach

• array.map() : return value가 있고 함수의 결과값들로 구성된 새로운 배열
• array.forEach() : return value가 undefined 인자 : 첫번째 인자는 배열 원소의 값, 두번째 인자는 인덱스, 세번째는 배열 그 자체

---

기본적으로 forEach와 map은 첫번째 전달인자로 함수를 받는다. 배열의 각 항목에 대한 콜백함수의 시간을 실행한다. 둘의 명확한 차이라고 하면 return이 있는가 없는가이다.

---

array.map()

: 매서드의 return값은 수정된 값으로 다시 생성된 배열, 변환된 배열을 반환하고 원래 배열은 변경하지 않는다.

const originalArray = [1, 3, 5, 7]; //originalArray라는 4개의 값들을 담은 array변수를 선언한다. const newArray = originalArray.map(funcion addOne(number){ return number+1; /*newArray라는 변수에 originalArray에 있는 값들을 map method를 사용해서 배열안에 있는 값들 하나하나를 function실행한다. 하나씩 받아온 값들이 1과 더해져 다시 return배열에 return된다.*/ }); console.log(originalArray); //[1, 3, 5. 7] //원래의 배열값은 그대로 유지된다. console.log(newArray); //[2, 4, 6, 8] //array에는 originalArray에 있는 값에서 +1을 한 값들을 출력해낸다.

반복문처럼 배열을 반복해주지만 반환된 배열을 반환 -> 원래 배열은 변경하지 않음.

const arr = [1, 3, 5]; const arrMap = arr.map(x => x+x); /*function arr.map(function(x){ return x+x })와 동일하다.(ES6)*/ console.log(arrMap); //[2, 6, 10]

위에서 return x+x를 안해도 된다. 왜?!

함수 내부에 실행내용이 딱히 없고 return만 한다면 return키워드가 생략이 가능하다. 이 경우 return값이 true, false여도 return이 불필요하다.

array(arr)타입의 데이터를 요소 갯수만큼 반복합니다. 반복할 때 마다 실행할 함수를 parameter로 전달한다. callback함수에서 array의 요소를 인자(x)로 받는다.

array.forEach()

map의 경우 반환값이 새 배열에 변환된 값으로 사용이 되지만 forEach는 아무것도 반환하지 않는다. forEach는 단지 for문 대신 사용하는 반복 method

const myArr = [1, 3, 5, 7, 9]; myArr.map(number => { console.log(number); //1 3 5 7 9 }); myArr.forEach(number => { console.log(number); //1 3 5 7 9 }); //이 경우 map과 forEach의 출력값이 같다.

그럼 어디서 forEach를 사용해야해?

forEach는 array에 들어있는 값들 중 내가 찾고 싶은 특정한 값을 찾아서 빈 배열에 넣어주는 용도이다.

let startWithNames = []; let names = ['b', 'bb', 'bbb', 'abc']; names.forEach(el => { if (el.startsWith('b')) { startWithNames.push(el); } }); /*el=names를forEach해서 각각 받은 값을 하나하나 가져와서 'b'라고 시작하는 글자가 있으면 startWithNames에 넣기*/

let has = false; //has를 거짓이라고 뒀을 때 let arr = ['a', 'b', 'c', 'd']; arr.forEach(el => { it(el === 'd') { has = true; return; /*el가 문자열'd'와 같으면 has변수를 true값으로 변경해준 뒤 return한다.*/ } console.log(has); //has가 true가 되었을 때, 반복문을 빠져나오니까 true로 출력된다. });

startsWith()

어떤 문자열이 특정 문자로 시작하는지 확인해서 결과를 true 또는 false로 반환.

let startWithNames = []; let names = ['g', 'o', 'to', 'th', 'e', 'home']; names.forEach(el => { if(el.startWith('t')){ startWithNames.push(el); } //만약 el가 't'로 시작한다면 그 값을 startWithNames에 넣어줘! });

오늘 내가 실수했던 부분 되짚어보기

• 첫번째 실수

  let numBoolean = [] let nums = [100, 9, 30, 7] const moreThan100 = nums => { nums.map(x => { if(x>=100){ numBoolean.push(true); } else { numBoolean.push(false); } return numBoolean; }) };

  map를 사용하면 return이 자동적으로 되기 때문에 굳이 빈배열에 push해줄 필요는 없다.

• 두번째 실수

  const dateArr = [] const dates = ['2019-03-21', '2019-04-21', '2019-05-21'] const formatDate = dates => { dates.map(d => { const dateSplit = d.split('-'); if(dateSplit[0].length == 4&&dateSplit[1].length == 2&&dateSplit[2].length == 2){ dateArr.push(dateSplit[0]+"년 " + dateSplit[1]+"월" + dateSplit[2]+"일") } /*배열에서 받아온 하나의 값을 split() method를 통해서 -를 기준으로 잘라준 뒤 index값으로 string을 더해준다.*/ }); }

  if문을 굳이 사용할 필요가 없다. index값을 텍스트와 합쳐주면 된다.

수정한 코드

const moreThan100 = numsArr => { return numsArr.map(num => num >= 100) //조건자체가 true/false니깐 }; moreThan100([100, 9, 30, 7])

let numBoolean = []; let nums = [100, 9, 30, 7]; const moreThan100 = numsArr => { return numsArr.map(num => { if(num >= 100){ return true; } else { return false; } }); };

const dateArr = [] const dates = ['2019-03-21', '2019-04-21', '2019-05-21'] const formatDate = dates => { dates.map(d => { const dateSplit = d.split('-'); dateArr.push(dateSplit[0]+"년 " + dateSplit[1]+"월 " + dateSplit[2]+"일") }); return dateArr }

참고사이트

• map와 forEach 정리가 잘 된 블로그
• map와 forEach의 다양한 예문이 있는 사이트 E