[모딥다] 12장 함수

 

🫧 12.1 함수란?

 

JS에서 가장 중요한 핵심 개념. 

다른 핵심 개념 (스코프, 실행 컨텍스트 등..) 과 깊은 관련이 있음. 

JS 를 이해하기 위한 핵심 중의 핵심

 

함수는 일련의 과정을 문으로 구현, 

코드 블록으로 감싸서 하나의 실행 단위로 정의한 것. 

입력을 받아서 출력을 내보냄. 

매개변수 : 함수 내부로 입력을 전달받는 변수

인수 : 입력

반환값: 출력

 

함수는 함수 정의를 통해 생성됨.

함수 호출 : 함수는 정의만으로 실행되는 것이 아니라, 실행을 명시적으로 지시해야함. 

 

 

---

 

 

 

🫧 12.2 함수를 사용하는 이유

 

동일한 반복 작업을 수행할 시, 여러번 호출 가능 -> 코드의 재사용 가능

여러 번 작성 시 수정하려면 걸리는 시간 & 오류 가능성 증가 -> 유지보수의 편의성과 코드의 신뢰성을 높이기 위해

함수에 붙이는 이름인 식별자를 잘 정해야 코드의 가독성을 향상시킬 수 있다.

 

 

---

 

 

🫧 12.3 함수 리터럴

 

JS 의 함수는 객체 타입의 값. -> 함수 리터럴로 생성할 수 있음. 

 

함수 리터럴의 구조

- function 키워드

- 함수 이름 (식별자 네이밍 규칙을 준수해야함. 이름은 생략이 가능)

- 매개 변수 목록 (0개 이상, 순서가 중요, 함수 몸체 내에서 변수와 동일한 취급)

- 함수 몸체 (함수 호출 시 일괄적으로 실행될 문들을 하나의 실행 단위로 정의한 코드 블록) 

 

함수는 객체임. 

- 일반 객체와의 차이점 : 호출 가능 여부

 

 

---

 

 

🫧 12.4 함수 정의

 

함수 호출 이전에 매개변수, 실행할 문, 반환할 값을 지정하는 것.

 

함수를 정의하는 법

- 함수 선언문

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

- 함수 표현식

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

- Function 생성자 함수

const add = new Function('x', 'y', 'return x + y');

- 화살표 함수

const add = (x, y) => x + y;

 

 

📌 변수 선언과 함수 정의

- 함수 선언문이 평가되면 식별자가 암묵적으로 생성 & 함수 객체가 할당됨

 

 

12.4.1 함수 선언문

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

 

함수 리터럴과 형태가 동일하지만, 

함수 리터럴은 이름을 생략할 수 있으나,

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

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

(크롬 콘솔에서 선언하면 undefined 가 출력됨)

 

표현식이 아닌 문은 변수에 할당할 수 없음 -> 함수 선언문도 변수에 할당할 수 없음.

하지만 할당 되는 것 처럼 보임. 

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

-> JS 엔진이 코드에 따라 함수 리터럴과 함수 선언문을 각각으로 해석하는 경우가 있기 때문.  

함수 선언문이든 함수 리터럴이든 함수가 생성되는 것은 동일하지만, 

내부 동작에 차이가 있다.

 

함수 선언문으로 생성된 함수 -> 호출 가능

함수 리터럴 표현식으로 생성된 함수 -> 호출 불가능

 

함수 이름 -> 함수 내부에서만 사용

식별자 -> 외부에서 호출시 사용. 없으면 JS 엔진이 함수 이름과 동일한 식별자를 암묵적으로 생성 & 함수 객체를 할당함.  

 

즉, 함수는 함수 이름이 아닌 함수 객체를 가리키는 식별자로 호출함. 

 

 

 

12.4.2 함수 표현식

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

 

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

=> 함수는 일급 객체임. 

=> 함수를 값처럼 자유롭게 사용할 수 있다는 의미

 

함수 선언문 : 표현식이 ❌ 문

함수 표현식 : 표현식인 문

 

 

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

 

함수 선언문으로 정의한 함수 -> 선언문 이전에 호출 가능

함수 표현식으로 정의한 함수 -> 표현식 이전에 호출 ❌

=> 생성 시점이 다르기 때문

 

함수 선언문으로 정의한 함수	함수 표현식으로 정의한 함수
- 런타임 이전에 객체 생성 - JS 엔진이 함수 이름과 동일한 이름의 식별자 암묵적 생성 -> 런타임에 이미 함수 객체 생성 완료   & 식별자에 할당까지 완료된 상태 함수 호이스팅 : 함수의 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징	- 변수에 할당되는 값이 함수 리터럴인 문 - 할당문이 실행되는 시점, 즉 런타임에 평가됨 - 함수 호이스팅이 아니라, 변수 호이스팅이 발생함.  -> 함수 표현식 이전에 함수를 참조하면 undefined 로 평가됨. => 함수 선언문의 함수 호이스팅 때문에 함수 표현식을 사용할 것을 권장함.

 

 

 

12.4.4 Function 생성자 함수

const add = new Function('x', 'y', 'return x + y');

new 연산자랑 호출.

Function 생성자 함수로 함수를 생성하는 방식

- 일반적이지 않음

- 바람직하지 않음

=> 클로저 생성 ❌ & 함수 선언문이나 표현식으로 생성한 함수와 다르게 동작함.  

 

 

 

12.4.5 화살표 함수

const add = (x, y) => x + y;

항상 익명 함수로 정의함. 

함수 선언문 혹은 표현문을 완전히 대체하지는 못함. 

표현 뿐 아니라 내부 동작도 간략화 되어 있음. 

