[220106] forEach문. 차근차근 알아보기

목차

1.   foreach로 for문을 대신하기

2.   for문의 기본기능

3.   for문을 응용하기

 

---

forEach로 for문을 대신해보자

 

function name() {}

	let newArr=[1,2,3]

	for(let i=0; i<newArr.length; i++){
    	console.log(newArr[i]);
    }
    
    newArr.forEach(v => console.log(v));
    //이게 forEach문을 사용한 문장
    //뭐라는걸까.
}

 

알기 쉽게 감자의 언어로 말해줄래....?

 

---

 

forEach문의 형태

array.forEach( callback( currentvalue[, index[, array]])[, thisArg])

 

 

forEach 매개변수

callback : (필수) 각 요소에 대해 실행할 함수. 뒤에 따라오는 세가지 매개변수를 받는다

currentvalue : (필수) 처리할 현재 요소

index : (필수아님) 처리할 현재 요소의 인덱스

array : (필수아님) forEach()를 호출한 배열

thisArg : (필수아님) callback을 실행할 때 this로 사용할 값.

return : undefined 변수는 있지만 자료형이 정해지지않은 상태

 

forEach를 사용할 배열.forEach (각 요소에 실행할 함수 (처리할 요소 [index[forEach()를 호출한 배열]]) [ 각 요소에 행할 함수를 실행할때 this로 사용할 값) 인데 길다. 너무 길어. 어마무시하게 길어. 그러니까 필수적인것만 남겨놓아보자.

 

 

forEach를 사용할 배열.forEach (각 요소에 실행할 함수)

이렇게 정리하니 볼만하다. 이렇게 사용하면 뭘 할 수 있다는 걸까. 아 모르겠으면 돌려보면 되는거지. 컴퓨터의 연산능력은 나보다 똑똑하니 모르면 돌려보면 되는거임.

 

 

---

 

 

forEach문 : 연결된 배열의 원소만큼! 연결된 함수를 반복 수행! 

let newArr=[1,2,3]

newArr.forEach(v => console.log(v));
//결과
//1
//2
//3

//newArr의 원소가 한번씩 출력되어 총 3번 실행되었다는 것을 알 수 있다.

 

 

forEach문 : 콜백() 안에 함수 넣기 -> forEach( 함수 )

//필수조건만 넣어서 만든 좀더 쉽게 보는 forEach

let newArr =[1,2,3]
newArr.forEach(ingoo);
//매개변수 자리에 인자로 ingoo 함수가 들어가있다.
//특징 : 콜백스택에 ingoo 함수를 담아놓기만할거라 ()가 뒤에 없다

//결과
//1
//1
//1

function ingoo(){ console.log(1)}
//결과를 보면 ingoo함수는 3번 호출 되었다.
//newArr배열의 원소 갯수만큼 반복되었다는 것을 알 수 있다.

 

 

forEach문 : 배열의 원소를 함수 안에 연결하기.

let newArr=[1,2,3]

newArr.forEach(ingoo);

function ingoo(value){
	console.log(value)
    }
//newArr의 원소값 대입
//꼭 value라고 안 적어도 됨! i나 v나 막 적어도 됨!
// 배열의 첫번째 인자값을 받을 수 있는 변수라고 기억하면 굳굳.
//그래서 function ingoo (v) { console.log(v) }	 <- 요 형태도 되는거.

//결과
//1
//2
//3

 

 

---

 

 

forEach문 :  함수명을 만들지 말고 연결해볼까?

//함수명 없이 함수 만들던 기억을 꺼내자!
obj ={
	a: function (){ //함수명 없이 사용가능
    console.log(1);
    }
}

//이걸 응용해서!
let newArr=[1,2,3]
newArr.forEach(ingoo);

function ingoo(v){ //길어서 v라고 적겠음.
	console.log(v)
}

newArr.forEach(function(v) { console.log(v) })
//			(이름없는함수(인자값)){ 실행할 코드 내용 }

//newArr 배열을 연결할건데 말이야
//뭘 할거냐면 forEach를 할거거든.
//누구랑 할거냐면 이름이 없는데 일을 참 잘해- 그냥 흔한 function이지 뭐.
//newArr에서 v를 받아왔으니까 자재는 걱정 안해도 된다고 전해둬-
//오늘은- 받아온 v로 console.log(v)를 할거야