[JavaScript] 함수

함수(Fucntion)

함수의 선언

함수를 정의하고 호출하는 기본 방법이다.

function printHello() {
  console.log('Hello');
}
printHello(); // 출력: Hello

function log(message) {
  console.log(message);
}
log('Hello@'); // 출력: Hello@
log(1234); // 출력: 1234

매개변수

함수에 전달된 매개변수는 값 또는 참조에 의해 전달된다.

function changeName(obj) {
  obj.name = 'coder';
}
const ellie = { name: 'ellie' };
changeName(ellie);
console.log(ellie); // 출력: { name: 'coder' }

디폴트 매개변수(ES6)

함수 호출 시 매개변수를 생략하면 기본값이 사용된다.

function showMessage(message, from = 'unknown') {
  console.log(`${message} by ${from}`);
}
showMessage('Hi!'); // 출력: Hi! by unknown

나머지 매개변수(ES6)

함수에 여러 인잘르 배열로 받을 수 있다.

function printAll(...args) {
  args.forEach((arg) => consol.log(arg));
}
printAll('dream', 'coding', 'ellie'); // 출력: dream, coding, ellie

지역 범위

함수 내부에서 선언된 변수는 함수 외부에서 접근할 수 없다.

// 5. Local scope
let globalMessage = 'global'; // global variable
function printMessage() {
  let message = 'hello';
  console.log(message); // local variable
  console.log(globalMessage);
  function printAnother() {
    console.log(message);
    let childMessage = 'hello';
  }
  // console.log(childMessage); //error
}
printMessage();

반환 값

함수는 값을 반환할 수 있다.

// 6. Return a value
function sum(a, b) {
  return a + b;
}
const result = sum(1, 2); // 3
console.log(`sum: ${sum(1, 2)}`);

---

First-class Function

JavaScript에서 함수는 일급 객체(First-class function)로 취급된다. 이는 함수가 다른 변수와 마찬가지로 취급되며, 다양한 방식으로 활용될 수 있음을 의미한다.

함수 표현식

함수 표현식은 함수를 선언함과 동시에 변수를 할당하는 방식이다. 이 방식은 함수 선언문과는 다르게 호이스팅(Hoisting)의 영향을 받지 않아, 정의된 이후에만 사용할 수 있다.

const print = function () {
  // anonymous function
  console.log('print');
};
print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1, 3));

콜백 함수(Callback Function)

콜백 함수는 다른 함수에 인자로 전달되는 함수를 말한다. 이는 특정 함수의 처리가 끝난 후 실행되어야 할 로직을 외부에서 주입할 때 유용하게 사용된다.

function randomQuiz(answer, printYes, printNo) {
  if (answer === 'love you') {
    printYes();
  } else {
    printNo();
  }
}
// anonymous function
const printYes = function () {
  console.log('yes!');
};

// named function
// better debugging in debugger's stack traces
// recursions
const printNo = function print() {
  console.log('no!');
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

화살표 함수(Arrow Function)

화살표 함수는 더 간결한 문법으로 함수를 선언할 수 있는 ES6의 기능이다. 화살표 함수는 항상 익명 함수로, 주로 콜백 함수로 사용된다.

const simplePrint = () => console.log('simplePrint!');
const add = (a, b) => a + b;
const simpleMultiply = (a, b) => {
  return a * b;
};
simplePrint(); // 출력: simplePrint!
console.log(add(1, 2)); // 출력: 3
console.log(simpleMultiply(2, 2)); // 출력: 4

IIFE(Immediately Invoked Function Expression)

IIFE는 정의되자마자 즉시 실행되는 함수를 말한다. 이 방식은 주로 초기화 코드에서 사용되며, 전역 스코프의 오염을 방지할 때 유용한다.

(function hello() {
  console.log('IIFE');
})(); // 출력: IIFE