- 생성자 함수로 사용할 수 없음.

- 기존 함수와 this 바인딩 방식이 다름

- prototype 프로퍼티가 없음

- arguments 객체를 생성하지 않음. 

 

(나중에 뒤에서 또 배움)

 

 

---

 

 

🫧 12.5 함수 호출

 

12.5.1 매개변수와 인수

함수 실행에 필요한 값을 외부에서 전달 할 경우 -> 매개변수(인자)를 통해 인수를 전달. 

인수는 값으로 평가될 수 있는 표현식이여야함. 

----------------------------------------------

function add (a, b) {

return a + b;

}

add ( 1, 2 );

---------------------------------------------

 

함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않음. 

 

매개 변수보다 인수가

덜 들어오면 undefined, 

더 들어오면 무시함. 

 

 

12.5.2 인수 확인

JS는 타입을 확인해주지 않으므로 타입과 상관없이 인수를 보낼 수 있다.

-> 적절한 인수가 전달되었는지 확인할 필요가 있다.

 

TS 를 도입하는 것도 하나의 방법임. 

 

 

12.5.3 매개변수의 최대 개수

매개변수는 개수보다 순서에 의미가 있음. 

최대 3개 이상을 넘지 않는 것을 권장함. 

(유지 보수와 오류 발생률 저하를 위해)

 

 

12.5.4 반환문

return

역할 1. 함수의 실행을 중단하고 함수 몸체를 빠져나감. (return 문 이후에 쓰여진 코드는 실행 안됨)

 

역할 2. return 문 뒤의 표현식을 평가해 반환함. 명시적으로 지정하지 않으면 undefined 반환

 

반환문 생략 가능. 

생략할 경우 undefined 반환.

 

return 키워드와 반환값 사이에 줄바꿈이 있으면

-> return 뒤에 ; 세미콜론 추가됨. 반환값은 무시됨.

 

(Node.js 는 독립적인 파일 스코프를 가지기 때문에, 파일의 가장 바깥에 반환문 사용해도 에러 발생 ❌)

 

 

---

 

 

🫧 12.6 참조에 의한 전달과 외부 상태의 변경

 

함수로 원시 값을 받으면 -> 훼손 안됨. 

객체를 받으면 -> 훼손됨. 

참조값을 넘겨주기 때문에 원본 객체가 변경됨. 

 

=> 추적도 어려워 복잡성 증가, 가독성을 해치게 됨. 

 

< 해결 방법 >

1. 똑같은 객체를 새롭게 생성 (독립적으로 복제) 후 사용하기. === 깊은 복사

=> 객체를 불변 객체(변경 불가능한 값)으로 만들기

2. 순수 함수 사용 (외부상태 변경 ❌, 외부 상태에 의존 ❌)

 

 

---

 

 

🫧 12.7 다양한 함수의 형태

 

12.7.1 즉시 실행 함수

(함수 정의)();

-> 단 한번만 호출되며, 재호출 안됨. 

실행 함수(함수 정의부분)은 꼭 () 로 감싸야 한다.

 

즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있고 인수를 전달할 수도 있음.

const add = (function (a, b){
    return a + b;
})(5, 3);

 

 

12.7.2 재귀 함수

자기 자신을 호출. 

반복되는 처리를 위해 사용함.

 

펙토리얼 ! 계산할 때 좋음

function factorial(n) {
    if (n <= 1) return 1;
    return n * factorial(n - 1);
}

 

함수 내부에선 함수 이름을 사용해 재귀 할 수 있음.

근데 함수 외부에선 식별자로 호출해야함.

 

대부분의 재귀함수는 for 문, while 문으로 표현 가능.

반복문보다 직관적으로 표현할 수 있을 때 사용하는 걸 권장함. 

 

 

12.7.3 중첩 함수

중첩 함수 : 함수 내부에 정의된 함수. 일반적으로 외부함수를 돕는 헬퍼 함수의 역할을 함. 

외부 함수 : 중첩 함수를 포함한 함수

 

 

 

12.7.4 콜백 함수

콜백 함수 : 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수 

고차 함수 : 매개 변수로 함수의 외부에서 콜백 함수를 전달받은 함수

 

고차 함수는 콜백함수의 호출 시점을 결정해서 호출함. 

=> 콜백 함수는 고차 함수에 의해 호출되며, 필요에 따라 콜백 함수에 인자를 전달할 수 있음. 

 

=> 고차 함수에 콜백 함수를 전달할 때, 콜백함수를 호출하지 않고 함수 자체를 전달해야함. 

() 붙여서 전달하면 안됨. 

 

 

12.7.5 순수 함수와 비순수 함수 

순수 함수	비순수 함수
- 외부 상태에 의존 ❌ && 외부 상태 변경 ❌ -> 부수 효과가 없는 함수 - 동일한 인수 전달 -> 동일한 값 반환  - 최소 하나 이상의 인수를 전달 받음.  - 인수의 불변성 유지	- 외부 상태 의존 ⭕ || 외부 상태 변경 ⭕ -> 부수 효과가 있는 함수 - 외부 상태에 따라 반환값이 달라짐.  - 외부 상태 : 전역 변수, 서버 데이터, 파일, DOM 등...

 

함수형 프로그래밍

- 외부 상태를 변경하는 부수 효과를 최소화 => 불변성 지향하는 프로그래밍 패러다임. 

- 반복문, 조건문 제거 -> 복잡성 해결

- 변수 사용 억제, 생명 주기 최소화 -> 상태 변경 피함 -> 오류 최소화

=> 오류를 피하고 프로그램의 안정성을 높이려는 노력의 일환임.