B9 : 함수와 함수의 선언

목차

1. 함수

    1-1. 함수란?

    1-2. 자바스크립트의 함수

2. 함수 구성 요소

    2-1. 구성 요소

    2-2. 매개변수 (parameter)

    2-3. 기본값 (default value)

    2-4. 반환값 (return value)

3. 함수 생성 방법 3가지

    3-1. 함수 선언문

    3-2. 함수 표현식

    3-3. 익명 함수& 화살표 함수

---

1. 함수

1. 함수란?

함수는 객체의 특별한 형태로, 문(statement)로 구성된 몸체를 가진 하나의 실행 단위이다.

function doSomething() {	// 함수 선언
  console.log('hello');
}

doSomthing()	// 함수 호출하여 사용

 

 

여러 곳에서 비슷한 코드가 쓰일 때, 코드의 중복을 줄이기 위해 함수를 사용한다.

 

자바스크립트의 내장 함수로 alert(message), prompt(message, default), confirm(question) 등이 있는데,

필요한 함수를 직접 만들어서 사용할 수 있다.

 

function 키워드, 함수명, 매개변수를 작성하여 함수를 선언한다.

function 함수명(parameter1, parameter2, ... parameterN) {
  동작 코드
}

//e.g.
let name = prompt('이름을 입력하세요: ', '');
function sayHello(name) {
  console.log(`Hello ${name}`);
}

sayHello();

 

 

2. 자바스크립트의 함수

자바스크립트의 함수는 일급 함수 (first-class function)으로, 다른 함수의 매개변수, 반환값이 될 수 있다.

e.g.) DOM에 이벤트를 추가하는 콜백함수 addEventListener()

button.addEventListener('click', callback);	// addEventListener함수에 callback()을 인자로 넘김

---

2. 함수 구성 요소

1. 구성 요소

자바스크립트의 함수는 function 키워드로 정의되며, 아래의 구성 요소를 가진다.

• 함수명(식별자) : 함수를 할당할 변수의 이름
• 매개변수(인자) : 괄호 안에서 쉼표로 구분되며, 함수 내 지역변수처럼 이용됨
• 몸체 : 중괄호{} 안에 정의하며, 함수가 호출될 때마다 실행되는 구문 집합

function 식별자(인자) {
  몸체
}

 

2. 매개변수 (parameter)

인수 (argument) 전달

• 매개변수 name : 함수 내에서 지역변수처럼 사용됨

function sayHi(name) {
  return `Hi ${name}`;
}

console.log(sayHi());  // Hi undefined
console.log(sayHi(bang));	// Hi bang

 

✅ argument 객체

화살표 함수를 제외한 모든 함수에서는 argument 객체를 사용하여 함수에 전달된 인자들을 참조할 수 있다.

function sum(x, y, z) {
	console.log(arguments[0]);	// 1
    console.log(arguments[1]);	// 2
    console.log(arguments[2]);	// undefined
    console.log(arguments.length);	//2
    return x + y + z;
}

sum(1, 2);	// NaN

 

 

 

3. 기본값 (default value)

• 매개 변수에는 인수로 아무것도 안들어왔을 때 지정할 기본값을 지정할 수 있다.
• 인수도, 기본값도 없으면 해당 매개변수는 undefine가 할당된다.

function showMessage(from, text = "no text") {
    alert(from + ' : ' + text);
}

 

4. 반환값 (return value)

함수를 호출했을 때 return 지시자를 사용하면 특정 값을 반환하게 할 수 있다.

// 1. 인수 전달
function showMessage(from, text) {
    alert(from + ' : ' + text);
}

showMessage('Bang', 'Hello!');
showMessage('Kim', 'Good Morning!');

// 2. 기본값 지정
function showMessage(from, text = 'no comment') { ... }

