JS) 함수(Function) 이해하기

MDN function
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function

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

함수(Function)

함수는 프로그램을 구성하는 주요 구성 요소이며, 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있다.

//구조
function  () {
  
}

function showMessage() {  //함수 정의
  alert( '안녕하세요!' );  //함수 정의
}						 //함수 정의

showMessage();			 //함수 호출

함수 형태를 표현하면 크게 네 가지로 구분된다.

첫 번째는 키워드 function 이다.
함수 자료형은 키워드 function을 앞에 붙여 함수로 정의한다.

두 번째는 함수 이름이다.
function과 소괄호() 사이에 이름을 정의하며, 이를 통해 함수를 식별할 수 있다.

세 번째는 매개변수 목록이다.
함수 이름 옆에 소괄호()로 둘러쌓여있는 매개변수목록이 있다.
함수 선언시 매개변수 목록을 정의하면 함수를 호출할 때 인자값을 전달할 수 있다.

네 번째는 함수 실행부다.
함수가 호출되면 실행되는 몸통부로, 중괄호{} 안에 작성한다.

매개변수

매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있다.
매개변수는 인자(parameter) 라고 불리기도 한다.

아래 예시에서 함수 showMessage는 매개변수 from 과 text를 가진다.

function showMessage(from, text) {

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

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

let from = "Ann";

showMessage(from, "Hello"); // *Ann*: Hello

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

함수의 매개변수에 전달된 값을 인수(argument)라고 부른다.

또한 매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면 함수를 선언할 때 =를 사용해 '기본값(default value)'을 설정해주면 된다.

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

showMessage("Ann"); // Ann: no text given
// Ann = from

지역 변수 사용

함수 내에서 변수를 선언할 수 있는데, 함수 내에서 선언한 변수를 지역변수(local variable)라고 한다.
이 지역 변수는 선언한 함수 내에서만 접근할 수 있다.

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

  alert( message );
}

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

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

반환 값 return

함수를 호출했을 때 함수를 호출한 그곳에 특정 값을 반환하게 할 수 있다.
이때 이 특정 값을 반환 값(return value)이라고 부른다.

return은 함수 내 어디서든 사용 가능하며,
return 을 만나면 함수 실행이 중단되고 함수를 호출한 곳에 값을 반환한다.

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

let result = sum(1, 2);
alert( result ); // 3

아래의 코드처럼 함수 하나에 여러 개의 return이 올 수도 있다.

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

함수 이름짓기

함수 이름만 보고도 해당 함수가 어떤 기능을 하는지 예상할 수 있어야 한다.
(꼭 함수 뿐만이 아니라 tag class등 모든 이름을 그렇게 정해야 좋긴 하다.)

show ... => 무언가를 보여주는 함수
get ... => 값을 반환하는 함수
calc ... => 무언가를 계산하는 함수
create ... => 무언가를 생성하는 함수
check ... => 무언가를 확인하고 불린값을 반환하는 함수