두 문법의 차이가 무엇일까요?

JavaScript
1

코드 1번

const staff = [
    { name: "Wesly", position: "musician" },
    { name: "Davis", position: "engineer" },
];

function getMusicians(staff) {
    return staff.filter((member) => member.position === "musician");
}

console.log(getMusicians(staff));

코드 2번

const staff = [
    { name: "Wesly", position: "musician" },
    { name: "Davis", position: "engineer" },
];

function getMusicians(staff) {
    return staff.filter((member) => {
        member.position === "musician";
    });
}

console.log(getMusicians(staff));

코드 1번 같은 경우에는 staff 객체에 position키가 'musician’이라면 getMusicians(staff)함수에서
[ { name: 'Wesly', position: 'musician' } ] 을 리턴하고 코드 2번은 빈 배열 []을 리턴합니다. 둘의 차이라면 staff.filter()메서드에 있는 콜백함수를 인자로 주었는데 콜백함수를 {}로 감쌌느냐 안감쌌느냐에 차이 뿐입니다. 왜 {}로 감싸지 않았을 때는 값을 리턴하는데 감쌌을 때는 빈 배열을 리턴할까요? () => {}형식은 화살표 함수 형식이지 않나요?

2

익명 함수에서 식이 하나고 중괄호가 없으면 return이 있는 거랑 똑같습니다.

const f1 = arg => { return ret; };
const f2 = arg => ret;

위에서 f1과 f2는 같은 함수입니다.

const f3 = arg => { ret; }

f3는 반환값이 없으므로 void 리턴 함수가 됩니다. Array.ptototype.filter함수에 콜백 함수 리턴 값이 undefined 함수면 무조건 false로 처리해서 빈 배열이 나오는 것이겠지요.

참고로 함수 매개변수도 하나라면 괄호를 생략할 수 있고, 오브젝트 리터럴을 반환값으로 쓰려면 중괄호를 괄호로 묶어줘야 return 키워드를 생략할 수 있습니다. 안 그러면 문법 오류 납니다.

const f4 = arg => {
  return { x: 3 };
};
const f4 = arg => ({ x: 3 });
2개의 좋아요
3

감사합니다! 덕분에 도움이 되었습니다.

4

같은 문제로 고민 중이었는데 덕분에 해결했습니다! 감사합니다.

1개의 좋아요