[리액트 기초 스터디] JavaScript 함수 심화

목차 (OPEN)

• 📑 JavaScript 함수 심화
• 🟪지난 포스팅 복습: 함수와 호이스팅
• 🟨 함수 표현식: 익명 vs 기명
• 🟥 화살표 함수 (Arrow Function)
• ✅ 총정리
• 📚 결론

 

 

 

 

 

📑 JavaScript 함수 심화

자바스크립트에서 함수는 단순히 명령어 묶음이 아니라 일급 객체로 취급되기 때문에

변수에 담거나, 다른 함수의 인자로 전달하거나, 심지어 함수에서 함수를 반환하는 것도 가능하다.

 

이런 특징 덕분에 함수는 자바스크립트의 가장 강력한 도구 중 하나이며

이를 기반으로 콜백 함수, 고차 함수, 클로저, 함수형 프로그래밍 패턴 등이 가능해진다.

 

이번 포스팅에서는 함수 표현식(익명 및 기명), 화살표 함수와 특징을 예제와 함께 정리해보고자 한다.

 

 

---

🟪지난 포스팅 복습: 함수와 호이스팅

앞선 포스팅에서 다뤘던 함수 선언문과 호이스팅을 잠깐 복습해보자.

 

자바스크립트에서는 함수 선언문을 코드 아래에 적어도, 실행 시점에 정상적으로 호출할 수 있다.

이는 호이스팅 덕분인데, 함수 선언문은 코드 실행 전, 메모리에 미리 올려지기 때문이다.

 

(자세한 내용을 지난 포스팅 참고)

[리액트 기초 스터디] JavaScript 함수와 호이스팅

 

 

---

🟨 함수 표현식: 익명 vs 기명

먼저 기명 함수 표현식(named function expression)부터 살펴보면 아래와 같다.

let varB = function funcB() {
  console.log("funcB");
};

varB();  // "funcB"
// funcB(); // ❌ ReferenceError (바깥 스코프에선 이름을 모름)

 

여기서 알 수 있듯이, 함수에 내부용 이름 funcB가 붙어 있긴 하지만,

바깥 스코프에서는 그 이름으로 호출을 할 수가 없다.

(오직 함수 내부에서만 funcB라는 이름으로 참조가 가능하다.)

 

 

다음으로 익명 함수 표현식(Anonymous Function Expression)은 아래 예시와 같이 정말 말 그대로 이름조차 없는 형태이다.

let anon = function () {
  console.log("anonymous");
};
anon();

 

얘는 이름이 애초에 붙어있지 않기 때문에 변수명(anon)으로만 접근이 가능하다.

 

이는 디버깅할 때 이름이 없어서 불편할 수도 있긴 하지만,

코드가 짧을 때는 가장 간단하고 직관적이어서 자주 사용한다.

setTimeout(function () {
  console.log("1초 후 실행!");
}, 1000);

 

 

---

🟥 화살표 함수 (Arrow Function)

ES6에서 도입된 화살표 함수는 기존 함수 표현식보다 훨씬 간결한 문법을 제공한다.

let varC = () => 1;                 // 매개변수 0개, 표현식 본문 → 반환 생략 (암시적 반환)
let varD = (value) => value + 1;    // 매개변수 1개, 표현식 본문
let varE = (value) => {
  console.log(value);
  return value + 1;                 // 블록 본문에서는 return 필요
};

console.log(varC()); // 1

 

 

 📌 특징 1

이러한 화살표 함수의 핵심 특징 중 하나는 this 바인딩이 없다는 것이다.

화살표 함수는 자신만의 this를 만들지 않고, 바깥 스코프의 this를 그대로 사용(lexical this)한다.

덕분에 콜백에서 this가 달라져서 헷갈리는 문제를 깔끔하게 해결할 수 있다.

const obj = {
  x: 1,
  normal: function () { console.log(this.x); },
  arrow: () => console.log(this.x),
};

obj.normal(); // 1
obj.arrow();  // undefined

 

obj.normal( )을 실행하면 this가 obj를 가리키기 때문에

this.x는 obj.x를 의미해서 1이 출력된다.

 

그러나 arrow는 화살표 함수이기 때문에 자기 자신만의 this를 가지지 않고,

함수가 선언될 당시의 외부 스코프(this)를 그대로 가져오게 된다.

따라서 arrow 함수에서의 this.x는 obj.x를 가리키는게 아니라, 전역 객체의 x를 찾게 되고,

위의 코드에서는 해당 값이 없기 때문에 undefined가 출력되는 것이다.

 

💡 일반 함수에서는 호출한 주체(obj)가 누구냐에 따라 this가 달라진다.
💡 화살표 함수에서는 선언된 위치의 외부 this를 캡처해서 쓰기 때문에 호출 주체와 상관 없이 변하지 않는다.

 

 

 📌 특징 2

또 다른 특징으로는 arguments 가 없다는 점이 있다.

 

조금 더 자세히 살펴보면,

원래 자바스크립트의 일반 함수에서는 아래와 같이 arguments라는 유사 배열 객체가 자동으로 제공된다.

