자바스크립트의 함수는 다양한 방식으로 구현할 수 있다. 이 중 가장 다양하게 활용되는 것은 3가지 익명함수, 즉시실행함수, 화살표함수이다.
익명함수
말그대로 이름이 없는 함수. 익명 함수를 선언 할 때는 이름을 붙이지 않는다.
함수자체가 '식'이기 때문에 함수를 변수에 할당할 수 있다. 또한 다른 함수의 매개변수로 사용할 수 있다.
단 한번만 사용되는 함수의 경우, 불필요한 시간동안 메모리를 차지하지 않도록 익명함수로 구현한다면, 정확히 해당 함수가 필요한 위치에서만 해당 함수가 구현되고 사라지면서 메모리를 아낄 수 있게 된다.
let add = function(a,b) { // 함수 선언 후 변수 add에 할당
return a + b;
} 기존 함수는 함수 이름을 사용해서 실행하는데, 익명함수는 이름이 없으니 어떻게 해야할까?
변수 add에 할당했으니 함수 이름처럼 사용해서 익명 함수를 실행한다.
let sum = add(10,20); // 익명 함수 실행 후 결괏값을 변수 sum에 저장.
📌즉시 실행 함수
즉시실행함수는 정의와 동시에 호출되는 함수로 단 한번만 쓰이는 함수를 메모리에서 빠르게 제거할 수 있다는 장점이 있어 사용된다.
즉시실행함수는 전역변수 사용을 억제할 수 있어 변수이름의 충돌을 방지할 수 있으며 메모리를 효율적으로 관리할 수 있고 모듈 패턴에 사용하기 유리하다.
즉시 실행 함수는 함수 선언 소스 전체를 괄호로 묶는다고 생각하면 쉽다.
그리고 소스를 닫는 괄호 앞이나 뒤에 인수가 들어갈 괄호를 넣는다.
끝에 세미콜론을 붙여준다.
(function() {
*******
}());위와 같이 사용할 수있는데, 변수에 할당할 수 있고, 함수에서 반환하는 값을 변수에 할당할 수도 있다.
콘솔창에 표시!
매개변수가 필요한 함수라면 function 예약어 다음의 괄호 안에 매개변수를 넣고 함수를 정의한다. 그리고 함수 끝에 있는 괄호에는 실제 실행할 떄 사용할 인수를 넣고 실행한다.
📌화살표 함수
es6 버전부터는 =>표기법(화살표 표기법)을 사용해 함수 선언을 더 간단하게 작성 할 수 있다. 화살표 함수라고 하는데 익명 함수에서만 사용할 수 있다.
식별자에 화살표 함수를 할당하는 방식이며 function 표현에 비해 구문이 짧아 개발시에 편리하다.
const hi = funtion(){
return "안녕하세요?";
}👇
const hi = () => {return "안녕하세요?"};중괄호 안에 함수 내용이 한 줄뿐이라면 중괄호 생략가능! return문도 생략가능!
const hi = () => "안녕하세요?";
📌매개변수가 1개일 때.
let hi = user => document.write(user + "님, 안녕하세요?");user가 매개변수이다.
📌매개변수가 2개일 때.
let hi = (a,b) => {return a + b}함수 내용이 한줄 이니까 중괄호와 return문 생략가능!
let hi = (a,b) => a + b;