[JS] 루프와 반복 함수 이해하기

해당 글의 목적은 배열에 대한 반복문으로써 필요한 데이터에 대해 도출해 내는 함수에 대해서 공부하는 목적으로 작성하였습니다.

 

루프와 반복 함수 요약본

---

함수	설명	함수 반환값	반복문 return 값	추가 시점
for	배열내에서 객체를 반환받기 위해서 순회를 하는 함수이다.	undefined	속성(key), 속성값(value) 반환	ES5 이전
for/in	배열내에서 객체값을 반환받기 위해서 순회를 하는 함수이다.	undefined	속성값(value) 반환	ES5 이전
for/of	배열내에서 객체를 반환받기 위해서 순회를 하는 함수이다. (배열 뿐만 아니라 이터러블한 객체를 모두 순회할 수 있음)	undefined	속성(key), 속성값(value) 반환	ES6
forEach	배열내에서 객체를 반환받기 위해서 순회를 하는 함수이다.	undefined	속성(key), 속성값(value) 반환	ES6
map	배열내에서 특정 조건에 해당하는 값만 도출 혹은 제외하여 재 가공된 배열로 받환 받기 위해서 사용하는 함수이다.	조건에 만족하는 ‘배열 값’ 혹은 ‘빈 배열’	속성(key), 속성값(value) 반환	ES6
filter	배열내에서 특정 조건에 해당하는 값만 도출 혹은 제외하여 재 가공된 배열로 받환 받기 위해서 사용하는 함수이다.	조건에 만족하는 ‘배열 값’ 혹은 ‘빈 배열’	속성(key), 속성값(value) 반환	ES6

 

1) for

---

💡 배열 내에서 객체를 반환받기 위해서 순회를 하는 함수이다. 반복 순회하면서 ‘속성’ 및 '속성 값’을 반환해준다.

 

구조

---

for ([initialization]; [condition]; [final-expression]){
   statement
}

initialization
식(할당식 포함) 또는 변수 선언. 주로 카운터 변수를 초기화할 때 사용합니다. 
var 또는 let 키워드를 사용해 새로운 변수를 선언할 수도 있습니다.  

condition
매 반복마다 평가할 식. 평가 결과가 참이라면 statement를 실행합니다.
이 식을 넣지 않았을 때 계산 결과는 언제나 참이 됩니다. 계산 결과가 거짓이라면 for 문의 바로 다음 식으로 건너뜁니다.

final-expression
매 반복 후 평가할 식. 다음번 condition 평가 이전에 발생합니다. 주로 카운터 변수를 증감하거나 바꿀 때 사용합니다.

statement
조건의 평가 결과가 참일 때 실행하는 문. 여러 문을 반복 실행하려면 블록 문({... })으로 묶어야 합니다.
아무것도 실행하지 않으려면 공백 문(;)을 사용하세요.

return (함수 반환 값)
undefined 값을 반환한다.

 

사용 예제

---

const userAge = [ 29, 30, 31, 32 ];

for (let i = 0; i < userAge.length; i++) {
   console.log(userAge[i]); // 29 , 30 , 31, 32를 순차적으로 반환
}

const userInfo = [{
	userId: "adjh54",
	userAge: 29
},
{
	userId: "ckask123",
	userAge: 30
}];

for (let j = 0; j < userInfo,length; j++) {
	console.log(userInfo[j]) // Object를 순차적으로 반환
}

// Error :: Unexpected token 'for'
const forStatement = for (let i = 0; i < userAge.length; i++) { return userAge[i]; }

 

 

2) for/in

---

💡 배열 내에서 객체를 반환받기 위해서 순회를 하는 함수이다. 반복문을 순회하면서 ‘속성 값’을 반환해준다.

 

구조

---

for (variable in object) { 
	... 
}

variable
매번 반복마다 다른 속성 이름(Value name)이 변수(*variable)*로 지정됩니다.

object
반복 작업을 수행할 객체로 열거형 속성을 가지고 있는 객체.

return (함수 반환 값)
undefined 값을 반환한다.

 

사용 예제

---

const userAge = [ 29, 30, 31, 32 ];

for (let item in userAge) {
   console.log(item); // 29 , 30 , 31, 32를 순차적으로 반환
}

