[JS] 함수

Mintaek·2023년 11월 15일

JavaScript function

JavaScript

목록 보기

8/8

함수

함수는 자신의 외부 코드가 호출할 수 있는 하위 프로그램이다. 입력을 받아서 출력을 내보낼 때, 함수 내부로 전달 받은 변수를 매개변수(parameter), 입력을 인수=인자(argument), 출력을 반환값(return value)이라고 한다.

JavaScript에서의 함수

JS에서 함수는 다른 함수로 전달되거나 반환받을 수 있고, 변수와 속성을 할당받을 수도 있기 때문에 일급 객체에 해당된다. 다른 객체와 구별되는 점은 함수를 호출할 수 있다는 점이다.
함수 선언을 위해서 Keyword, name, parameter, body가 필요하다.

함수 선언

함수 선언(function declaration) 방식을 이용하면 함수를 만들 수 있다. ( 함수 선언문 이라고도 불림 )

// 함수 선언 방식
function greeting(){
    alert( '안녕하세요 !' ); // 함수 본문
}

greeting();

위 예제에서 해당하는 Keyword는 function , name은 greeting, parameter는 (), body는 {}에 해당한다.
위 함수에서 parameter, 즉 매개변수가 존재하지 않는데, 만약 매개변수가 여러 개 존재한다면 각 매개변수를 콤마로 구분해준다.
greeting()로 함수를 호출하면 함수 본문이 실행된다. 위 예시에선 alert 창이 한 번 뜬다.

지역 변수

함수 내에서 선언한 변수인 지역 변수는 함수 안에서만 접근할 수 있다.

// 함수 선언 방식
function greeting(){
    let message = '안녕하세요!'
    alert(message);
}

greeting(); // '안녕하세요!'

alert(message); // ReferenceError: message is not defined

외부 변수

함수 내부에서 함수 외부의 변수인 외부 변수에 접근할 수 있다.

let name = 'taek' // 전역 변수

function greeting(){
    let message = 'Hello, ' + name;
    alert( message );
}

greeting(); // 'Hello, taek'

함수에선 외부 변수에 접근하는 것뿐만 아니라, 수정도 가능하다.

let name = 'taek' // 전역 변수

function greeting(){
    name = 'min' // 전역 변수 수정
    let message = 'Hello, ' + name;
    alert( message );
}

alert( name ) // 함수 호출 전 = 'taek' 출력

greeting(); // 'Hello, taek'

alert( name ) // 함수 호출 후 = 'min' 출력

외부 변수는 지역 변수가 없는 경우에만 사용할 수 있다

let name = 'taek';

function greeting() {
  name = 'min'; // 같은 이름을 가진 지역 변수를 선언합니다.

  let message = 'Hello, ' + name; // min
  alert(message);
}

// 함수는 내부 변수인 name만 사용,
showMessage();

alert( name );

매개변수

parameter라고 불리며, 이것을 이용하면 임의 데이터를 함수 안에 전달할 수 있다.

// 매개변수 `a` , `b`
function sum(a, b){
    return a + b;
}

sum(1,2) // 3
sum(3,4) // 7

함수에 전달된 인자는 지역변수 a와 b에 복사된다. 그 후 함수는 지역변수에 복사된 값을 사용하는것.
아래 예시를 보자, 전역 변수 a가 있고, 이 변수를 함수에 전달하였습니다. 함수가 a를 변경하지만, 변경 사항은 외부 변수 a에 반영되지 않았습니다. 함수는 언제나 복사된 값을 사용하기 때문이다.

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

sum(1,2); // 7

console.log(a) // 3

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

정리하면, 매개변수는 선언 시에 쓰이는 용어이고, 인수는 호출 시에 쓰이는 용어이다.
즉, 함수 선언 시 매개변수를 나열하게되고, 함수를 호출할 땐 인수를 전달해 호출한다.

기본값

함수 호출 시 매개변수에 인수를 전달하지 않으면 그 값은 undefined가 된다.
매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면 함수를 선언할 때 =를 사용해 기본값(default value)을 설정할 수 있다.

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

sum(1) // 3

아래처럼 복잡한 표현식도 가능하다.

function sum(a, b = anotherFunction()){
    // anotherFunction()은 b값이 없을 때만 호출됨
    // anotherFunction()의 반환 값이 b의 값이 됨
}

매개변수 기본값을 설정할 수 있는 또 다른 방법

함수 선언 후에 매개변수 기본값을 설정하는 것이 적절한 경우도 있다, 함수를 호출할 때 매개변수를 undefined와 비교하여 매개변수가 전달되었는지를 확인해보면된다.

function greeting(text) {
  // ...

  if (text === undefined) { // 매개변수가 생략되었다면
    text = '빈 문자열';
  }

  alert(text);
}

greeting();

// if 대신 || 연산자도 사용가능하다
function showMessage(text) {
  text = text || '빈 문자열';
  ...
}


// nullish 병합 연산자 `??`를 사용하면 falsy한 값들을 일반 값처럼 처리할 수도 있다
function showCount(count) {
  alert(count ?? "unknown");
}

showCount(0); // 0
showCount(null); // unknown
showCount(); // unknown

반환값

함수를 호출한 곳에 특정 값을 반환하게 할 수 있다. 이 값을 반환 값이라고 한다.

// 매개변수 `a` , `b`
function sum(a, b){
    return a + b;
}

sum(1,2) // 3
sum(3,4) // 7

return은 함수 내 어디서든 사용할 수 있으며, 함수가 실행되는 중 return을 만나면 함수 실행은 즉시 중단되며 값을 반환한다.

여러 개의 return문도 가능하다

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

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

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

return만 명시하는 것도 가능하고, 이 경우엔 함수가 즉시 종료된다.

function showMovie(age) {
  if ( !checkAge(age) ) {
    return;
  }

  alert( "영화 상영" );
}

위 예제의 경우, checkage(age)가 false라면, alert()는 실행되지 않기 때문에 showMovie()는 얼럿 창을 보여주지 않는다.

return문이 없거나 return 지시자만 있는 함수는 undefined를 반환한다.

// return문이 없는 경우
function foo() {}

console.log( foo() === undefined ) // true

// 지시자만 있는 경우
function foo() {
    return
}

console.log( foo() === undefined ) // true

함수를 정의하는 여러가지 방법

덧셈을 하는 함수의 여러가지 정의 방법

// 함수 선언식
function Addition(num1, num2) {
  return num1 + num2;
}
// 함수 표현식
const Addition = function(num1, num2) {
  return num1 + num2;
}
// 함수 표현식 - 화살표 함수
const Addition = (num1, num2) => {
  return num1 + num2;
}
// 함수 표현식 - 화살표 함수 (생략형)
const Addition = (num1, num2) => num1 + num2;