함수란
- 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것
- 리액트에서 컴포넌트를 만드는 함수도 자바스크립트 함수의 기초적인 형태를 따름
- 자바스크립트에서 함수는 다른 함수의 매개변수가 될 수 있고, 반환값이 될 수 있으며, 할당도 가능하므로 일급 객체임
함수를 정의하는 방법
- 함수 선언문
- 가장 일반적으로 사용하는 방식
- 표현식이 아닌 일반 문으로 분류됨
function add(a,b) {
return a + b;
}
- 함수 표현식
- 함수를 변수에 할당해 표현하는 방식
- 할당하려는 함수의 이름을 생략하는 것이 일방적
const sum = function (a,b) {
return a + b;
}
sum(10, 24)
| 함수 선언문 |
함수 표현식 |
| 호이스팅으로 인해 함수 선언문은 먼저 메모리에 등록됨 |
함수를 변수에 할당하기 때문에 변수만 호이스팅 될 뿐 변수에는 undefined가 할당됨 |
| 코드의 순서에 상관없이 정상적으로 함수 호출 가능 |
런타임 시점에 함수가 할당되어 동작하기 때문에 코드의 순서에 상관있음 |
| 함수를 자유롭게 선언하고 어디서든 자유롭게 호출가능 |
함수가 선언되기 전에 함수를 호출하지 않음 |
- Function 생성자
- 화살표 함수
- ES6에서 새롭게 추가된 함수 생성 방식
- function 키워드 대신 => 라는 화살표르 활용해 함수 생성
- 생성자 함수로 화살표 함수를 사용할 수 없음
- arguments가 존재하지 않음
- 함수 자체의 바인딩을 갖지 않음
- this가 선언되는 시점에 이미 상위 스코프로 결정되어 있음
const add = (a,b) => a+b;
다양한 함수
- 즉시 실행 함수 (IIFE)
- 함수를 정의하고 그 순간 즉시 실행되는 함수
- 단 한 번만 호출되고, 다시금 호출할 수 없음
- 일반적으로 즉시 실행 함수에 이름을 붙이지 않음
- 글로벌 스코프를 오염시키지 않고 독립적인 함수 스코프를 운용할 수 있음
- 코드를 읽는 이로 하여금 이 함수는 어디서든 다시금 호출되지 않는다는 점을 각인시킬 수 있어 리팩토링에 도움됨
(function(a,b) {
return a+b
})(10,24)
- 고차 함수
- 함수를 매개변수로 받거나 결과로 새로운 함수를 반환
- 고차 함수를 활용해 고차 함수 컴포넌트를 만들 수 있음
- 고차 함수 컴포넌트는 컴포넌트 내부에서 공통으로 관리되는 로직을 분리해 관리할 수 있어 효율적으로 리팩토링 가능함
// 함수를 매개변수로 받는 대표적인 고차 함수, Array.prototype.map
const doubledArray = [1,2,3].map((item) => item * 2)
// 함수를 반환하는 고차 함수
const add = function(a) {
return function(b) {
return a + b
}
}
add(1)(3)
함수를 만들 때 주의 사항
- 함수의 부수 효과를 억제할 것
- 가능한 한 함수를 작게 만들 것
- 누구나 이해할 수 있는 이름을 만들 것
부수 효과(side-effect) : 함수 내의 작동으로 인해 함수가 아닌 함수 외부에 영향을 끼치는 것
부수 효과가 없는 함수를 순수 함수, 부수 효과가 존재하는 함수를 비순수 함수라고 함
