• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 아이템 반복

map 이란?

map은 배열(Array) 객체의 메서드로, 배열의 각 요소에 주어진 함수를 호출하여 새로운 배열을 생성합니다. 원본 배열은 변경되지 않아요!

소괄호와 중괄호의 차이

소괄호는 함수 호출이나 인수를 전달할 때 사용됩니다. map 메서드를 사용할 때는, 콜백 함수의 배열을 인수로 전달하기 위해 소괄호를 사용해요.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function(num) {
    return num * 2;
});
console.log(doubled); // [2, 4, 6, 8]

중괄호는 주로 객체를 정의하거나, 함수 본체를 정의할 때 사용됩니다. map의 콜백함수에서 함수의 본체를 묶는데 사용됩니다.

const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => {
    return num * num; // 중괄호로 감싸서 여러 줄의 코드를 포함할 수 있습니다.
});
console.log(squared); // [1, 4, 9, 16]

화살표 함수에서 소괄호 생략이 가능할까요?

정답은 상황에 따라 가능합니다! 본문이 한줄이라면 생략이 가능합니다.

하지만 리턴값이 객체일경우, 객체의 중괄호가 함수의 중괄호가 되어버리기 때문에 생략이 불가능합니다.

❗️화살표 함수를 사용할경우 return 문 사용에 유의하세요! 소괄호를 사용한 화살표 함수의 경우, 소괄호로 감싸진 부분이 return 문을 사용하지 않아도 함수의 결과가 반환됩니다.

const add = (a, b) => (a + b); // 소괄호 사용
console.log(add(2, 3)); // 5

하지만 중괄호로 감싸진경우 명시적으로 return 문을 사용해야 값을 반환합니다. 두가지 경우를 유의하여 사용해주세요!

const addWithBlock = (a, b) => {
    return a + b;// 중괄호 사용
};
console.log(addWithBlock(2, 3));// 5

📝 실습 코드