[JavaScript(7)] 함수

 

 

안녕하세요~  경제적 자유입니다.

오늘은 JavaScript의 함수 기초, 함수 표현식, 화살표 함수를 리뷰해보려고 합니다.

 

OverView

---

 

JavaScript를 공부하다 보면 function, const sayHi = function() {}, () => {} 같은 문법을 자주 만나게 됩니다.

처음 보면 “다 함수 같은데 왜 이렇게 여러 가지 방식이 있지?”라는 생각이 들 수 있습니다.

 

쉽게 말하면 함수는 자주 사용하는 코드를 하나의 상자에 담아두는 것과 비슷합니다.

예를 들어 “인사하기”라는 기능을 여러 번 써야 한다면, 매번 console.log("안녕하세요")를 쓰는 대신 함수로 만들어두고 필요할 때마다 꺼내 쓸 수 있습니다.

 

추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.

• 참고 링크: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

 

 

개념 설명

---

 

 

1. 함수란?

함수는 반복되는 코드를 하나로 묶어서 필요할 때마다 다시 사용할 수 있게 해주는 기능입니다.

 

예를 들어 로그인할 때, 로그아웃할 때마다 안내 메시지를 보여줘야 한다면 같은 코드를 여러 번 쓰는 대신 함수를 만들어 두고 필요할 떄 호출하면 됩니다.

 

JavaScript에서 제공하는 내장 함수인 alert(),  prompt(), confirm()에 대해서 알아 보았기 떄문에 함수를 직접 만드는 방법에 대해서 알아보도록 하죠.

 

함수는 크게 두 단계로 이해하면 쉽습니다.

 

1. 함수 만들기
2. 함수 호출하기

함수는 만들어두기만 하면 실행되지 않습니다.

반드시 함수 이름 뒤에 ()를 붙여 호출해야 실행됩니다.

 

 

 

---

 

2. 함수 선언문이란?

 

 

함수 선언문(Function Declaration)은 function 키워드를 사용해서 이름이 있는 함수를 만드는 방식입니다.

 

보통 반복 횟수가 어느정도 정해져 있을 때 많이 사용합니다.

 

문법은 다음과 같습니다.

function name(parameter1, parameter2, ... parameterN) {
  // 함수 본문
}

 

 

function showMessage() {
  alert( '안녕하세요!' );
}

showMessage();
showMessage();

 

 

---

 

3. 매개변수와 인자란?

 

함수는 외부에서 값을 받아서 사용할 수 있습니다. 이때 사용하는 것이 매개변수(parameter)와 인자(argument)입니다.

 

처음에는 두 단어가 헷갈릴 수 있습니다.

• 매개변수(parameter): 함수를 만들 때 적는 변수 이름
• 인자(argument): 함수를 호출할 때 실제로 넣는 값

function showMessage(from, text) {

  from = '*' + from + '*'; // "from"을 좀 더 멋지게 꾸며줍니다.

  alert( from + ': ' + text );
}

let from = "상구";

showMessage(from, "Hello"); // *상구*: Hello

// 함수는 복사된 값을 사용하기 때문에 바깥의 "from"은 값이 변경되지 않습니다.
alert( from ); // 상구

 

---

 

4. 지역 변수란?

 

지역변수(local variable)란 함수 안에서 선언된 변수입니다.

 

지역 변수는 함수 안에서만 사용할 수 있습니다.

함수 바깥에서는 접근할 수 없습니다.

function showMessage() {
  let message = "안녕하세요!"; // 지역 변수

  alert( message );
}

showMessage(); // 안녕하세요!

alert( message ); // ReferenceError: message is not defined (message는 함수 내 지역 변수이기 때문에 에러가 발생합니다.)

 

---

 

5. 외부 변수란?

 

외부 변수(outer variable)란 함수 바깥에서 선언되었지만, 함수 안에서 접근 할 수 있는 변수입니다.

 

let userName = '상구';

function showMessage() {
  let message = '안뇽, ' + userName;
  alert(message);
}

showMessage(); // 안뇽, 상구

 

함수에선 외부 변수에 접근하는 것뿐 아니라, 수정도 할 수 있습니다.

---

 

6. 기본값과 반환값

 

기본값(default value)는 함수에 인자가 전달되지 않았을 때 사용할 값을 미리 정해두는 것입니다.

 

