[Deep Dive] 12장 함수(1)

함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것

매개변수	함수 내부로 입력을 전달받는 것
인수	입력
반환값	출력

// 함수 정의 
function jongbin(x) {
  return "I'm jongbin " + x;
}

// 함수 호출
const jb = jongbin("hi");
console.log(jb)   // I'm jongbin hi

1. 함수를 사용하는 이유

---

• 함수는 원할 때, 원하는 만큼 호출이 가능 → 재사용
• 코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높임
• 함수는 객체 타입의 값
• 적절한 식별자는 내용을 파악하는데 용이 → 가독성

2. 함수 리터럴

---

구성요소	설명
function 키워드	함수를 선언
함수 이름	* 함수이름은 식별자이므로 네이밍 규칙을 준수해야함 * 함수 리음은 함수 몸체 내에서만 참조할 수 있는 식별자 * 함수 이름은 생략가능(기명함수, 무명/익명함수)
매개변수 목록	* 0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분 * 각 매개변수에는 함수를 호출할 때 지정한 인수가 순서대로 할당 * 매개변수는 함수 몸체 내에서 변수와 동일하게 취급(매개변수도 변수와 마찬가지로 네이밍 규칙 준수)
함수 몸체	* 함수가 호출되었을 때 일괄적으로 실행될 문들을 하나의 실행 단위로 정의한 코드블록 * 함수 몸체는 함수 호출에 의해 실행

3. 함수 정의

---

함수정의: 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 반환할 값을 지정하는 것

함수 정의 방식

// 함수 선언문
function jongbin(s) {
  return "I'm jongbin" + s;
}

// 함수 표현식
const jongbin = function (s) {
  return "I'm jongbin" + s;
};

// Function 생성자 함수
const jongbin = new Function('s', 'return "I\'m jongbin" + s');

// 화살표 함수(ES6)
const jongbin = () => return "I'm jongbin" + s;

함수 선언문

1. 함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당
   → 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가르키는 식별자로 호출

    const jb = function jongbin(s) {
      return "I'm jongbin " + s;
    }
   
    console.log(jb('hi'));    // I'm jongbin hi
   
    console.log(jongbin('hi'))    // error
    // 함수 이름은 함부 몸체 내부에서만 유효
   

   
   

2. 함수 선언문은 이름을 생략할 수 없음
   

3. 함수 선언문은 표현식이 아닌 문

     // 표현식이 아닌 문은 변수에 할당할 수 없다
     const jb = function jongbin(s) {
    return "I'm jongbin" + s;
     }   // 이건 왜 할당되?
     // 기명함수 리터럴은 함수 선언문, 함수 리터럴 표현식으로 해석이 되니까!
   

   {}는 블록문, 객체 리터럴 둘 다 된다

• {}가 피연산자(우변)로 사용되면 객체 리터럴로 해석
• {}가 단독으로 사용되면 블록문으로 해석

함수 표현식

• 자바스크립트의 함수는 일급객체 → 변수에 할당할 수 있음
• 함수 표현식은 표현식인 문 (함수 선언문은 표현식이 아닌 문)

일급객체 : 값의 성질을 갖는 객체

함수 생성 시점과 함수 호이스팅

console.dir(func1);  // f func1(s)
console.dir(func2);  // undrfined

console.log(func1("hi"));   // 함수선언문 hi
console.log(func2("hi"));   // TypeError: func2 is not a function

function func1(s) {
  return "함수선언문 " + s;
}

const func2 = function (s) {
  return "함수표현식 " + s;
}

• 함수 선언문으로 정의한 함수는 호이스팅으로 인해 정의되기 전에 호출할 수 있다.(함수 호이스팅)
• 함수 표현식은 변수에 할당되기 때문에 할당되기 전에 undefined로 초기화된다(호이스팅x)(변수 호이스팅)

호이스팅: 코드의 선두로 끌어 올려진 것처럼 작동하는 자바스크립트 고유의 특징

Function 생성자 함수

const jongbin = new Function('s', 'return "I\'m jongbin "+ s');

빌트인 함수인 Function 생성자 함수에 먀갸변수 목혹과 함수 몸체를 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체를 생성해서 반환한다.

(Function 생성자 함수로 생성한 함수는 클로저를 생성하지 않음)

바람직하지 않은 방법이라고 한다

화살표 함수

const jongbin = (s) => {
  return "I'm jongbin " + s;
}

• ES6에서 등장
• 화살표 함수는 기존의 함수보다 표현도 간략하고, 내부 동작 또한 간략화
• 기존 함수와 this 바인딩 방식이 다름
• prototype 프로퍼티가 없음
• argument 객체를 생성하지 않음

이웅모 선생님의 모던 자바스크립트 Deep Dive를 공부하기 위해 정리한 글입니다.
혹시나 보시다가 고칠 부분이나 마음에 안드시는 부분이 있다면 말씀해주시면 감사하겠습니다!