14-3. Array 오브젝트(ES5 기준) / 콜백 함수를 가진 Array 메소드, forEach()

콜백 함수를 가진 Array 메소드

지금부터 다루는 7개 메소드는 모두 콜백 함수를 호출합니다.
키워드는 시맨틱과 독립성입니다.

forEach()

• 배열의 엘리먼트를 하나씩 읽어 가면서 콜백 함수 호출

• 콜백 함수 파라미터

  • 엘리먼트 값, 인덱스, 배열 전체

      var list = ["A", "B", "C"];
      list.forEach(function (value, index, array) {
          console.log(value + ":" + index + ":" + array);
      })
      // A:0:A,B,C
      // B:1:A,B,C
      // C:2:A,B,C
    

    1. 배열의 첫 번째 엘리먼트인 “A”를 읽습니다.
    2. 콜백 함수를 호출하면서 파라미터에 엘리먼트 값, 인덱스, 배열 전체 순서로 설정
    3. 콜백 함수의 함수 코드를 실행
       console.log() 실행
    4. 다음 엘리먼트를 읽습니다.
    5. 2번에서 4번을 배열 끝까지 반복합니다.

forEach 메소드는 엘리먼트 수만큼 콜백함수를 호출합니다.
그리고 콜백함수를 호출할 때마다 엘리먼트 값, 인덱스, 배열 전체를 파라미터로 넘겨줍니다.
7개 메소드가 다 이와 같은 형태로 콜백 함수를 호출합니다.

그런데 forEach의 콜백 함수에 break문과 continue 문을 사용할 수 없습니다.
따라서 처음부터 끝까지 반복을 하게 됩니다.
이것이 forEach의 특성이며 시맨틱입니다.

forEach : 무조건 처음부터 끝까지 반복실행된다.
도중에 빠져나갈 수 없고 continue 문으로 for문처럼 처리할 수도 없다.

하지만 throw 문은 사용 가능합니다.

• break, continue 사용 불가
  throw는 사용 가능

그런데 콜백 함수를 한번 분리해봤습니다.

• 콜백 함수 분리(독립성)

    var list = ["A", "B", "C"];
    var fn = function (value, index, array) {
        console.log(value + ":" + index + ":" + array);
    };
    list.forEach(fn);
    // A:0:A,B,C
    // B:1:A,B,C
    // C:2:A,B,C
  

  1. 위의 코드 예시와 코드가 같습니다.
  2. 단지, 콜백함수를 분리한 것 뿐입니다.

forEach 메소드의 콜백함수 호출을 보시면 () 소괄호가 없습니다.
함수 이름만 적혀있습니다.
그 이유는 forEach메소드에 함수를 호출하는 기능을 갖고있기 때문에 그렇습니다.

여러분들 같으면 바로 위의 콜백함수가 분리된 형태를 취하시겠습니까, 아니면 콜백함수를 직접 적어주는 형태를 취하시겠습니까?
당연히 분리된 형태죠?
그때마다 콜백함수를 작성하면 똑같은 코드가 중복될 수 있습니다.
그렇게되면 코드가 길어지고 지저분해집니다.
위와 같이 코드 중복을 방지하기 위해 콜백함수를 별도로 분리해놓을 수 있습니다.
이것이 정상적인 방법입니다.

그러면 list에 데이터만 바꿔주면 list.forEach(fn) 이 부분만 복붙하면 됩니다.
콜백함수는 복붙하지 않아도 됩니다.

이것이 바로 콜백함수의 독립성입니다.
또한 프로그래밍 기법이기도 합니다.
이것은 기본입니다.

코드가 중복되어선 안되는 겁니다.

• this로 오브젝트 참조

    var list = [1, 2];
    var fn = function (value, index, array) {
        console.log(value + this.ten);
    };
    list.forEach(fn, {ten: 10});
    // 11
    // 12
  

  1. this로 오브젝트를 참조합니다.

  2. this.ten의 값은 10입니다.

  3. 함수 안에서 값(데이터)을 사용하는 방법

     • 4가지 : 파라미터, 변수, this로 참조, 함수 호출(반환값)

     4가지 방법으로 값을 사용할 수 있다는 것은 함수에서 구할 수 있는 요건을 다 갖추었다는 뜻입니다.
     만약에 this가 빠졌다면 이것은 불완전한 상태가 되었을 겁니다.
     그런데 this도 있으니 완전한 형태로 독립적으로 콜백함수를 만들 수 있습니다.

  ---

  1. 콜백 함수의 완전한 독립성을 보장