JavaScript 함수

• JavaScript 함수
• 선언적 함수 (Function Declaration)
• 익명 함수 (Anonymous Function))
• • 함수 표현식 / 대입 함수 (Function Expression)
  • 화살표 함수 (Arrow Function)
  • 즉시 실행 함수 표현식 (IIFE)

NEW 키워드
선언적 함수, 호이스팅, 익명 함수, 함수 표현식, 대입 함수, 화살표 함수, this, 상위 스코프, argument 객체

---

# JavaScript 함수

• 입력값(매개변수)을 받아서 특정 작업을 수행하고, 결과를 반환(return)하는 코드 블록
• 자주 사용하거나 기능 단위로 함수를 만든다
• 함수를 사용하면 코드의 재사용성이 높아지고 모듈화와 유지보수가 쉬워진다
• 함수는 선언 → 호출 → 실행 순으로 진행된다

---

# 선언적 함수 (Function Declaration)

• 함수 이름을 사용하여 함수를 정의하는 전통적인 방식
• fucntion 키워드를 사용하여 이름을 붙여 선언한다
• 함수 선언 후 반복 호출이 가능하여 재사용성이 높다
• 호이스팅 지원으로 함수 선언 전이나 후에 호출 및 사용 가능하다
• 호이스팅 : JavaScript이 코드를 실행하기 전에 변수와 함수 선언 부분을 위로 끌어 올려서 처리하는 것

 

문법

// 1. 함수 선언
function 함수(매개변수){
  /* 함수 코드 */
}
// 2. 함수 호출 및 실행
함수이름(인수);

 

선언 전 & 후 함수 호출 (호이스팅 지원)

/* 선언 전 함수 호출 */
declarFunc("선언적 함수");      // 호이스팅으로 실행 가능, 출력 : Hello, 선언적 함수!

/* 함수 선언 */
function declarFunc(name){
  return console.log(`Hello, ${name}!`);
}

/* 선언 후 함수 호출 */
declarFunc("선언적 함수");     // 출력 : Hello, 선언적 함수!

---

# 익명 함수 (Anonymous Function)

• 함수 이름이 없는 함수로 변수에 할당하거나 즉시 실행해야 한다
• 호이스팅 미지원으로 반드시 함수 선언 후 호출해야 한다 (함수 선언 전 호출시 에러 발생)

---

# 함수 표현식 / 대입 함수 (Function Expression)

• 함수를 변수에 할당하여 정의하는 방식
• 변수는 선언만 호이스팅(할당X)을 지원하지 않으므로 에러가 발생한다

 

문법

// 1. 함수 선언
var 변수 = function(매개변수){
  /* 함수 코드 */
}
// 2. 함수 호출 및 실행
변수이름(인수);

 

선언 전 & 후 호출 (호이스팅 미지원)

/* 선언 전 함수 호출*/
expressFuncLet("Let 대입 함수")   // [에러] ReferenceError: Cannot access 'expressFuncLet' before initialization
expressFuncVar("Var 대입 함수")   // [에러] TypeError: expressFunc is not a function
/* 함수 선언 */
let expressFuncLet = function(name){
  return console.log(`Hello, ${name}!`);
}
var expressFuncVar = function(name){
  return console.log(`Hello, ${name}!`);
}
/* 선언 후 함수 호출*/
expressFuncLet("Let 대입 함수") // 출력 : Hello, Let 대입 함수
expressFuncVar("Var 대입 함수") // 출력 : Hello, Var 대입 함수

• var 변수 : var 변수는 선언만 호이스팅이 되고 재할당은 호이스팅되지 않으므로 undefined 가된다. undefined("대입함수")가 되기 때문에 타입 에러 발생
• let 및 const 변수 : let과 const 변수 또한 선언만 호이스팅이 되지만, 할당 되기 전까지 접근을 막는 TDZ(Temporal Dead Zone, 사용할 수 없는 상태)가 된다. 때문에 참조 에러가 발생

---

# 화살표 함수 (Arrow Function)

