자바스크립트 함수

자바스크립트의 함수는 코드의 재사용성을 높이고, 복잡한 작업을 간결하게 표현하는 데 도움이 됩니다. 또한 모듈화와 코드의 구조화에 중요한 역할을 하여, 이벤트 처리, 비동기 프로그래밍, 클로저와 같은 고급 자바스크립트 개념의 기반이 됩니다.

함수의 특징

• 일급 객체(First-Class Objects) : 자바스크립트에서 함수는 일급 객체로 취급됩니다. 이는 함수를 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수에서 반환할 수 있음을 의미합니다.
• 클로저(Closures) : 함수는 자신이 선언될 때의 환경을 기억하는 클로저를 형성할 수 있습니다.
• 고차 함수(Higher-Order-Functions) : 다른 함수를 인자로 받거나 함수를 결과로 반환하는 함수입니다.
• 재사용성 : 함수를 사용하면 동일한 코드를 여러 곳에 중복해서 작성하지 않아도 되기 때문에 유지보수를 용이하게 하며, 코드의 가독성이 향상됩니다.

함수의 기본

• 함수 선언(Declaration) : "function"키워드를 사용하여 함수를 선언합니다.

function greet(name) { // name : 파라미터(Parameter)
  return 'Hello, ${name}!';
}

• 함수 호출(Invocation) : 선언된 함수는 이름을 통해 호출할 수 있습니다.

let message = greet('dongoori'); // dongoori : 인수(Argument)
console.log(message); // 출력 : Hello, dongoori!

• 매개변수(Parameters)와 전달인자(Arguments) : 함수에는 매개변수를 정의할 수 있으며, 함수 호출 시 인수(전달인자)를 전달할 수 있습니다. 
• 리턴 값(Return Value) : 'return'문을 사용하여 함수의 결과값을 반환할 수 있습니다. 

함수 호이스팅

함수 호이스팅은 함수 표현식에서는 쓸 수 없고 함수 선언에만 적용됩니다. 

console.log(sum) // Reference Error: 초기화 되기 전에는 함수sum에 접근할 수 없습니다.

const sum = function(a) {
  return a * a
}

다양한 함수 선언 방법

• 함수 선언식(Function Declarations) : 위와 같은 방법을 함수 선언식이라고 합니다.
• 함수 표현식(Function Expressions) 
  - 익명 함수(Anonymous Function)

let test = function(number) {
  return number * number;
}

        - 이름이 있는 함수(Named Function)

let test = function square(number) {
  return number * number;
}

• 화살표 함수(Arrow Functions) : ES6에서 도입된 간결한 방법으로 함수를 정의할 수 있습니다.

let square = (number) => number * number;

• 콜백 함수(Callback Function) : 콜백 함수는 다른 함수에 인자로 전달되는 함수로, 그 함수가 실행될 때 호출됩니다. 콜백 함수는 자바스크립트의 비동기 처리(파일 읽기, 네트워크 요청), 이벤트 처리(클릭, 키보드 입력 등), 함수형 프로그래밍 등에서 광범위하게 사용됩니다. 여러 콜백 함수가 중첩되어 복잡한 구조를 만들 때 콜백 지옥에 빠지게 되는데, 이를 해결하기 위해서 프로미스(Promise) 나 async/await와 같은 방법을 사용할 수 있습니다. 

function fetchData(callback) {
  // 비동기 작업 수행(ex.데이터 로드)
  setTimeout(() => {	// 일정 시간을 기다린 후 실행해야 할 경우 사용
    const data = 'some data';
    callback(data);
  }, 1000); // 두 번째 인자로 지연시간을 밀리초(ms)단위로 받음
}

fetchData((data) => {
  console.log(data); // 1초 후 'some data'출력
});

// 이벤트 리스너에서의 콜백
const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log('Button was clicked!');
});