자바스크립트 함수

함수를 왜 사용할까요?

"컨트롤 c + 컨트롤 v"를 누르면 복사한 것을 붙여넣을 수 있습니다. 무언가 반복해서 사용할 때 자주 쓰는 단축키입니다. 코드를 작성할 때도 똑같습니다. 반복해서 사용해야할 것이 있다면 코드를 복사해서 그대로 붙여넣으면 됩니다. 하지만 계속 똑같은 코드를 복사해서 붙여넣는다면 엄청나게 용량이 커져버리겠죠? 반복되는 코드를 한번만 정의하고 필요한 순간에 실행만 할 수 있다면 엄청난 시간과 용량을 절약할 수 있습니다. 이게 함수가 필요한 이유입니다.

함수 알아보기

그림처럼 생각하시면 됩니다. x가 들어가서 f(x)가 되서 나오는 것입니다. 위의 과정을 코드로 표현해 볼까요?

function hello(x){
  return "hello "+ x;
};
hello("lemonCandy"); //hello lemonCandy

함수를 정의하고 호출하는 코드입니다. function이라고 쓰고 함수이름을 hello라고 지었습니다. 괄호 안의 x는 매개변수라고 합니다. 그리고 중괄호 안에는 실행할 코드를 작성하고 값을 반환(return)합니다. 그림에서 보면 들어가고 나오는 입구가 하나씩 있죠? 함수 안에 여러 개의return이 정의되어 있더라도 가장 먼저 만나는 return문을 반환하고 함수에서 빠져나오게 됩니다. 

만약 따로 return문을 통해 반환할 값을 적지 않으면 undefined가 반환됩니다.

function hi(){
  console.log("hi everybody");
  console.log("I love js!");
};
hi();

hi라는 함수에는 return문을 따로 적지 않았습니다. 함수를 실행하면 중괄호 안에 있는 코드가 실행되고, undefined라는 값이 반환되겠죠. 또 달라진 점이 보이나요? 네 맞습니다. 매개변수가 필요없다면 정의하지 않으시면 됩니다. 

함수의 호출과 참조

함수를 정의하고 난 뒤 사용할 땐 이름뒤에 괄호를 붙여서 사용했습니다. 함수를 호출할 때는 꼭 ()를 붙여야합니다. 그럼 함수를 참조할 때는 어떻게 해야할까요?

function hi(){
  console.log("hi everybody");
  console.log("I love js!")
};
let x = hi(); //x에는 undefined이 담김
let y = hi; // y에는 함수 hi가 담김

그냥 함수이름만 적으면 함수가 참조됩니다. x에는 왜 undefined라는 값이 담기는지 생각해보셔야 합니다. hi()라고 적으면 함수가 실행이 되고, 함수에 따로 return문이 없기 때문에 undefined가 반환됩니다. 

함수선언과 함수표현식

함수를 정의할 때 function 함수이름(){};이라는 형태로 정의를 했었습니다. 이렇게 정의하는 것을 함수 선언이라고 합니다. 함수를 정의하는 다른 방법은 함수 표현식이 있습니다. 

const f = function(){
  console.log("함수표현식(function expression)");
};

함수에 따로 이름을 쓰지 않는익명함수를 쓰고 f라는 상수에 함수를 담았습니다. 실행할 땐 f();라고 하시면 됩니다. 이렇게 정의하는 것을 함수표현식이라고 합니다. 둘의 차이는 무엇일까요?

f();
const f = function(){
  console.log("함수표현식(function expression)");
}; //에러가 납니다.

fu();
function fu(){
  console.log("함수 선언일 경우 에러가 나지 않습니다.");
};

함수가 정의되기 전에 호출하였습니다. 함수 표현식일 경우엔 에러가 나지만 함수 선언일 경우 에러없이 작동되는 것을 볼 수 있습니다. 함수선언으로 정의하면 호이스팅(끌어올려진다는 의미)이 일어납니다. 즉 코드를 순서대로 읽기 전에 미리 함수선언한 부분들을 읽고 코드를 읽어가기 때문에 에러가 나지 않는 것입니다.

중요한 챕터인 함수에 대해서 배웠습니다. 이해가 되지 않으시는 부분은 댓글로 남겨주세요.

공감은 제작자에게 큰 힘이 됩니다.