저장을 습관화

자바스크립트 .forEach() 본문

공부/JavaScript

자바스크립트 .forEach()

ctrs 2023. 8. 6. 20:07

예시 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