[JavaScript] 함수(function) 사용하기

자바스크립트로 함수를 생성하는 방법은 '함수 선언문'과 '함수 표현식'이 있다. 각각의 사용 방법과 차이점을 함께 알아보겠다. 나아가 화살표 함수도 알아볼 것이다!

📌 함수 선언문

sayHello(name); //호출

function sayHello(name){
    const msg = `Hello, ${name}`;
	console.log(msg);
}

function : 함수
sayHello : 함수명
name : 매개변수

📌 함수 표현식

let sayHello = function(){
    console.log('Hello');
}

sayHello(name); //호출

📌 함수 호출의 차이점

함수를 호출할 수 있는 타이밍이 다르다.

🔰 함수 선언문 ) 어디서든 호출 가능
🔰 함수 표현식 ) 코드에 도달하면 생성

보통 코드는 위에서부터 아래로 'top-down' 방식으로 읽히지만, 자바스크립트는 내부 알고리즘에 의해 실행 전 초기화 단계에서 선언된 함수를 먼저 확인하기 때문에 코드 입력 순서와 상관이 없다. 이를 '호이스팅(hoisting)' 이라고 한다. 따라서 함수 선언문은 함수를 생성하기 전에 함수를 호출하는 코드를 입력해도 실행이 된다.

하지만 이와 다르게 함수 표현식은 위에서부터 읽히기 때문에 함수가 먼저 생성이 되고 나서 사용이 가능하다. 다루기 편한 것은 함수 선언문이지만 각자의 선택에 따라 함수를 생성하면 될 것 같다.

📌 화살표 함수 (arrow function)

let add = (num1, num2) => {num1 + num2};

매개변수가 1개 일 경우, () 소괄호가 생략 가능하다. 하지만 매개변수가 없다면 ()를 그대로 입력해야 한다. 또한 함수 실행 코드가 한 줄이라면 {} 중괄호 역시 생략 가능하며 () 괄호도 가능하다. 두 줄 이상일 경우 {}를 입력해줘야 한다.

코딩앙마의 자바스크립트 기초 강좌 수강 후 정리한 글입니다.