Iteration Method - 1

.forEach() Method

// 화살표 함수와 함께 사용한 모습
groceries.forEach(groceryItem => console.log(groceryItem));

// 일반 함수와 함께 사용한 모습
function printGrocery(element){
  console.log(element);
}

groceries.forEach(printGrocery);

#### .forEach 와 for 구문의 차이 ```js // forEach() 버전 var arr = [3, 9, 4, 2, 7, 6]; arr.forEach(function (n) { if (n % 2 == 0) { console.log(n); } // 배열의 짝수만 출력하는 프로그램 });

// for 구문 버전
var arr = [3, 9, 4, 2, 7, 6];
for (var i = 0; i < arr.length; i++) {
if (arr[i] % 2 == 0) {
console.log(arr[i]);
}
}

1. forEach 는 스코프를 더럽히지 않는다. 

    for 구문은 배열의 인덱스를 저장하기 위한 임시 변수 i를 할당했다. 사실 이 프로그램은 작아서 임시 변수를 할당하는 것이 큰 문제가 안되지만, 시스템이 커지고 유지보수를 해야한다면 언제 사용한지 모르는 i 때문에 가독성이 떨어지게 된다. 

2. 요소 접근 방법 arr[i] vs n

    forEach 의 콜백 함수의 첫번째 인자로 각 요소의 값이 들어온다. 덕분에 우리는 깔끔한 방법으로 각 요소의 값을 얻을 수 있게 된다.

</br>
### .map() Method
```js
// 문자열 배열에서 문자열 길이만 획득하기
var arr = ['foo', 'hello', 'diamond', 'A'];
var arr2 = arr.map(function (str) {
    return str.length;
});
console.log(arr2); // [3, 5, 7, 1]

arr 에는 문자열이, arr2에는 문자열의 길이가 담겼다.
.map 은 콜백 함수의 리턴을 모아서 새로운 배열을 만드는 것이 목적이다.

위의 예제에서는 str.length 문자열 길이를 반환(return)하여, arr2에 문자열 길이로 이루어진 새로운 배열이 담겼다.

참고: https://bblog.tistory.com/300

.map() 와 .charAt();

const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

const secretMessage = animals.map(animal => {
  return animal.charAt(0);
});
// HelloWorld 출력
// 여기서 animal은 parameter 이므로 사실상 아무 이름이나 해도된다. 

(연습할때 화살표 함수로 지정하는 문법을 틀려서 에러가 났다.)

.charAt() 메소드 안의 숫자는 index 값이다. 0이므로 string의 첫번째 값을 호출한다. map이 loop처럼 함수를 돌려서 새로운 배열에 담는 기능을 하기 때문에 배열의 모든 string의 첫번째 알파벳을 다 가져온다.

맨 마지막 character 를 확인하려면

var str = "HELLO WORLD";
var res = str.charAt(str.length-1);

.map() 을 사용한 또 다른 예시.

const bigNumbers = [100, 200, 300, 400, 500];
const smallNumbers = bigNumbers.map(number => {return number / 100});
console.log(smallNumbers); // [1, 2, 3, 4, 5] 출력

number 라는 parameter 를 받아서 number/100 를 실행하라고 map method 에 넣은 것이다.