자바스크립트 기초 강좌 #6 - 함수, 함수 표현식

1. 함수(function)란?

함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 

이러한 함수는 필요할 때마다 호출하여 해당 작업을 수행할 수 있습니다. 

 

자바스크립트에서는 함수도 하나의 타입(datatype)입니다. 

따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능합니다. 

또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수 있습니다. 

 

1.1 함수의 정의

자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성 요소를 가집니다.

 

1. 함수의 이름

2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)

3. 중괄호({})로 둘러싸인 자바스크립트 실행문

 

function 함수이름(매개변수,매개변수2...){
     실행문;
}

 

2. 함수 선언문 vs 함수 표현식

 

함수 선언문과 함수 표현식은 실행 방식과 동작 방식은 동일합니다. 어떤 차이가 있을까?

 

함수 선언문 

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

 

함수 표현식

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

 

정답은 함수를 호출할 수 있는 타이밍입니다. 

 

2.1 함수 호출의 타이밍

 

함수 선언문은 어디서든 호출이 가능합니다. 함수 선언보다 함수를 호출하는 부분이 윗부분에 있어도 실행이 되는데, 순차적으로 실행되는 JS에서 어떻게 실행이 가능한 것일까요?

 

JAVASCRIPT 내부 알고리즘에 의해 JS는 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해놓습니다. 따라서 함수의 사용가능한 범위가 함수가 선언된 부분보다 넓어지게 되는데 이를, 호이스팅(hoisting)이라고 합니다. 

 

함수 표현식은 JS가 한줄씩 읽어가면서 실행되기 때문에 코드에 도달해서야 함수가 실행되기 때문에 위와같은 방식으로는 호출할 수 없습니다. 

 

2.2 함수 선언식과 표현식의 차이점

 

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않습니다.

즉 함수 선언식이 더 자유롭습니다. 

 

 

3. 화살표 함수(arrow function)

 

함수 표현식보다 단순하고 간결한 문법으로 함수를 만드는 방법이 화살표 함수 방법입니다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다.

 

let sum = function(a,b){
  return a+b;
  };

위의 함수를 화살표 함수로 바꾸면 아래 코드가 됩니다. 

let sum=(a,b) => a+b;

 

또 다른 예시를 보겠습니다. 아래는 함수선언문입니다. 

function showError(){
  console.log("error");
  }
  
  showError();

위의 함수를 화살표 함수로 변경하면

let showError=()=>{
 console.log("error");
 }

 

이번에는 return 문이 포함된 함수를 보겠습니다. 

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

위의 함수를 화살표 함수로 바꿔보면

let add = (num1, num2) => {
 return num1+num2;
 }
 
 // 이때 , return문이 한줄이라면 return 과 괄호를 생략 할 수 있습니다.
 
 
 
 let add = (num1,num2) => num1+num2;

 

그리고 인수가 딱 하나라면 인수의 괄호가 생략이 가능하고 

인수가 없는 괄호라면 생략이 불가능합니다. 

 

let sayHello = (name) => 'Hello ${name}`;

// 인수가 딱 하나라면 괄호 생략가능

let sayHello = name => 'Hello ${name}`;

// 인수가 없는 괄호라면 생략이 불가능하다