기본적으로 undefined가 됩니다. 

 

function showMessage(from, text = anotherFunction()) {
  // anotherFunction()은 text값이 없을 때만 호출됨
  // anotherFunction()의 반환 값이 text의 값이 됨
}

 

 

반환값(return value)이란 함수가 실행된 뒤 바깥으로 돌려주는 값입니다.

 

함수 안에서 return을 사용하면 결과를 함수 밖으로 보낼 수 있습니다.

function checkAge(age) {
  if (age >= 18) {
    return true;
  } else {
    return confirm('보호자의 동의를 받으셨나요?');
  }
}

let age = prompt('나이를 알려주세요', 18);

if ( checkAge(age) ) {
  alert( '접속 허용' );
} else {
  alert( '접속 차단' );
}

---

 

7. 함수 이름 짓기

함수 이름은 보통 동사로 시작하는 경우가 많습니다.

 

함수 이름	의미
showMessage	메세지를 보여준다
getUserName	사용자 이름을 가져온다
setUserName	사용자 이름을 설정한다
checkAge	나이를 확인한다
createCard	카드를 만든다
deleteMemo	메모를 삭제한다

 

 

함수는 이름이 주석의 역할을 대체할 수있기 때문에 간결하면서 함수가 하는 일을 정확히 표현하는 것이 중요합니다.

 

---

 

8. 함수 표현식이란?

 

함수 표현식(Function Expression)은 함수를 값처럼 만들어 변수에 저장하는 방식입니다.

 

// 함수 선언식
function sayHi() {
  alert( "Hello" );
}

// 함수 표현식
let sayHi = function() {
  alert( "Hello" );
};

 

함수 표현식은 함수를 값처럼 다루고 싶을 때 자주 사용합니다.

 

예를 들어 어떤 함수를 변수에 담아두거나, 다른 함수의 인자로 전달할 때 사용할 수 있습니다.

 

함수 표현식은 콜백 함수와 함께 자주 등장합니다.

---

 

9. 콜백 함수란?

 

콜백 함수(callback function)란 다른 함수에 인자로 전달되는 함수를 말합니다.

 

쉽게 말하면 "나중에 실행해줘" 하고 함수에게 맡기는 함수입니다.

setTimeout(function() {
  console.log("3초 뒤에 실행됩니다.");
}, 3000);

 

위에 코드에서는 setTimeout에게 "3초 뒤에 이 함수를 실행해줘"라고 전달한 것입니다.

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log("버튼이 클릭되었습니다.");
});

 

---

 

10. 함수 선언문 vs 함수 표현식

 

• 함수 선언문

함수 선언문은 코드가 실행되기 전에 먼저 준비됩니다.
그래서 함수 선언문은 선언 위치보다 위에서 호출할 수 있습니다.

위 코드는 정상적으로 실행됩니다.

 

• 함수 표현식

함수 표현식은 코드 흐름이 해당 줄에 도달했을 때 함수가 만들어집니다.
그래서 선언 전에 호출하면 에러가 발생합니다.

// 함수 선언문은 선언 전에 호출 가능
sayHello();

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

// 함수 표현식은 변수에 할당된 후 호출 가능
sayBye(); // error

let sayBye = function() {
  console.log("안녕히 가세요!");
};

 

---

 

11. 화살표 함수란?

 

화살표 함수(arrow function)는 함수 표현식을 더 짧게 작성할 수 있는 문법입니다.

 

let func = function(arg1, arg2, ...argN) {
  return expression;
};

let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

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

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

 

마무리

---

 

오늘은 JavaScript의 정말 중요한 개념인 함수에 대해서 정리해봤습니다.

 

함수는 단순히 코드를 묶는 문법이 아니라, 코드를 더 읽기 쉽고 재사용하기 쉽게 만들어주는 핵심 도구입니다.

 

용어가 조금 어려운 감이 있어 이것에 익숙해지는 것에 시간이 걸렸는데 그래도 이렇게 한번 복습을 하면서 내것이 되는 것 같다는 생각이 들어 다행입니다~

 

화살표 함수를 쓰는 것에 요즘 익숙해져 있고 많이 쓰려고 하는데 더 용어를 알고 구조를 더 파악하고 쓰니 잘 쓸 수 있겠다는 생각이 듭니다.

 

공부 화이팅!!