[JavaScript] 함수

2023.12.04.월

함수

함수는 재사용 가능한 코드 블록을 정의하는 데 사용된다

함수를 사용하면 특정 작업을 수행하는 코드를 그룹화하고 호출할 수 있다

 

함수 정의와 호출

`function` 키워드를 사용하여 정의하며

함수의 이름, 매개변수 목록, 중괄호로 둘러싸인 코드블록으로 구성된다

// 함수 정의
function add(a, b) {
  return a + b;
}

// 함수 호출
let sum = add(3, 5);
console.log(sum); // 출력 결과: 8

 

함수의 매개변수에 기본값을 설정할 수 있다(ES6부터 가능)

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet();      // 출력 결과: Hello, Guest!
greet("John"); // 출력 결과: Hello, John!

기명함수와 익명함수

기명함수는 앞서 다루었던 흔한 형태의 함수이다

말그대로 이름이 있는 함수이다

이름으로 호출하여 여러 번 사용가능하고 참조할 수 있다

주로 함수를 여러 곳에 재사용하거나 재귀적인 호출을 할 때 쓰인다

 

반면에 익명함수는 이름이 없는 함수이다

변수에 할당되거나 다른 함수의 매개변수로 사용된다

주로 한번만 사용되거나 특정 컨텍스트에서만 필요한 작은 코드 블록을 정의할 때 사용된다

클로저(Clousure) , 자유 변수 캡처를 생성할 때 사용된다

클로저는 함수내에서 외부 변수를 참조하는 함수를 의미하며 비동기나 콜백 함수에서 활용된다

// 기명 함수의 예제
function add(a, b) {
  return a + b;
}

// 함수 호출
let result = add(3, 5);
console.log(result); // 출력 결과: 8

// 익명 함수의 예제
let multiply = function(x, y) {
  return x * y;
};

// 변수에 할당된 익명 함수 호출
let result = multiply(4, 6);
console.log(result); // 출력 결과: 24

 

한번만 사용할 것인데도 그냥 코드블럭으로 두는 것이 아닌 익명 함수를 정의하는 것에 의문이 들 수 있다

 

이는 가독성과 목적성을 위해 코드 블럭을 묶거나 변수의 스코프 관리를 하거나

콜백 함수로 활용 등의 여러 장점이 있을 수 있다

화살표 함수

ES6 부터 도입된 함수의 새로운 표현 방식이다

보다 더 간결하게 함수를 정의할 수 있고

함수 내부에 `this`를 더 직관적으로 다룰 수 있다

// 일반 함수 표현식
const add = function(a, b) {
  return a + b;
};

// 화살표 함수
const addArrow = (a, b) => a + b;

 

화설표 함수는 화살표`=>`를 통해 표현 한다

중괄호 생략시 표현식의 결과가 바로 반환된다

매개변수가 하나일 경우에는 소괄호 마저도 생략 가능하다

// 일반 함수 표현식
const square = function(x) {
  return x * x;
};

// 화살표 함수 (단축된 형태)
const squareArrow = x => x * x;

화살표 함수는 자신의 `this`를 생성하지 않고 주변의 컨텍스트에서 `this`를 가져온다

일반 함수가 동작하는 방식과 차이가 있다

function Counter() {
  this.count = 0;

  // 일반 함수에서의 this
  setInterval(function() {
    this.count++; // 이 경우 this는 전역 객체(window)를 가리킴
    console.log(this.count);
  }, 1000);
}

const counter = new Counter();

function Counter() {
  this.count = 0;

  // 화살표 함수에서의 this
  setInterval(() => {
    this.count++; // 이 경우 this는 Counter 객체를 가리킴
    console.log(this.count);
  }, 1000);
}

const counter = new Counter();

콜백함수

다른 함수의 인수로 전달되어 특정 이벤트나 조건 발생시 실행되는 함수이다
비동기 작업 시 주로 사용된다

// 콜백 함수 정의
function myCallback() {
  console.log("콜백 함수가 호출되었습니다.");
}
// 콜백 함수 인수로 전달
function performAction(callback) {
  console.log("어떤 동작을 수행합니다.");
  callback(); // 콜백 함수 호출
}

// performAction 함수 호출 시 myCallback 함수가 콜백으로 전달됨
performAction(myCallback);

아래는 비동기작업의 콜백함수 예시이다

function fetchData(callback) {
  // 비동기 작업 시뮬레이션 (예: AJAX 요청, 파일 읽기)
  setTimeout(function () {
    const data = "비동기 데이터";
    callback(data); // 작업 완료 후 콜백 함수 호출
  }, 2000); // 2초 뒤에 작업이 완료됨
}

// fetchData 함수 호출 시 데이터를 다루는 콜백 함수를 전달
fetchData(function (result) {
  console.log("데이터를 받아왔습니다:", result);
});

콜백함수와 비동기는 함께 다룰 내용이 많으므로 따로 다시한번 알아볼 예정이다