Why is filter method not working properly?

Question

I'm trying to save the names of the students who scored 80 or more in a variable, but I couldn't manage to do it with filter, it returns the whole object although I specified that I want it to print the key values of these objects only, which is the names of these students.

My code:

// Students names/scores
let students = [
    {name: "Ahmed" , score: 84},
    {name: "Samira" , score: 69},
    {name: "Dana" , score: 75},
    {name: "Basil" , score: 100},
    {name: "Fahad" , score: 91},
    {name: "Aljawhara" , score: 80},
    {name: "Fadi" , score: 70},
]


// Students who scored 80 or more using filter
let studentsScoredMoreThan80 = students.filter((item,index,array) => {
    if(item.score >= 80) return item.name;
})
console.log(studentsScoredMoreThan80);

This is what it prints:

How do I get just the names of the students who scored 80 or more?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter — Marc, Jun 16 '21 at 14:16
[Duplicate](//google.com/search?q=site%3Astackoverflow.com+js+filter+doesn%E2%80%99t+return+individual+properties) of [use filter to return property values in an object](/q/31201262/4642212). Familiarize yourself with [how to access and process nested objects, arrays or JSON](/q/11922383/4642212) and how to use the [`Array`](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Static_methods) methods (both static and on prototype). — Sebastian Simon, Jun 16 '21 at 14:16

score 2 · Answer 1 · answered Jun 16 '21 at 14:18

Filter just filters the list, it doesn't project list items into a new structure.

What you're looking for is a combination of filter and map. First filter your list:

let studentsScoredMoreThan80 = students.filter(item => item.score >= 80);

Then map the results to the new structure you want:

studentsScoredMoreThan80 = studentsScoredMoreThan80.map(item => item.name);

Jeremy Thille · Answer 2 · 2021-06-16T14:39:13.363

Filter ~~removes elements from an array~~ starts with an array, keeps only some of its elements based on a condition, and returns a new array, leaving the original one untouched. It does nothing else. It expects true or false as a return value (meaning keep or discard), but you're returning item.name (which is truthy, so it works like true).

Then you need to transform a full student object into just a string (their name) using map :

let students = [
    {name: "Ahmed" , score: 84},
    {name: "Samira" , score: 69},
    {name: "Dana" , score: 75},
    {name: "Basil" , score: 100},
    {name: "Fahad" , score: 91},
    {name: "Aljawhara" , score: 80},
    {name: "Fadi" , score: 70},
]


// Students who scored 80 or more using filter
let studentsScoredMoreThan80 = students
                                  .filter(student => student.score > 80)
                                  .map( student => student.name);

console.log(studentsScoredMoreThan80)

_"Filter removes elements from an array."_ weeeellll, strictly it doesn't remove _anything_. — Jamiec, Jun 16 '21 at 14:27
Yeah, my bad, indeed. It returns a _new_ array based on the original one, minus the removed elements. Answer edited — Jeremy Thille, Jun 16 '21 at 14:36

score 0 · Answer 3 · answered Jun 16 '21 at 14:34

The return value of 'callback' in 'Array.filter' is converted to 'Boolean', if 'item.score >= 80' returns a string and is converted to 'true', otherwise 'undefined' is returned and is converted to 'false', if you just want student.name, use Array.map(callback)

Why is filter method not working properly?

3 Answers3