forEach

PYG·2021년 5월 11일
0

JAVASCRIPT

목록 보기
3/9

forEach

  • Array 객체에서만 사용 가능한 메소드
  • 배열의 요소들을 반복하여 작업을 수행
  • map처럼 변수에 할당하기보다는 반복문이나 조건문과 같이 그냥 바로 호출되는 것이 일반적
  • 배열의 첫 번째부터 마지막까지 반복하면서 item을 꺼낼수 있다
  • map과는 다르게 return 하는 값이 없다
  • 메소드를 호출한 코드를 함수에 할당하면 undefined가 할당된다
  • callback 함수를 이용해 결과 값을 만들려면 함수 밖의 변수를 사용해야 한다
  • 스코프 관리 필요
  • 기존 배열은 변하지 않는다
  • 그러나 콜백함수 내에서 메서드를 호출한 배열을 변경하는 것이 가능
- arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])
- arr.forEach(function(item, index, arr){});

1. 배열 안의 인덱스 나열하기

let fruits = ['banana', 'apple', 'melon'];
let fruit =  fruits.forEach(item => console.log(item));
console.log(fruit);

2. 배열 안의 인덱스 합 구하기

2.1

(function test(){
var testArray = [1,2,3,4,5];
var sum = 0;
    function getSum(value){
        sum += value;
    }
    testArray.forEach(getSum);
    console.log(sum);
})();

-> 15

  • getSum 함수를 callbackFunction 으로 사용
  • getSum 함수의 value는 currentValue
  • 배열 내 인자 수만큼 반복되어 sum 변수에 더해진다

2.2

var testArray = [1,2,3,4,5];
var sum = 0;
testArray.forEach(item => sum += item);
console.log(sum);

-> 15

  • +=는 item = item + sum이란 뜻이다

3. thisArg 활용

  • 프로토타입에 대한 이해 필요
(function test(){
    function Counter(){
        this.sum = 0;
    }
    Counter.prototype.add = function(array){
        array.forEach(function(currentValue){
            this.sum += currentValue;
        }, this);
    }
    var obj = new Counter();
    console.log(obj.sum);
    obj.add([1,2,3,4,5]);
    console.log(obj.sum);
})();

-> 0과 15

  • this는 Counter function
  • obj.add 함수 호출 시 prototype chain 발생

4. 배열 내용 변경 / 삭제

4.1 삭제

let ss = ['바나나', '사과', '딸기'];
	ss.forEach((e) => {
		if(e ==='바나나'){
		ss.shift();
		}
	}
);
console.log(ss);
  • 값은 사과, 딸기

4.2 변경

let vs = ['바나나', '딸기', '사과'];
vs.forEach((e) => {
    if(e==='바나나') {
        vs[0] ='배';
    }
});
console.log(vs);
  • 값은 배, 딸기, 사과

4.3 추가

let vs = ['바나나', '딸기', '사과'];
vs.forEach((e) => {
    if(e==='바나나') {
        vs.push('배');
    }
});
console.log(vs);
  • 값은 바나나, 딸기, 사과, 배

0개의 댓글

관련 채용 정보