const userInfo = [{
	userId: "adjh54",
	userAge: 29
},
{
	userId: "ckask123",
	userAge: 30
}];

for (let userItem in userInfo) {
	console.log(userItem) // Object를 순차적으로 반환
}

// Unexpected token 'for'
const forStatement = for (let item in userAge) {
	console.log(item)
}

 

3) for/of

---

💡 배열 내에서 객체를 반환받기 위해서 순회를 하는 함수이다. 이외에 반복 가능한 객체(Iteratable Object)에 대해서도 순회를 할 수 있다는 점이 있다. 반복문을 순회하면서 ‘속성값’을 반환해준다.

반복가능한 객체(=리터럴 객체, Iteratable Object) 란?
Array, Map, Set, String, TypedArray, arguments 객체 등이 이에 해당이 되며,
이 객체들에 대해서 순회를 돌면서 각각의 값을 가져올 수 있다.

 

구조

---

for (variable of iterable) {
  statement
}

variable
각 반복에 서로 다른 속성 값이 variable에 할당됩니다.

iterable
반복되는 열거 가능(enumerable)한 속성이 있는 객체.

return (함수 반환 값)
undefined 값을 반환한다.

 

사용 예제

---

// Array 순회
const arrayObj = [ 29, 30, 31, 32 ];

for (let arrItem of arrayObj){
   console.log(arrItem); // 29 , 30 , 31, 32를 순차적으로 반환
}

// String 순회
const stringObj = "adjh54";

for(let strItem of stringObj){
   console.log(strItem); // "a", "d", "j', "h", "5", "4"를 순차적으로 반환
}

// Map 순회
let mapObj = new Map([["a", 1], ["b", 2], ["c", 3]]);

for(let mapItem of mapObj){
   console.log(mapItem); // [a,1], [b,2], [c,3]를 순차적으로 반환
}

// Array Object 순회
const userInfo = [{
	userId: "adjh54",
	userAge: 29
},
{
	userId: "ckask123",
	userAge: 30
}];

for (let userItem in userInfo) {
	console.log(userItem) // Object를 순차적으로 반환
}

// Unexpected token 'for'
const forStatement = for (let item of userAge) {
	console.log(item)
}

 

4) forEach

---

💡 배열 내에서 객체를 반환받기 위해서 순회를 하는 함수이다. 반복문을 순회하면서 ‘속성 값’을 반환해준다.

 

구조

---

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

callback
각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받습니다.

currentValue
처리할 현재 요소.

index  (Optional)
처리할 현재 요소의 인덱스.

array (Optional)
forEach()를 호출한 배열.

thisArg (Optional)
callback을 실행할 때 this로 사용할 값.

 

사용 예제

---

const items = ['item1', 'item2', 'item3'];

// ES5
items.forEach(function(item){
	console.log(item);
});

// ES6
items.forEach((item) => {
	console.log(item);
});

// result: undefined
const list = items.forEach((item) =>{
	return item + "A"
});

 

5) map

---

배열 내에서 특정 조건에 해당하는 값만 도출 혹은 제외하여 재 가공된 배열로 반환 받기 위해서 사용하는 함수이다.

 

구조

---

arr.map(callback(currentValue[, index[, array]])[, thisArg])

 

callback
새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

currentValue
처리할 현재 요소.

index (Optional)
처리할 현재 요소의 인덱스.

array (Optional)
map()을 호출한 배열.

thisArg (Optional)
callback을 실행할 때 this로 사용되는 값.

return (함수 반환 값)
배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.

 

사용 예제

---

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

 

 

6) filter

---

💡 배열 내에서 특정 조건에 해당하는 값만 도출 혹은 제외하여 재 가공된 배열로 반환 받기 위해서 사용하는 함수이다.

 

구조

---

arr.filter(callback(element[, index[, array]])[, thisArg])

callback
각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.

element
처리할 현재 요소.

index (Optional)
처리할 현재 요소의 인덱스.

array Optional
filter를 호출한 배열.

thisArg Optional
callback을 실행할 때 this로 사용하는 값.

return (함수 반환 값)
테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.

 

사용 예제

---

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

 

 

오늘의 결론

---

💡 각각 상황에 맞는 루프와 반복 함수를 선택하여서 알맞게 사용하자.

감사합니다😀