[JavaScript] 자바스크립트 - 함수

 

---

 

1. 함수(function)

 

함수란 특정 기능을 수행하는 소스 코드를 하나로 묶어서 필요할 때마다 사용하기 위한 구조입니다.

함수의 기본 문법은 다음과 같습니다. 매개변수와 리턴값은 생략이 가능합니다. 함수를 호출하는 방법도 간단하게 함수명()만 작성하면 호출할 수 있습니다.

function 함수명(매개변수1, 매개변수2,...){
    로직 & 기능 구현을 위한 코드 작성
    return
}

 

■ 호이스팅

 

하지만 이렇게 함수를 선언하는 경우 호이스팅 현상이 발생합니다. 호이스팅 현상이랑 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 현상입니다.

소스 코드 처리 과정에서 소스코드를 평가하고 실행하게 됩니다. 이 소스코드를 평가하는 과정에서 모든 선언문(변수, 함수 등)이 등록되게 됩니다. 아래의 코드에서 lunchMenu 선언은 위에 있는 출력창 보다 아래에 있지만 콘솔창을 확인하면 에러가 나지 않고 undefined가 떠 있는 것을 볼 수 있습니다.

console.log(lunchMenu);
var lunchMenu = '수육파티다!';
console.log(lunchMenu);

 

undefined는 선언이 되었지만 값이 할당되지 않은 경우인데 선언이 되지 않았음에도 불구하고 undefined가 나타났습니다. 이 현상을 호이스팅 현상이라고 합니다. 

decFunc('위');
function decFunc(value){
    console.log(value, '함수선언');
}
decFunc('아래');

 

함수의 경우에도 똑같은 호이스팅 현상이 발생합니다. 그렇기 때문에 이 현상을 막기 위해 함수를 선언할 때 다른 방법을 사용합니다.

const 함수명 = function(매개변수){return ;}

이를 함수 표현식이라고 합니다. 함수 표현식은 익명 함수 형태(function(매개변수){return ;})(이름이 정해지지 않은 함수)로 함수를 선언하고 변수를 참조하는 방식입니다. let 또는 const 키워드로 선언을 하는데 함수는 한번 정해놓고 재할당 할 일이 거의 없기 때문에 주로 const를 사용합니다.

 

■ 화살표 함수

 

함수표현식을 보다 더 간단하게 표현한 화살표 함수 방식도 있습니다. 비슷한 형태인데 function 키워드가 빠지고 =>가 삽입되어 있습니다. => 표시는 ()와 {} 사이에 들어갑니다.

const 함수명 = (매개변수)=>{return ;}

화살표 함수에서는 만약 매개변수가 1개일 때 소괄호가 생략가능 하고 실행문이 1개일 때 {}, return도 생략 가능합니다.

매개변수 2개를 받아 합을 구하는 함수를 만든다고 할 때 다음과 같이 실행문과 return이 생략 가능합니다.

const addNubmer3=(a,b)=>a+b;