[React] Javascript 기본 - 함수

함수

반복되는 코드를 효율적으로 줄일 수 있다.

직사각형의 면적을 계산한다고 했을 때, 우리는 모든 직사각형의 면적을 계산하기 위해 수없이 많은 식을 작성해야할 것이다. 이처럼 직사각형을 계산하는 식을 함수로 만들어서 반복되는 코드를 줄일 수 있다.

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 = () => "안녕하세요 여러분";