자바스크립트 함수

자바스크립트 언어로 코딩을 하다보면 동일하거나 유사한 코드를 반복해서 사용해야 된다는 필요성을 느낄 때가 있습니다.

이럴때 함수로 묶어서 사용을 할 수가 있습니다.

예시를 통해 알아보겠습니다.

다음은 주어진 높이와 너비를 이용해서 직사각형의 면적을 출력하는 예제입니다.

let width = 10;
let height = 20;

let area = width * height;

console.log("면적: ", area); // 면적: 200

만약 두개를 구한다면 다음과 같아집니다.

let width1 = 10;
let height1 = 20;
let area1 = width1 * height1;

let width2 = 100;
let height2 = 200;
let area2 = width2 * height2;

console.log("면적: ", area1); // 면적: 200
console.log("면적: ", area2); // 면적: 20000

두 과정은 너비와 높이를 구하는 식으로 똑같습니다. 이럴때 코드를 반복해서 사용하면 불필요한 코드만 늘어나므로 규칙적인 내용을 '함수'로 묶어서 사용할 수가 있습니다.

---

함수선언

함수는 function함수를 통해 만들 수 있습니다.

function 함수 이름 (매개변수) {
  함수가 수행하는 명령
}

자바스크립트에서는 function이라는 키워드를 사용해서 함수를 만듭니다. function 키워드 바로 다음에는 함수의 이름과 괄호 안에 파라미터로 매개변수가 들어가고, { }안에 실행할 코드가 들어가게 됩니다.

다음은 "안녕하세요!"를 출력하는 함수입니다.

function greeting() {
  console.log("안녕하세요!");
}

 

함수 호출

함수를 선언한 뒤에 호출하는 방법은 함수 명과 ()를 그대로 적어주면 됩니다.

위의 함수를 호출하기 위해서는 다음을 사용하면 됩니다.

greeting();

 

직사각형 예제를 함수로 구현하면 다음과 같아집니다.

function getArea() {
  let width = 10;
  let height = 20;
  let area = width * height;

  console.log(area);
}

getArea(); // 200

---

중첩 함수

자바스크립트는 함수 내에 또 다른 함수를 선언할 수 있습니다.
특정 함수 내부에서 선언된 함수를 중첩함수라고 합니다.

function greeting() {
  function greetingWithName(name) { // ①
    console.log(`hello! ${name}`);
  }

  let name = "이정환";
  greetingWithName(name); // ②
}

greeting(); // hello! 이정환

1) 함수 greeting 안에서 greetingWithName이라는 함수를 선언합니다. 이 함수는 중첩함수입니다.

---

함수와 호이스팅

호이스팅은 프로그램에서 벗어난 함수를 호출하거나 접근하는 코드가 함수 선언 코드보다 위에 있음에도 불구하고, 마치 선언 코드가 위에 있는 것처럼 동작하는 기능입니다.

func();

function func() {
  console.log("hello");
}

// hello

 

func함수는 선언 되기도 전에 호출하지만 오류가 발생하지 않습니다. 이런 기능을 호이스팅이락 합니다.

자바스크립트에서 오류가 발생하지 않는 이유는 내부 알고리즘 때문입니다. 자바스크립트는 코드를 실행하기 전에 준비 단계를 거칩니다. 준비 단계에서 중첩 함수가 아닌 함수들은 모두 찾아서 미리 생성해 둡니다. 자바스크립트 코드는 이런 준비 단계를 거친 다음에 실행됩니다. 따라서 선언 코드를 호출보다 늦게 작성해도 자연스럽게 호출할 수 있습니다.