저장을 습관화
자바스크립트 .forEach() 본문
예시 1.
코드
const studentsList = [
{ name: "철수", age: 19 },
{ name: "영희", age: 18 },
{ name: "민철", age: 18 },
{ name: "희망", age: 19 },
];
// ES5 문법
console.log("ES5 문법");
studentsList.forEach(function (student) {
console.log(student);
});
console.log("------------구분선------------");
// ES6 화살표함수 문법
console.log("ES6 화살표함수 문법");
studentsList.forEach((student) => {
console.log(student);
});
실행
$ node test.js
ES5 문법
{ name: '철수', age: 19 }
{ name: '영희', age: 18 }
{ name: '민철', age: 18 }
{ name: '희망', age: 19 }
------------구분선------------
ES6 화살표함수 문법
{ name: '철수', age: 19 }
{ name: '영희', age: 18 }
{ name: '민철', age: 18 }
{ name: '희망', age: 19 }
예시 2.
코드
const studentList = [
{ name: "철수", age: 8, score: 85 },
{ name: "영희", age: 9, score: 90 },
{ name: "민철", age: 9, score: 78 },
{ name: "희망", age: 8, score: 60 },
];
const grade = (score) => {
if (score >= 90) {
return "A";
} else if (score >= 80) {
return "B";
} else if (score >= 70) {
return "C";
} else {
return "재수강";
}
};
studentList.forEach((student) => {
const result = `name: ${student.name}, grade: ${grade(student.score)}`;
console.log(result);
});
실행
$ node test.js
name: 철수, grade: B
name: 영희, grade: A
name: 민철, grade: C
name: 희망, grade: 재수강
예시 3.
코드
const plus = (a, b) => a + b;
const studentsList = [
{ name: "철수", age: 19, math: 85, science: 75 },
{ name: "영희", age: 18, math: 95, science: 83 },
{ name: "민철", age: 18, math: 76, science: 98 },
{ name: "희망", age: 19, math: 56, science: 74 },
];
studentsList.forEach((student) => {
console.log(`${student.name} total: ${plus(student.math, student.science)}`);
});
실행
$ node test.js
철수 total: 160
영희 total: 178
민철 total: 174
희망 total: 130
forEach는 배열 내 각 요소에 대한 반복 작업만 수행하고, 값을 반환하지는 않는다.
즉, 작업의 결과를 변수에 할당하는 등의 기능은 지원하지 않는다.
const solution = (num_list) => {
let num = 1;
let first = num_list.forEach((element) => {
num *= element;
});
console.log(first); // undefined
return num;
};
console.log(solution([3, 4, 5, 2, 1])); // 120
배열 내 모든 요소를 더하거나, 모든 요소를 곱하는 등의 작업의 결과를 리턴받고 싶다면 .reduce()를 사용하여야 한다.
'공부 > JavaScript' 카테고리의 다른 글
자바스크립트 스코프 (scope, 유효 범위) (0) | 2023.08.06 |
---|---|
자바스크립트 콜백 함수 (0) | 2023.08.06 |
화살표 함수 (0) | 2023.08.06 |
자바스크립트 - try catch finally (0) | 2023.08.06 |
자바스크립트 날짜, 시간 표시 (0) | 2023.08.06 |