함수(즉시 실행 함수, 화살표 함수)

oYJo·2025년 3월 26일

JavaScript

목록 보기
33/52
post-thumbnail

함수

1️⃣ 즉시 실행 함수(IIFE: Immediately Invoked Function Expression)

즉시 실행 함수(IIFE)선언과 동시에 실행되는 함수이다.

(function() {
    console.log("result");
})(); // result

왜 사용될까?

  1. 전역 범위 오염 방지

    • 변수를 IIFE 내부에서만 사용하여 전역 네임스페이스 오염을 방지할 수 있다.

    ✔️네임스페이스 패턴 : 이름 공간

    • 이름들을 한 곳에 모아서 충돌 미리 방지
    • 선언된 변수, 함수를 쉽게 가져다 쓸 수 있게 만든 매커니즘
      자바스크립트는 객체 리터럴, 즉시 실행 함수와 관련 있다
  2. 초기화 코드 실행

    • 애플리케이션이 시작될 때 한 번만 실행해야 하는 코드를 실행할 때 유용하다
  3. 비동기 작업을 위한 클로저 활용

    • 비동기 작업(예: setTimeout)에서 각 실행마다 독립적인 변수 유지 가능하다

2️⃣ 화살표 함수 (=>)

일반 함수와의 차이점

구분일반 함수 (function)화살표 함수 (=>)
this호출 방식에 따라 결정된다정의된 위치의 this를 유지
arguments 사용 가능 여부가능불가능
줄임 표현 가능 여부불가능가능 (return 생략 가능)
생성자 함수 가능 여부가능 (new 사용 가능)불가능 (new 사용 불가)

정리

화살표 함수는 this 유지, arguments 없음, 코드 간결화

일반 함수 예제

function add(a, b) {
    return a + b;
}
console.log(add(2, 3));  // 5

화살표 함수 예제

const add = (a, b) => a + b;
console.log(add(2, 3));  // 5

한 줄 코드에서는 {}return을 생략 가능!

  • 화살표 함수는 ES6에서 등장
  • 기존의 function 키워드 방식이 this를 다룰 때 복잡했고, 콜백 함수에서 this를 명확하게 유지하기 위해 만들어졌다.
  • 항상 상위 스코프를 참조하기 때문에 일관성이 생기고 예측하기도 쉽다

✔️콜백 함수

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled);  // [2, 4, 6]

function을 사용할 필요 없이 간결한 코드 작성 가능하다


1️⃣ arguments 객체

함수 내부에서 전달된 모든 인수를 배열처럼 저장하는 객체

  • 일반 함수(function)에서 사용 가능, 화살표 함수에서는 ...rest 사용
  • 배열이 아니라 객체이므로 map, forEach 같은 배열 메서드 사용 불가
function showArguments() {
    console.log(arguments);
    console.log(arguments[0]);  // 첫 번째 인수
}
showArguments(10, 20, 30);

↑ 일반 함수에서 arguments 사용 가능

function showArguments() {
    console.log(arguments);
}
showArguments(1, 2, 3);  // [Arguments] { '0': 1, '1': 2, '2': 3 }
const showArgs = () => {
    console.log(arguments);
};
showArgs(1, 2, 3);  // 오류 발생!

↑ 화살표 함수에서는 arguments를 사용할 수 없다
↑ undefined 발생

const showArgs = (...args) => {
    console.log(args);
};
showArgs(1, 2, 3);  // [1, 2, 3]

대신 ...rest(나머지 매개변수)를 사용해야 함!

2️⃣ argument (단수형, 개별 인수)

함수에 전달된 각각의 인수를 의미하는 일반적인 용어

  • 특정한 키워드가 아니라, 일반적인 단어
  • 함수의 매개변수(parameter)로 전달된 개별 값을 의미
function add(a, b) {  // 여기서 a, b가 각각 "argument"
    return a + b;
}
consolelog(add(3, 5));  // 8

여기서 ab는 각각 "argument" (개별 인수)
전체 인수 목록을 가리킬 때는 arguments 객체를 사용

✔️argument vs arguments
둘은 다른 것이다
argument : 함수의 개별 인수 (특정한 키워드 X, 일반적인 개념)
arguments : 일반 함수에서 사용 가능한 객체 (전달된 모든 인수를 저장)

  • 화살표 함수에서는 사용 불가능 (...rest 사용해야 함)
구분argumentarguments
개별적인 함수 인수함수에 전달된 모든 인수를 담은 객체
형태특정한 키워드 아님 (일반 용어)함수 내부에서 자동으로 생성되는 객체
사용 가능 함수모든 함수에서 사용 가능function에서만 사용 가능 (화살표 함수)
예제function add(a, b) {}a, b가 각각 argumentfunction test() { console.log(arguments); }
profile
Hello! My Name is oYJo

0개의 댓글