// 3. 반환값 지정
function showMessage(from, text) {
  return from + ': ' + text

• return은 함수 내 어디서든 사용할 수 있다.
• return을 만나면 함수 실행이 중단되고, 함수를 호출한 곳에 값을 반환한다.
• 값 없이 return; 만 작성하면 함수를 종료시킨다. (return문이나 반환값이 없으면 return은 undefined를 반환한다.)
• 자바스크립트는 return 문 끝에 자동으로 세미콜론(;)을 넣는다. 따라서 줄바꿈을 하면 안된다.

---

3. 함수 생성 방법 3가지

함수를 생성하는 방법은 함수 선언문, 함수 표현식, Function 생성자 함수 이렇게 3가지가 있다.

이 중 Function 생성자 함수는 보안 및 성능 문제가 있어 권장되지 않는다.

 

1. 함수 선언문

• 독자적인 구문 형태로 존재한다.
• 호이스팅(hoisting)이 된다.
  • 호이스팅 : 함수가 선언된 위치에서 코드의 최상단으로 끌어올려지는 것
  • 자바스크립트 엔진이 스크립트 실행 전, 준비 단계에서 함수를 생성한다. → 함수 선언문이 정의되기 전에도 호출할 수 있다.
• 함수가 선언된 코드 블록 안에서만 유효하다. → if문 안에서 함수를 선언했다면 해당 if문 안에서만 사용 가능

function sum(a, b) {
  return a + b;
}

 

 

2. 함수 표현식

• 함수 이름이 선택사항이며, 변수에 함수를 직접 할당한다. (표현식/구문 구성 내부에 생성된다)
• 자바스크립트 엔진이 실제 흐름이 해당 함수에 도달했을 때 함수를 생성한다. → 함수 표현 위치보다 상단에서 호출될 수 없다.
• 함수 표현식을 사용하면, 함수를 어디에서 선언해도 할당한 변수에 접근할 수 있는 곳에서 유효하다.

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

 

 

보통은 함수 표현식에서 함수의 이름을 생략하나, 함수 이름을 표현하는 기명 함수 표현식도 있다.

기명 함수 표현식에서 정의한 함수의 이름은 함수의 몸체 안에서만 사용 가능하다.

const factorial = function doSometing(n) {
  return (n <= 1) ? 1 : n * doSomething(n-1);
}

console.log(factorial(5));	// 120

주로 함수 표현식을 재귀 호출할 때 사용한다.

 

 

3. 익명 함수 & 화살표 함수

✅ 익명 함수

이름 없이 선언한 함수를 익명 함수라고 부른다.

익명 함수는 변수에 할당된 것이 아니기 때문에 선언한 블록 밖에서 접근이 불가능하다.

function ask(question, yes, no) {
  if(confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의했습니다."); }	// 익명 함수
  function() { alert("취소했습니다."); }	// 익명 함수
);

 

✅ 화살표 함수

ES2015에서 등장한 문법으로, 함수 표현식보다 단순하고 간결한 문법으로 함수를 만드는 방법이다.

특징

• function 키워드 생략
• 매개 변수가 한 개일 때 괄호 생략
• 매개 변수가 없으면 괄호만 작성
• 함수 몸체에 문이 한 개인 경우, 중괄호/return 키워드 생략 가능
• argument 객체와 this 바인딩을 하지 않음

// 1. 인수가 2개
let sum = (a, b) => a + b;
alert(sum(1, 2));	// 3

// 2. 인수가 1개 : 괄호 생략
let double = n => n * 2;
alert(double(3));	// 6

// 3. 인수가 없음 : 괄호만
let sayHi = () => alert("Hi");
sayHi();

// 4. 본문이 여러 줄 : 중괄호{}에 몸체를 넣음
let sum = (a, b) => {
  let result = a + b;
  return result;
};

alert(sum(1,2));	// 3

 

위에서 작성해봤던 익명함수도 화살표 함수로 만들 수 있다.

ask {
  "동의하십니까?",
  () => alert("동의했습니다.");
  () => alert("취소했습니다.");
);

 

 

 

 

 

참고

https://ko.javascript.info/function-basics

함수

기초부터 완성까지, 프런트엔드 (이재성|한정)

기초부터 완성까지, 프런트엔드 - 예스24