함수란 무엇이고, 왜 필요할까?

함수는 입력을 받아서 어떤 작업을 실행한 뒤 출력을 내보내는 일종의 기계라고 할 수 있다.

이 함수라는 기계를 만들어두면 필요할 때마다 호출해서 몇 번이고 재사용할 수 있다.

코드를 짤 때 함수를 이용하면 같은 코드를 중복해서 적지 않아도 되고, 또 여러 번 적을 때 발생하는 실수도 줄일 수 있으므로 유지보수하기도 편하고 실수도 줄일 수 있다.

함수 리터럴

리터럴?

• 리터럴은 값을 생성하기 위해 미리 약속한 표기법을 말한다. 숫자 값은 숫자 리터럴로 생성할 수 있고, 객체는 객체 리터럴로 생성할 수 있다. 즉 함수 리터럴이란 함수를 생성하기 위한 표기법이다.

함수 리터럴의 구성 요소?

• 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성된다. 아래에서 하나씩 알아보자.

function 키워드

키워드
자바스크립트 엔진이 수행할 동작을 규정한 명령어. JS 엔진이 키워드를 만나면? 약속한 동작을 수행한다! 예를 들어 let 키워드를 만나면 JS엔진이 뒤에 오는 변수 이름으로 새로운 변수를 선언한다.

• function 키워드를 사용하면 함수를 정의할 수 있다.

함수 이름

• 함수 이름은 식별자이므로 식별자 네이밍 규칙을 준수해야 한다.
• 함수 이름은 생략할 수 있는데, 이름이 있으면 기명 함수, 없으면 익명 함수라고 부른다.

매개변수 목록

• 매개변수parameter 는 함수에 인수를 전달하기 위해 사용되는 변수를 말한다.
• 매개변수는 소괄호로 감싸고 쉼표로 구분한다.
• 함수를 호출할 때 지정하는 인수(argument)가 순서대로 할당되기 때문에 순서가 중요하다.
• 매개변수 역시 식별자 네이밍 규칙을 준수해야 한다.

함수 몸체

• 함수가 호출되었을 때 실행될 문들을 하나의 실행 단위로 정의한 코드 블록이다.

매개변수와 인수의 차이점은 무엇일까?
매개변수는 함수를 정의할 때 사용되는 변수이고, 인수는 함수를 호출할 때 매개변수에 전달되는 값을 말한다. 함수가 호출되면 인수의 값이 매개변수로 전달되고, 그 값을 이용하여 함수를 실행하게 된다.

함수를 어떻게 정의할까?

1. 함수 선언문

• 함수 리터럴과 형태가 동일하게 function 키워드, 함수 이름(add), 파라미터(a와 b), 함수 몸체로 구성된다. 단, 함수 선언문에서 함수 이름은 생략할 수 없다.

function add(a,b) {
	return  a + b; //함수 몸체
}

//여기에 들어가는 11, 2가 인자이다. 
console.log(add(11,2)); //13

• 함수 선언문은 표현식이 아닌 문이기 때문에, 선언문만 작성할 경우 콘솔 창에 undefined가 출력된다.

2. 함수 표현식

let add = function (a,b) {
  return a + b;
}

console.log(add(11,2)); //13

• 자바스크립트의 함수는 일급 객체이므로 변수에 할당할 수 있다.
• 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적이다.

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

• 함수 표현식은 변수 호이스팅이 일어난다. 변수 호이스팅에서 변수의 선언은 런타임 이전에 일어나지만, undefiend로 초기화된 상태여서 함수 표현식이 나오기 이전에 호출할 수 없다.
• 반면 함수 선언문은 함수 호이스팅이 일어난다. 함수 호이스팅에 의해 함수 선언문 이전에 호출이 가능하다. 함수 선언문은 선언하고 호출하는 절차를 무시하기 때문에 지양하는 것이 좋다.

3. 화살표 함수

• 화살표 함수는 ES6에서 도입된 방법이다.
• function 키워드 대신 화살표(=>)를 사용하여 함수를 선언할 수 있고, 항상 익명함수로 선언한다.

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

• 화살표 함수는 간단하지만 사용할 수 없는 경우도 있다.