함수 🐵

자바 스크립트 코드를 작성하다 보면 유사하게 동작하는 코드를 작성할 때가 있다.
동일하거나 유사한 코드를 매번 만들게 되면 불필요한 중복 코드가 생긴다.
따라서 공통으로 사용하는 유사코드를 하나로 묶어 함수라는 이름으로 사용할 수 있다.

함수를 사용 x

다음은 가로와 세로를 곱하여 사각형의 면적을 출력하는 코드이다.

let width = 10;
let height = 20;
let area = width * height;

console.log("면적: ", area);

만약 2개의 사각형 면적을 구한다면?

let width = 10;
let height = 20;
let areaA = width * height;

let width = 30;
let height = 40;
let areaB = width * height;

console.log("A면적: ", areaA);
console.log("B면적: ", areaB);

이와같이 유사한 코드를 중복해서 사용하게 된다.
만약 사각형의 면적을 100개 출력해야하는 상황이라면?
코드가 불필요하게 길어질 것이다.

함수 선언

자바스크립트에서는 기본적으로 다음과 같이 함수를 만든다.

function 함수 이름 (매개변수){
	함수가 수행하는 명령
}

위에서 언급한 사각형의 면적을 구하는 코드를 함수로 구현하면 다음과 같다.

function area (width, height){
	console.log(width * height);
}

함수 호출

함수는 이름을 불러 주어야 실행이 된다.

function area (width, height){
	console.log(width * height);
}

area(10, 20);//함수 호출

함수 표현식

자바스크립트는 함수 선언 말고도 함수를 만드는 또 다른 방법이 있다.
함수를 생성하고 변수에 값으로 저장하는 방법이다.

let greeting = function() {
	console.log("hello");
};

greeting();

자바스크립트에서는 함수를 숫자나 문자열처럼 값으로 취급하기 때문에 변수에 함수를 저장할 수 있다.

콜백 함수

콜백함수에 관한 내용은 여기에 정리했다.

화살표 함수

화살표 함수는 익명 함수를 매우 간결하게 작성할 때 사용하는 함수 표현식의 단축 문법이다.

let funcA = (매개변수) => 반환값