7화. 자바스크립트 화살표 함수란?

 

안녕하세요! 오늘은 자바스크립트에서 화살표 함수(arrow function)가 무엇인지 아주 쉽게 설명해 드릴게요. 화살표 함수는 기존 함수보다 짧고 간단하게 코드를 작성할 수 있는 방법이에요. 그럼 차근차근 알아볼까요?

---

1. 화살표 함수란 무엇인가요?

화살표 함수는 자바스크립트에서 함수를 만드는 방법 중 하나예요. 우리가 자주 쓰던 일반 함수를 더 짧고 간단하게 쓸 수 있는 방법이에요. 이름이 '화살표'인 이유는 함수 안에서 화살표(=>)를 사용하기 때문이에요.

---

2. 기존 함수와 화살표 함수의 차이

기존 함수 만드는 방법

function sayHello() {
	console.log("안녕하세요!"); 
}

 

화살표 함수로 만드는 방법

const sayHello = () => { 
console.log("안녕하세요!"); 
};

 

보세요! 화살표 함수를 쓰면 짧고 간단하게 만들 수 있죠? 두 함수는 똑같이 "안녕하세요!"라고 출력하지만, 화살표 함수가 더 간단해 보여요.

---

3. 화살표 함수의 장점

1) 코드를 짧게 쓸 수 있어요!

화살표 함수는 함수가 간단할 때 더 짧게 쓸 수 있어서 보기 편하고 쓰기도 쉬워요.

예를 들어, 두 숫자를 더하는 함수를 만들어 볼게요.

기존 함수

function add(a, b) { 
	return a + b; 
}

화살표 함수

const add = (a, b) => a + b;

 

보세요! 화살표 함수로 만들면 훨씬 짧고 깔끔하죠? 간단한 일을 할 때는 이렇게 짧게 쓸 수 있어서 좋아요!

---

2) this 문제를 해결해줘요!

자바스크립트에서 this는 누가 일을 하고 있는지 알려주는 중요한 단어예요. 그런데 일반 함수에서는 가끔 this가 헷갈릴 때가 있어요. 그런데 화살표 함수를 쓰면 this가 항상 제대로 작동해요.

 

일반 함수에서의 문제

function Person() {
    this.age = 0;

    setInterval(function() {
        this.age++;  // 여기서 `this`가 올바르게 작동하지 않아요.
    }, 1000);
}

 

이 코드에서 문제가 되는 부분은 this가 예상과 다르게 작동한다는 점이에요. 그 이유는 setInterval 안에서 일반 함수를 사용했기 때문이에요. 자바스크립트에서 일반 함수 안의 this는 그 함수를 호출한 객체를 가리키는데, setInterval 같은 경우에는 글로벌 객체(window)를 가리켜요. 그래서 지금 this.age가 원하는 대로 Person 객체의 age를 가리키지 않아요.

• Person 함수는 객체 생성자 함수로, this.age에 처음 0이라는 값을 넣어요.
• setInterval은 1초마다 age 값을 증가시키는 작업을 반복하는데, 이 부분에서 문제가 생겨요.
• this가 Person 객체가 아니라 글로벌 객체(window)를 가리키기 때문에, **this.age++는 Person 객체의 age가 증가하지 않아요.

 

화살표 함수로 해결

function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++;  // 화살표 함수에서는 `this`가 올바르게 작동해요!
    }, 1000);
}

 

• setInterval(() => { ... }): 화살표 함수로 바꿔주면 **this**가 Person 객체를 가리키게 돼요.
• 이제 **1초마다 this.age**가 잘 증가하고, **Person 객체의 age**가 바뀌게 돼요.
• 일반 함수 안에서 this는 함수가 호출된 문맥에 따라 다르게 작동해요.
• 화살표 함수는 this가 정확하게 현재 객체(Person)를 가리키게 해줘서 문제를 해결해요.

이제 이 코드를 고치면 age 값이 제대로 증가할 거예요! 😊

 

이처럼 화살표 함수를 쓰면 this 문제도 쉽게 해결할 수 있어요.

당장 이해가 안되도 차근차근 복습하며 천천히 익숙해질테니, 그냥 넘어가자!

---

4. 언제 화살표 함수를 쓰면 좋을까요?

• 코드를 간단하게 작성하고 싶을 때.
• this 문제를 해결하고 싶을 때.
• 짧고 간단한 함수를 만들 때.

---

5. 화살표 함수 예제

예시 1) 이름을 받아서 인사하는 함수

const greet = (name) => {
    console.log("안녕, " + name + "!");
};

greet("지민");  // 결과: "안녕, 지민!"

예시 2) 두 숫자를 더하는 함수

 

const add = (a, b) => a + b;

console.log(add(5, 3));  // 결과: 8

예시 3) 주어진 숫자가 짝수인지 확인하는 함수

const isEven = (num) => num % 2 === 0;

console.log(isEven(4));  // 결과: true (4는 짝수)
console.log(isEven(5));  // 결과: false (5는 홀수)

• isEven: 이 함수의 이름이에요. 짝수인지 확인하는 함수라고 이해하면 돼요.
• num: 이 함수는 숫자 하나를 받게 되는데, 그 숫자를 num이라고 부를 거예요.
• num % 2: 여기서 %는 나머지 연산자예요. num % 2**는 num을 2로 나누었을 때 나머지를 의미해요.
  • 만약 숫자가 짝수라면 나머지가 0이 될 거예요.
  • 홀수라면 나머지가 1이 되겠죠.
• num % 2 === 0: 이 부분은 num을 2로 나눴을 때 나머지가 0인지 확인하는 거예요.
  • 나머지가 0이면 짝수고,
  • 0이 아니면 홀수예요.

이 함수는 num을 2로 나누었을 때 나머지가 0인지 확인하는 함수입니다.

---

6. 결론 : 화살표 함수는 간단하고 편리해요!

화살표 함수는 자바스크립트에서 코드를 짧고 간단하게 만들 수 있는 방법이에요. 특히 간단한 함수를 만들 때 더 유용하고, this 문제도 쉽게 해결할 수 있어요.

---

이제 화살표 함수가 무엇인지, 그리고 언제 쓰면 좋은지 잘 알겠죠? 😊 직접 써보면서 자바스크립트를 더 재미있게 배워보세요!