[JS] Object.values(), reduce(), find(), filter() 메서드

✅ Object.values()

객체의 value들만 모아서 배열로 생성

var scores = {
    kor: 55,
    mat: 75,
    eng: 50,
};

let arr = Object.values(scores);
document.write(arr); // [55, 75, 50]

 

---

✅ Reduce

let avg = arr.reduce((total, num) => total + num) / arr.length;

 

---

✅ Find

주어진 판별 함수를 만족하는 첫 번째 요소를 반환

console.log(arr.find((item) => item < 40))

40보다 작은 요소가 있다면 그 값을 반환하고 없다면 undefined 출력

 

function result () {
    if (arr.find((item) => item < 40) || avg < 60) {
        return "fail";
    } else {
        return "pass"
    }
};

console.log(result()); // pass

40보다 작은 값이 없기 때문에 If문 첫 번째 조건은 false, 평균은 60이기 때문에 두 번째 조건도 fasle

따라서 else문에서 "pass"를 출력

 

---

✅ Filter

filter는 통과하는 요소들을 모아서 새로운 배열로 반환. 아무것도 없다면 빈 배열 반환.

const list = [];
for (const key in scores) list.push(scores[key]); 

if (list.filter((v) => v < 40).length) console.log("fail");
else if (list.filter((a, b) => (a += b)) < 60 * list.length) console.log("fail");
else console.log("pass");

만약 40보다 작은 값이 있으면 length가 0이 아니라서 if문은 true가 되고, "fail"을 출력

누적해서 더하고 그 평균이 60보다 작으면 else if문은 true가 되고, "fail"을 출력

 

---

 

➕ filter vs find

객체 타입과 관련해서 출력에 차이를 보임

// filter
const students = [
{
    name: "john",
    studentId: 2020634693,
    major: "business",
},
{
    name: "amy",
    studentId: 2018346294,
    major: "english",
},
];

students.map(item => {
    if (item.name === "amy") {
        item.major = "computer science";
    }
});
var student = students.filter((n) => n.name == "amy");
console.log(student); // [ { name: 'amy', studentId: 2018346294, major: 'computer science' } ]
console.log(student.major); // undefind

filter은 배열로 반환되어, major 속성을 가져올 수가 없음

 

// find
const students = [
{
    name: "john",
    studentId: 2020634693,
    major: "business",
},
{
    name: "amy",
    studentId: 2018346294,
    major: "english",
},
];

students.map(item => {
    if (item.name === "amy") {
        item.major = "computer science";
    }
});
var student = students.find((n) => n.name == "amy");
console.log(student); // { name: 'amy', studentId: 2018346294, major: 'computer science' }
console.log(student.major); // computer science

find는 기존 타입 그대로 반환되어 major 속성을 가져올 수 있음