함수 작성하는 법

함수 선언식

• 함수명 필수
• 호이스팅(hoisting)으로 선언식이 아래 작성돼도 정상 동작

function add(x, y){
   return x + y;
}

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

---

함수 표현식

• 함수명 없어도 됨 (거의 없이 사용)
• 호이스팅(hoisting)이 되긴 하지만 선언부분만 됨으로 호출을 먼저하면 ReferenceError
• 화살표 함수(Arrow Function) 사용가능

// 함수 작성 후 호출한 경우
const add = function(x, y){
   return x + y;
}
console.log(add(3, 5)); // 8

// 함수 작성보다 호출을 먼저한 경우
console.log(add(3, 5)); // ReferenceError: add is not defined
const add = function(x, y){
   return x + y;
}

// 화살표 함수로 작성
const add = (x, y) => x + y;
console.log(add(3, 5)); // 8

---

즉시 실행 함수(IIFE, Immediately Invoke Function Expression)

• 외부에서의 침입을 차단하고 코드를 보호하는 캡슐화(capsulation)가 목적
• JS를 사용할 때, 전역을 가급적 오염시키지 않도록 노력해야 함
• 전역을 오염시키지 않기 위해 사용하는 대중적인 방법으로 IIFF 패턴이 있음
  
  

이는 Self-Execution Anonymous Function으로 알려진 디자인(설계) 패턴이며, 크게 두 부분으로 구성됨

1. 괄호로 둘러싸인 익명함수
   전역범위를 오염시키는 것 뿐만 아니라 IIFF 내부의 변수에 접근하는 것을 방지

2. 즉시 실행 함수를 실행하는 괄호
   JS 엔진은 함수를 즉시 해석해서 실행함
   IIFF를 변수에 할당하면 IIFF 자체는 저장되지 않고, 함수가 실행된 결과만 저장됨
   
   

예제 코드

(function () {
  let x = 3;
  let y = 5;
  return x + y;
}()); // 8

특징

• 최초 한번만 호출되며 다시 호출할 수는 없음
• JavaScript는 파일이 분리되어 있어도 global scope가 하나이며 global scope에 선언된 변수나 함수는 코드 내의 어디서든지 접근이 가능하다는 특징이 있다.
  이러한 특징 때문에 변수명 또는 함수명의 충돌이 발생
  그래서 즉시 실행 함수 내에 모아 두면 변수명 또는 함수명의 충돌을 방지할 수 있어 사용
  
  
  

요즘 사용이 줄어든 이유

• 모듈 시스템의 보급

  • 현대 JavaScript에서는 모듈 시스템이 표준이 되어가고 있다.
  • 모듈 시스템을 사용하면 파일 간의 의존성을 더 명확하게 관리할 수 있고, 코드를 조직화하고 재사용하기가 더 쉬워진다.
    
    

• 스코프 및 변수 관리의 향상

  • 이전에는 IIFE가 주로 스코프 관리를 위해 사용되었다.
    하지만, 현대 JavaScript에서는 let과 const를 사용하여 블록 스코프 변수를 선언할 수 있으므로, 스코프 누출과 같은 문제를 방지할 수 있다.
    
    

• 코드 가독성과 유지보수성

  • 모듈 시스템을 사용하면 파일을 모듈 단위로 분할하여 더 작고 읽기 쉬운 코드를 작성할 수 있다.(코드의 가독성과 유지보수성을 향상)

---

객체 안에서 함수(메서드) 작성하는 법

1. nomal function

const std = {
  name : 'song',
  num : 20231205,
  sayHi : function(){
     console.log(`안녕, 나는 ${this.name}라고 해`);
  }
}

2. arrow function

const std = {
  name : 'song',
  num : 20231205,
  sayHi : () => {
     console.log(`안녕, 나는 ${this.name}라고 해`);
  }
}

3. concise method

const std = {
  name : 'song',
  num : 20231205,
  sayHi(){ // 기존 `sayHi : function(){`에서       `: function`이 생략된 모습
     console.log(`안녕, 나는 ${this.name}라고 해`);
  }
}

📝참고) https://velog.io/@thdgusrbek/일반함수-vs-화살표-함수Arrow-function