반복되는 코드를 효율적으로 줄일 수 있다.
직사각형의 면적을 계산한다고 했을 때, 우리는 모든 직사각형의 면적을 계산하기 위해 수없이 많은 식을 작성해야할 것이다. 이처럼 직사각형을 계산하는 식을 함수로 만들어서 반복되는 코드를 줄일 수 있다.
let width = 10;
let height = 20;
let area1 = width * height;
console.log("area1: ", area1);
function getArea(width, height) {
return width * height;
}
console.log("area2: ", getArea(3, 5));
return
을 통해 원하는 값을 반환하여 사용할 수도 있다.
이러한 함수를 생성하는 방법에는 두가지가 존재한다. 함수 선언식
, 함수 표현식
함수 선언식은 function
뒤에 바로 함수명을 작성하고 ()
안에 인자를 적어 함수를 선언하는 방식을 말한다.
function hello2() {
return "안녕하세요 여러분";
}
함수 표현식은 함수를 저장할 변수를 하나 먼저 만들고 해당 함수에 익명함수(이름이 없는 함수)를 할당하는 것처럼 표현하는 방식을 말한다.
let hello1 = function () {
return "안녕하세요 여러분";
};
함수 내부에서 선언된 변수로, 함수 외부에서 접근할 수 없다.
함수 외부에서 선언된 변수로, 함수 내부에서 접근할 수 있다.
-> 스코프
때문인데, 변수가 함수 내부에서 선언되면 함수레벨 스코프를 갖게 되어 함수 내부에서만 접근할 수 있다. 반대로 외부에서 선언되었다면, 해당 스코프 내에 함수를 포함하고 있기 때문에 더 작은 범위의 스코프에서 해당 변수에 접근할 수 있게 된다.
호이스팅이란, 코드가 실행되기 전, 변수선언, 함수선언이 스코프의 최상단으로 끌어올린 것과 같은 현상을 말한다.
함수 선언식은 호이스팅되지만 함수 표현식은 호이스팅되지 않는다.
console.log(hello2()); // 함수 선언식은 호이스팅됨
// console.log(hello1()); // 함수 표현식은 호이스팅되지 않음
// 함수 표현식
let hello1 = function () {
return "안녕하세요 여러분";
};
// 함수 선언식
function hello2() {
return "안녕하세요 여러분";
}
익명함수에서 function
과 {}
생략하고 =>
로 연결한 함수를 말한다. 이를 이용하면 함수 표현식을 좀 더 간결하게 표현할 수 있다.
let hello3 = () => "안녕하세요 여러분";