• fucntion을 사용하지 않고  =>  기호를 사용하여 함수를 정의하는 방식
• ES6에서 도입되었으며, 기존 함수 표현식(Function Expression)을 더 짧고 간결하게 표현할 수 있다
• {중괄호}를 생략하여 한 줄로 작성 가능(한줄로 작성시 return은 생략)
• 매개변수가 하나일 경우 (소괄호) 생략이 가능  (매개변수가 없을 때는 소괄호 생략 불가능)
• 기존 함수의 this는 현재 객체를 바인딩하는데, 화살표 함수 this는 상위 스코프의 this를 상속한다
  • this 가 필요한 경우 화살표 함수를 사용하지 않는다
  • 화살표 함수의 this는 상위 스코프는 "코드의 실행 환경"으로 브라우저에선 window, node.js에서는 global를 상속(참조)한다
• 기존 함수에서는 arguments 객체를 사용 가능하지만, 화살표 함수에서는 arguments 객체를 사용할 수 없다

 

문법

// 1. 함수 선언
var 변수 = (매개변수) =>{
  /* 함수 코드 */
}
// 2. 함수 호출 및 실행
변수이름(인수);

 

예제 코드 (다양한 작성 방법)

// 매개변수가 없을때 : 소괄호 생략 불가능
let arrowFunc1 = () =>{
  return console.log(`Hello, 화살표 함수1!`);
}
arrowFunc1();

// 매개변수가 1개 일때 : 소괄호 생략 가능
let arrowFunc2 = name =>{
  return console.log(`Hello, ${name}!`);
}
arrowFunc2("화살표 함수2");

// 매개변수가 다수 일 때 : 소괄호 생략 불가능
let arrowFunc3 = (arg1, arg2) =>{
  return console.log(`Hello, ${arg1}, ${arg2}!`);
}
arrowFunc3("화살표3", "함수3,")

// 한줄로 작성 + 중괄호 생략 : {중괄호 생략}시 반드시 return을 생략한다
let arrowFunc4 = (name) => console.log(`Hello, ${name}!`);
arrowFunc4("화살표 함수4");

// 한줄로 작성 + 중괄호
let arrowFunc5 = (name) => {return console.log(`Hello, ${name}!`)};
arrowFunc5("화살표 함수5");

 

화살표 함수의 상위 스코프 (미권장)

<div class="parent">
  <div class="child">클릭</div>
</div>

<script>
const childEl = document.querySelector(".child");

childEl.addEventListener("click", function(){
  console.log(this) // 출력 : <div class="child">클릭</div>
})
childEl.addEventListener("click", ()=>{
  console.log(this) // 출력 : Window {window: Window, self: Window, document: document, name: '', location: Location, …}
})
</script>

• 선언적 함수 (기본 함수)의 this는 자기 자신을 상속(참조)한다
• 화살표 함수의 this는 상위 스코프(코드 실행 환경)을 상속(참조)한다

 

화살표 함수의 Arguments 객체 (사용 불가능)

// 기본함수
function regularFunction() {
  console.log(arguments); // arguments 객체는 함수에 전달된 모든 인수를 포함한다
}

regularFunction(1, 2, 3); 
// 출력 : Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 화살표 함수
const arrowFunction = () => {
  console.log(arguments); // 화살표 함수는 arguments 객체를 지원하지 않는다
};

arrowFunction(1, 2, 3, 4); // [에러] Uncaught ReferenceError: arguments is not defined

• arguments 객체
  • 함수 내부에서 함수에 전달된 모든 인수(arguments)를 배열처럼 다룰 수 있는 유사 배열 객체
  • arguments는 함수가 호출될 때 전달된 인수들을 순차적으로 저장하며, 배열처럼 인덱스를 통해 접근할 수 있다
  • 실제 배열은 아니므로 배열 메서드 (예: map, filter)는 사용할 수 없다

---

# 즉시 실행 함수 표현식 (IIFE, Immediately Invoked Function Expression)

• 함수 표현식을 정의의 실행을 동시에 하는 함수

 

문법

(function() {
  /* 함수 코드 */
})();

 

예제 코드

// 기본
(function(name) {
  return console.log("Hello, IIFE!");   // 출력 : Hello, IIFE!
})();

// 화살표 함수 + 매개변수
((name)=>{
  return console.log(`Hello, ${name}!`);   // 출력 : Hello, 화살표 IIFE!
})("화살표 IIFE")