JavaScript 기초 <6. 함수(Function)란 무엇인가? 선언식 vs 표현식>

자바스크립트 JavaScript

6. 함수(Function)란 무엇인가? 선언식 vs 표현식 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. 함수(Function)란?

함수(Function)란 특정 작업을 수행하는 코드 블록입니다.
한 번 정의하면 여러 번 실행할 수 있으며, 코드를 모듈화하고 재사용성을 높이는 데 필수적인 요소입니다.

📌 반복되는 코드를 줄이고, 유지보수를 쉽게 만들어주는 강력한 도구!

---

 

2. JavaScript에서 함수를 선언하는 방법

JavaScript에서 함수를 선언하는 방법은 크게 3가지가 있습니다.

함수 선언 방식설명예제

함수 선언식 (Function Declaration)	function 키워드를 사용하여 선언	function name() {}
함수 표현식 (Function Expression)	변수에 함수를 할당하여 선언	const name = function() {};
화살표 함수 (Arrow Function)	=> 문법을 사용하는 간결한 함수 표현	const name = () => {};

📌 각 방식마다 특징과 차이가 존재하므로, 올바르게 사용해야 함!

---

 

3. 함수 선언식 (Function Declaration)

함수 선언식은 function 키워드를 사용하여 함수를 정의하는 방식입니다.

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

greet(); // "안녕하세요!"

✅ 특징:
✔ 코드 실행 전에 함수가 메모리에 저장됨 → 호이스팅(Hoisting) 가능
✔ 함수 이름을 명확하게 정의할 수 있음

📌 호이스팅이 지원되므로, 함수가 선언되기 전에 호출해도 정상 실행됨!

---

 

4. 함수 표현식 (Function Expression)

함수 표현식은 함수를 변수에 할당하여 선언하는 방식입니다.

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

greet(); // "안녕하세요!"

✅ 특징:
✔ 함수가 변수에 저장되므로, 호이스팅이 적용되지 않음
✔ 익명 함수(Anonymous Function)를 사용할 수 있음

📌 함수 표현식은 선언 전에 호출할 수 없다! (ReferenceError 발생)

---

 

5. 화살표 함수 (Arrow Function)

ES6(2015)에서 추가된 화살표 함수는 간결한 함수 표현을 제공합니다.

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

greet(); // "안녕하세요!"

✅ 특징:
✔ function 키워드 없이 =>를 사용하여 함수를 정의
✔ this를 다르게 처리 (2부에서 자세히 설명)
✔ 코드가 간결해지지만, 모든 상황에서 사용하기 적절하지 않음

📌 간결한 표현이 가능하지만, this 바인딩이 다르게 동작하므로 주의해야 함!

---

✅ 여기까지 JavaScript의 함수 개념과 선언 방법을 배웠습니다!
👉 "그렇다면, 함수의 내부 동작 원리와 'this' 키워드는 어떻게 다를까?"
✅ 2부에서 함수의 실행 컨텍스트, this의 동작 방식, 콜백 함수까지 상세히 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. 실행 컨텍스트와 함수 호출 방식

JavaScript에서 함수가 호출되면, **실행 컨텍스트(Execution Context)**가 생성됩니다.
즉, 함수가 실행될 때 메모리에 어떤 일이 일어나는지 이해하는 것이 중요합니다.

✅ 1) 실행 컨텍스트의 흐름

function first() {
    console.log("첫 번째 함수 실행");
}

function second() {
    first();
    console.log("두 번째 함수 실행");
}

second();

✅ 결과:

 

첫 번째 함수 실행
두 번째 함수 실행

📌 호출된 함수는 실행 컨텍스트가 스택(Stack) 형태로 관리됨!

---

 

2. this 키워드의 동작 원리

JavaScript에서 this는 함수가 호출되는 방식에 따라 달라집니다.

✅ 1) 일반 함수에서 this

function showThis() {
    console.log(this);
}

showThis(); // 브라우저에서는 `window`, Node.js에서는 `global`

📌 일반 함수에서 this는 window 또는 global을 가리킴!

✅ 2) 객체 메서드에서 this

const obj = {
    name: "Alice",
    showThis: function() {
        console.log(this.name);
    }
};

obj.showThis(); // "Alice"

📌 객체의 메서드에서 this는 해당 객체를 가리킴!

✅ 3) 화살표 함수에서 this

const obj = {
    name: "Alice",
    showThis: () => {
        console.log(this.name);
    }
};

obj.showThis(); // undefined

📌 화살표 함수는 this를 바인딩하지 않고, 상위 스코프의 this를 사용함!

---

 

3. 콜백 함수 (Callback Function)란?

콜백 함수란 다른 함수의 인자로 전달되어 특정 시점에 실행되는 함수입니다.

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

function greet() {
    console.log("반갑습니다!");
}

sayHello(greet);

✅ 결과:

 

안녕하세요!
반갑습니다!

📌 콜백 함수는 비동기 작업, 이벤트 처리 등에 자주 사용됨!

---

✅ 지금까지 JavaScript의 함수 실행 컨텍스트, this, 콜백 함수를 상세히 배웠습니다!
👉 "그렇다면, 콜백 함수를 활용한 클로저(Closure)는 어떻게 동작할까?"
✅ 다음 회차에서 클로저 개념과 활용법을 깊이 있게 배워봅시다! 🚀