[javascript 함수]

함수란?

어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록

함수는 지시사항들의 묶음

커피를 만들어 제공하는 과정을 함수로 작성하여 예시로 들어보겠다.

function getSomeCoffee(){
//1.물을 끓인다.
//2.원두를 갈아 온다.
//3.드리퍼에 필터를 설치한다.
//4.드립 커피를 추출한다.
//5.만들어진 커피를 제공한다.--> return

함수선언

함수 정의(또는 함수 선언)는 다음과 같은 함수 키워드로 구성되어 있다.

• 함수의 이름
• 괄호 안에서 쉼표로 분리된 함수의 매개변수 목록
• 중괄호 { } 안에서 함수를 정의하는 자바스크립트 표현

입력값과 출력값

삼각형의 넓이를 구하는 함수를 예시로 들어보겠다.

function getTriangleArea(base, height) { 
  let triangleArea = (base * height) / 2;
  return triangleArea;
}
console.log(getTriangleArea(2, 4)) // 4

함수 내부에서 return 을 한 경우
->출력값이 return 문의 값

function getTriangleArea(base, height) { 
  let triangleArea = (base * height) / 2;
}
console.log(getTriangleArea(2, 4)) // undefined

함수 내부에서 return 을 하지 않은 경우
->출력값이 undefined

함수 선언 방법

함수 선언방법은 다음과 같이 정의 되어 있다.

• 함수 선언식
• 함수 표현식
• 화살표 함수

함수 선언방식 역시 삼각형 넓이를 구하는 함수를 예시로 들어보겠다.
함수 선언식

function getTriangleArea(base, height) { 
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

함수 표현식

const getTriangleArea = function (base, height) { 
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

화살표 함수

const getTriangleArea = (base, height) => { 
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

함수 선언식과 함수 선언식의 차이점

• 함수 선언식 호이스팅에 영향을 받음.
• 함수 표현식 호이스팅에 영향을 받지 않음.

함수 선언식은 코드를 구현한 위치에 상관하지 않고 자바스크립트의 특징인 호이스팅 에 따라, 브라우저가 자바스크립트를 해석할 때 위치가 끌어올려진다.

호이스팅 이란?

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

a();

//함수 표현식
var a = function() {
  console.log("a is not a function");
};

-> 이런 형태로 코드를 작성하게 되면 "a is not a function"이라는 에러를 보게 된다. 정리된 코드를 본다면 바로 이해할 수 있다.

var a;
a();
a = function() {
  console.log("a is not a function");
};

위의 코드를 보면
선언문이 가장 최상단으로 끌어올려지고 할당 내용은 그대로이기 때문에 "a is not a function"이라는 에러가 나오게 되는 것이다.
함수를 생성하는 방법에는 변수에 함수를 담는 함수 표현식과 함수명을 지정하는 함수 선언식이 있는데
이런 문제는 변수에 함수를 담는 함수 표현식에만 적용이 되고 함수 선언식에는 적용이 되지 않는다.

hoisting의 작동 방식을 이해해둔다면 프로그램을 설계하는 데 도움이 될 것 같다.