자바스크립트 공부2 - 함수

함수 선언문과 표현식

함수 선언문

주로 코드의 독립된 부분에서 함수 정의가 필요할 때 사용됩니다.

호이스팅되어 선언문 위치와 상관없이 코드 내의 다른 위치에서 호출할 수 있습니다.

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Jane')); // "Hello, Jane!"

console.log(add(1, 2)); // 3

function add(a, b) {
  return a + b;
}

 

함수 표현식

변수를 통해 함수 값을 할당하는 방식입니다. 익명 함수나 익명 함수를 변수에 할당한 형태로 주로 사용됩니다.

호이스팅의 영향을 받지 않습니다.

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet('Jane')); // "Hello, Jane!"

console.log(add(1, 2)); // Uncaught ReferenceError: add is not defined

const add = function(a, b) {
  return a + b;
};

 

각 방법의 특성을 이해하고 일관된 코딩 컨벤션으로 작성하는게 중요합니다. 코드의 가독성과 유지보수성에 큰 영향을 미칠 수 있습니다.

---

함수의 리턴 값/ 매개변수

• 매개변수- 함수가 호출될 때 전달받는 값들
• 리턴 값- 함수가 작업을 수행한 후 반환하는 값

function add(a, b = 0) { // a: 매개변수 b에 기본값 0 설정
  return a + b;
}

console.log(add(5, 3)); // 리턴값: 8, 매개변수 a=5, b는 3으로 함수에게 전달
console.log(add(5));    // 리턴값: 5, 매개변수 a=5을 전달, b는 기본값인 0

---

콜백 함수 활용(map(), forEach(), filter())

map()

배열의 각각의 요소에 대해 함수(콜백)를 호출하여 새로운 배열을 생성.

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5]

 

forEach()

각 요소에 대해 제공된 함수를 실행. 별도의 새로운 배열은 생성하지 않음.

반환값이 없으며 콘솔 출력 등에 사용됨.

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(num => {
  console.log(num * 2);
});

// Output:
// 2
// 4
// 6
// 8
// 10

 

filter()

각 요소에 대해 재공된 함수로 테스트 수행. 그 결과가 true인 요소들만 포함하는 새 배열 생성.

const numbers = [1, 2, 3, 4, 5];

const evens = numbers.filter(num => num % 2 === 0);

console.log(evens); // [2, 4]
console.log(numbers); // [1, 2, 3, 4, 5]