function normalSum() {
  console.log(arguments); 
  // [Arguments] { '0': 1, '1': 2, '2': 3 }
  return arguments[0] + arguments[1] + arguments[2];
}

console.log(normalSum(1, 2, 3)); // 6

 

그래서 함수에 정의된 매개변수 개수와 상관 없이, 호출 시 전달된 모든 인자가 arguments 안에 들어가게 된다.

(하지만 이 arguments는 배열처럼 보이지만 진짜 배열이 아닌 유사 배열 객체여서

map, reduce 같은 배열 메서드를 직접 쓰지는 못 한다.)

 

 

그러나 화살표 함수는 자신만의 this를 갖지 않듯이, 자기만의 arguments도 갖지 않기 때문에

이것도 외부 스코프의 arguments를 그냥 가져다가 쓰게 된다.

const arrow = () => {
  console.log(arguments); // ❌ ReferenceError (외부에 arguments가 없으면 에러)
};

arrow(1, 2, 3);

 

 

물론 우리가 코드를 작성할 때에 화살표 함수 안에서 모든 인자를 다루고 싶은 경우도 있을텐데,

이 경우에는 arguments 대신 그냥 직접 rest 파라미터 선언을 해주면 된다.

 

rest 파마리터( ... )를 사용하면 함수에 전달된 인자들을 진짜 배열로 받아오기 때문에

배열 메서드(map, filter, reduce 등)를 바로 쓸 수도 있고,

함수 선언부에서 어떤 인자들을 모을지 명확히 드러나기 때문에 유용하게 쓸 수 있다.

const sum = (...args) => {
  console.log(args); // [1, 2, 3] (진짜 배열)
  return args.reduce((a, b) => a + b, 0);
};

console.log(sum(1, 2, 3)); // 6

 

 

 

 📌 특징 3

마지막 특징으로는 생성자 사용이 불가능하다는 것이 있는데, 이 때문에 new와 함께 쓸 수 없다.

 

예를 들어서 자바스크립트에서 일반 함수(선언문 / 표현식)는 new 키워드와 함께 호출하면

아래와 같이 생성자 함수처럼 동작할 수 있다.

function Person(name) {
  this.name = name;
}

const p1 = new Person("소연");
console.log(p1.name); // "소연"

 

왜냐하면 new와 함께 함수를 호출하면 내부에서 자동으로 새로운 객체(this)가 만들어지고, 그 객체를 반환해주기 때문이다.

그리고 이런 함수를 바로 생성자 함수(Costructor Function)이라고 부르는 것이다.

 

(생성자 함수 관련 포스팅 참고)

[리액트 기초 스터디] JavaScript의 생성자 함수 동작 과정

 

 

 

하지만 화살표 함수에 new 키워드를 사용해보면 아래와 같은 에러가 발생한다.

const PersonArrow = (name) => {
  this.name = name;
};

const p2 = new PersonArrow("소연"); 
// ❌ TypeError: PersonArrow is not a constructor

 

그 이유는 앞서 말했던 것처럼 화살표 함수는 자기만의 this를 가지지 않기 때문이다.

생성자 함수는 내부에서 새로운 this를 만들어서 속성을 붙이는 게 핵심인데,

화살표 함수는 this 자체가 없으니까 생성자 역할을 할 수가 없다.

 

따라서 객체를 찍어내는 생성자가 필요하다면 반드시 일반 함수나 class를 사용해야 한다는 점을 잘 기억하고 있어야 한다.

---

✅ 총정리

자바스크립트 함수 선언 방식들을 한눈에 비교하면 아래와 같다.

// 1) 함수 선언문 (호이스팅 O)
function add(a, b) {
  return a + b;
}

// 2) 익명 함수 표현식 (호이스팅 시 사용 불가)
const add2 = function (a, b) {
  return a + b;
};

// 3) 기명 함수 표현식 (내부 이름으로 자기참조/스택 추적 용이)
const add3 = function addInternal(a, b) {
  return a + b;
};

// 4) 화살표 함수 (this 없음, 간결/표현식 반환)
const add4 = (a, b) => a + b;

 

 

 

📌 참고

어떤 상황에서 어떤 함수를 쓰면 좋을까?

• 함수 선언문 👉🏻 유틸 함수, 모듈 함수 (파일 상단에 선언해두고 어디서든 호출)
• 익명 함수 표현식 👉🏻 콜백 함수 (짧고 단순한 코드)
• 기명 함수 표현식 👉🏻 재귀 함수, 디버깅이 필요한 함수
• 화살표 함수 👉🏻 콜백, 배열 메서드(map, filter, reduce) 등 간단한 로직

 

 

---

📚 결론

이번 포스팅을 작성하면서 함수가 일급 객체이기 때문에 가능한 패턴들이 많고,

화살표 함수는 this 처리 때문에 특히 유용하다는 점을 알 수 있었다.

 

앞으로는 함수 선언 방식을 습관적으로 쓰기 보다는

상황에 맞게 가장 적절한 선언 방식을 의식적으로 선택하려는 노력을 해야겠다.