Sự khác nhau giữa Map và ForEach trong Javascript

Khi làm việc với javascript, chắc hẳn các bạn đã được nghe rất nhiều về các Array methods như Map và ForEach. Cùng xem sự khác biệt giữa chúng nhé.

Sự khác nhau giữa Map và ForEach

1. Giá trị trả về

Một trong những sự khác biệt chính giữa 2 method này là giá trị trả về 😄

forEach() sẽ trả về giá trị undefined, trong khi map() sẽ trả về một mảng mới với cùng kích thước với mảng ban đầu.

Cùng xem ví dụ bên dưới:

let numbers = [5, 4, 3, 2, 1]

console.log(numbers.map(element => element * element)) //[ 25, 16, 9, 4, 1 ]

console.log(numbers.forEach(element => element * element)) //undefined

2. Khả năng kết hợp với method khác

Điểm khác biệt thứ hai chính là khả năng kết hợp với method khác, vì map() sẽ return về một mảng và khi đó nó có thể kết hợp các method (như filter(),reduce(),sort(),..).

còn forEach() như các bạn có thể đoán nó return về undefined nên đó là điều bạn không thể làm với method này.

let array = [1, 2, 3, 4, 5];

const newArray = array
    .map((element) => element * 2)
    .filter((number) => number < 5)
    .reduce((result, curr) => (result += curr));
console.log(newArray); // 6

const newArrayForEach = array
    .forEach((element) => element * element)
    .filter((x) => x > 9);
console.log(newArrayForEach); // Cannot read property 'filter' of undefined

Khi nào nên sử dụng map() và forEach()

Theo kinh nghiệm của mình thì nếu bạn muốn sử dụng một method, bạn muốn duyệt qua các phần tử mà không cần lưu kết quả của hàm thì method nên được sử dụng là forEach()

let nameArray = ['trang', 'hung', 'dung'];

nameArray.forEach(name => {
  console.log(name + `, you're awesome`);
});

// trang, you're awesome
// hung, you're awesome
// hung, you're awesome

console.log(nameArray) // ['trang', 'hung', 'dung']

Ngược lại, nếu bạn cần kết quả của hàm để thực thi một đoạn code khác, thì ta nên sử dụng map()

let nameArray = ['trang', 'hung', 'dung'];

let newNameArray = nameArray.map((name) => {
    return name + `, how old are you?`;
});
console.log(newNameArray);
// ["trang, how old are you?", "hung, how old are you?", "dung, how old are you?"]

Kết luận

Trên đây là những điểm khác nhau giữa forEach() và map() mà trong quá trình học javascript mình nhận thấy được.

Hy vọng bài viết này có thể giúp bạn có thể hiểu hơn về 2 method này. happy coding 😅😅

Một số bài viết hay khác:

1. Khác nhau giữa for...in và for...of JavaScript
2. replaceAll Javascript là gì?
3. JavaScript at() method có gì hay? Tìm hiểu về method at() trong Javascript
4. Sự khác biệt giữa undefined vs null JavaScript thông qua ví dụ đơn giản