[JavaScript] JS의 반복문

그동안 배운 것들이 있었다...

그냥 for문을 써도 되는 상황에 굳이굳이 map을 사용한 나는 바보다

그래서 예전에 정리해둔 반복문을 가져왔다...

 

😎 두줄 요약

객체 순회 할 때 → Object.keys, Object.values, Object.entries

배열 순회 할 때 → forEach, map, filter, reduce 등등

 

✔ for

for (let i = 0; i < 10; i++) {
	console.log(i);
}

• 너도알고 나도알고 모두가 아는 그 for문

 

✔ for in

const obj = {
	name: '김점프',
	age: '4'
}
for (const key in obj) {
	console.log(`${key} : ${obj[key]}`);
}
// name : 김점프
// age : 4

• 해당 객체가 상속받는 프로토타입 체인 상의 모든 property key를 열거 (예시에서는 name, age)

 

✔ for of

const cat = ['김점프', '김병철', '버찌'];
for (const c of cat) {
	console.log(c); // 김점프, 김병철, 버찌 출력
}

 

• iterable 순회 전용 (String, Array, Map, Set, Dom컬렉션 등)
• 개인적으로 파이썬의 for문이랑 비슷하게 생겼다고 생각 (for a in arr: )

 

✔ while

let num = 0;
while (num<10) {
	console.log(num); //0~9 출력
	num++;
}

• 모두가 아는 그 while문

 

✔ do while

do {
	console.log("무조건 한번은 실행함");
} while (false);

• 무조건 한번은 실행되는 그 while문
• 그 다음에도 while문 조건에 맞으면 실행, 아니면 관두고 나옴

 

✔ Object 객체 메서드 (객체 순회 전용)

Object.keys( {name: '김점프', age: '4'} ); // ['name', 'age']
Object.values( {name: '김점프', age: '4'} ); // ['김점프', '4']
Object.entries( {name: '김점프', age: '4'} ); // [ ['name', '김점프'], ['age', '4'] ]

• Object.keys(객체) → key를 배열로 반환
• Object.values(객체) → value를 배열로 반환
• Object.entries(객체) → [key, value]를 배열로 반환 

 

✔ Array.prototype 메서드 (배열 전용)

// 1. forEach
['김점프', '김병철', '버찌'].forEach( (value, index, array) => {
	console.log(value); // 김점프, 김병철, 버찌 출력
} )

// 2.map
const map_result = [1,2,3,4].map( (value, index, array) => {
	console.log(value); // 1,2,3,4 출력
	return value*10; //10, 20, 30, 40을 반환
} )
console.log(map_result); //[10,20,30,40]

//3. filter
const filter_result = [1,2,3,4].filter( (value, index, array) => {
	console.log(value); // 1,2,3,4 출력
	return value > 2; // 2보다 큰 숫자만 return
} )
console.log(filter_result); //[3,4]

// 4. reduce 
const reduce_result = [1,2,3,4].reduce( (pv, cv, index, arr) => {
	return pv + cv; //이전 리턴값 + 현재 값 (누적의 개념)
}, 100); //초기값 = 100
console.log(reduce_result); //100(초기값) +1+2+3+4 = 110이 나옴

1. 배열.forEach( (value, index, array) => { ... } )

• 배열 순회 전용
• 콜백함수의 매개변수로 value(요소값), index(인덱스), array(원본배열)가 들어옴

 

2. 배열.map( (value, index, array) => { ... } )

• forEach와 거의 비슷함
• 각 콜백함수에서 return하는 값들로 새 배열을 만듬!!!!

 

3. 배열.filter( (value, index, array) => { ... } )

• forEach와 비슷하고요
• return하는 값이 true일 때에만, 그 value를 반환 → 그걸 모아서 새로운 배열 생성 후 return

 

4. 배열.reduce( (previousValue, currentValue, currendIndex, array)=>{ ... }, initialValue )

• initialValue를 시작값으로 지정
• 각 콜백함수가 return하는 값이 다음에 실행되는 콜백함수의 previousValue로 들어감
• 최종적으로 마지막 콜백함수가 returh하는 값을 반환함

 

 

👀참고 (감사합니다)

https://curryyou.tistory.com/202

[자바스크립트] 반복문 총정리: for in, for of, forEach 등

 

https://7942yongdae.tistory.com/49

Javascript - Array filter 사용법

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in

for...in - JavaScript | MDN