스크립트를 작성하다 보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많다.
이럴 때 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출해 사용할 수 있다.

1. 함수 (function) 란?

함수는 어떤 작업을 수행하기위한 집합을 정의한 코드블록.
필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.

함수를 사용할 때는 함수를 정의하고 호출하여 사용한다.

• 함수 정의 : 함수를 호출하기 전에 전달받을 매개변수, 실행할 문, 반환 값을 지정하는 것을 말한다. 함수를 정의하는 방법은 다양하다.

• 함수 호출 : 함수를 정의하는 것은 함수의 이름과 수행할 작업을 지정하는 것일 뿐 함수가 실행되지는 않는다. 함수를 호출하면 지정된 매개변수를 가지고 작업이 수행된다.

전역 변수와 지역 변수

지역 변수

함수 내부에서 선언한 지역변수는 외부에서 사용이 불가능하며 함수 안에서만 접근할 수 있다.

function sayHi() {
  let userName = "Bob"; 

  let message = 'Hello, ' + userName;
  console.log(userName);  // Bob
}

console.log(userName); // Uncaught ReferenceError: userName is not defined 

전역 변수

함수 내부에서는 전역 변수에 접근할 수 있으며 수정도 가능하다.

let userName = 'John';

function sayHi() {
  userName = "Bob"; // (1) 전역 변수를 수정.

  let message = 'Hello, ' + userName;
  console.log(message);
}

console.log( userName ); // 함수 호출 전이므로 John 이 출력됨.

sayHi();

console.log( userName ); // 함수에 의해 Bob 으로 값이 바뀜.

함수의 매개변수로 받은 값은 복사된 후, 지역 변수가 된다.

let name = "Mike";

function sayHello(name) {
  console.log(name)
}

console.log(name); // Mike
sayHello(); // undefined
sayHello('haewon'); // haewon

그렇기 때문에 위에서 전역변수인 name이 있음에도 함수의 매개변수 name과는 다른 값이 된다.

2. 함수를 정의하는 방법

함수를 정의하는 방법은 4가지가 있다.

• 함수 선언식
• 함수 표현식
• Function 생성자 함수
• 화살표 함수

2-1. 함수 선언식

함수 선언 방식을 이용하여 함수를 만들 수 있다.
function 키워드, 함수명, 매개변수를 차례로 써준다.

// 함수 함수명 (매개변수)
function sayHi(name) {
	console.log(`Hello! ${name}`);
}

2-2. 함수 표현식

자바스크립트의 함수는 아래와 같은 특징을 갖는다.

• 무명의 리터럴로 표현이 가능하다.

• 변수나 자료구조(객체, 배열...)에 저장할 수 있다.

• 함수의 파라미터로 전달할 수 있다.

• 반환값으로 사용할 수 있다.

함수 표현식은 이러한 자바스크립트의 특징을 활용해 함수를 변수에 할당하는 선언 방식이다.

함수 표현식으로 정의한 함수는 함수명을 생략할 수 있으며 이러한 함수를 익명함수라고 한다.
일반적으로 함수 표현식에서는 함수명을 생략한다.

let sayHi = function (name) {
	console.log(`Hello! ${name}`);
}

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

함수 선언문과 표현식은 호출할 수 있는 시점이 다르다.

함수 선언문은 어디서든 호출이 가능하다.
아래와 같이 함수 정의보다 호출이 먼저 되어도 호출이 가능하다.

// 함수 선언문
sayHello();	// Hello
function sayHello(){
	console.log('Hello');
}

하지만 표현식은 호출이 먼저 오면 실행되지 않는다.

// 함수 표현식
sayHello();		// Error!
let sayHello = function(){
	console.log('Hello');
}

이것은 호이스팅 때문이다.
자바스크립트는 실행 전, 초기화 단계에서 코드의 모든 선언을 찾아 생성해두기 때문에 함수를 사용할 수 있는 범위가 위로 올라간다.
따라서 함수 선언문은 호이스팅의 영향을 받지만, 함수 표현식은 코드에 도달하면 생성이되므로 호이스팅의 영향을 받지 않는다.