자바스크립트 함수(함수선언, 함수호출, 매개변수, 전달인자, return)

 

함수 정의

함수는 입력을 받아서 코드블록 내부의 코드를 실행한 후 함수의 실행결과를 반환하는 일련의 과정의 묶음입니다.

함수 - JavaScript | MDN

---

함수선언문과 함수표현식

JavaScript에서 함수를 정의하는 방법은 여러 가지가 있습니다. 그중에서 가장 대표적인 함수 정의 방법인 함수선언문과 함수표현식을 배워보도록 하겠습니다.

먼저 문자열 ‘hello world’를 출력하는 함수를 함수선언문으로 정의해 보겠습니다.

// 함수선언문으로 정의한 함수
function greeting () { 
	console.log('hello world') 
};

• 함수의 이름  //  greeting
• 괄호 안에서 쉼표로 분리된 함수의 매개변수 목록 //     ( 소괄호 안에 작성 )
• 중괄호 { } 안에서 함수를 정의하는 자바스크립트 표현 //   { 중괄호 안에 작성 }

함수표현식으로 똑같은 함수를 정의해 보겠습니다.

// 함수표현식으로 정의한 함수
let greeting = function () {
	console.log('hello world')
};

함수표현식은 변수를 선언할 때 사용했던 let 키워드를 사용해서 변수를 선언하고, 함수를 할당하는 형태로 코드를 작성하면 됩니다. 이때, 함수선언문과는 달리, 함수에는 특별한 식별자를 지정할 필요가 없습니다. JavaScript에서는 이처럼 함수를 변수에 할당하는 것이 가능합니다. 그리고 이렇게 변수에 함수를 할당한 것과 같은 형태로 함수를 정의하는 것을 함수표현식이라고 합니다.

함수선언문	함수 선원 키워드인 function으로 함수를 '선언'
함수표현식	변수에 함수를 할당하여 함수를 "표현"

---

함수 호출

함수를 정의하는 것은 함수를 실행하는 것이 아닙니다. 함수를 정의하는 것은 간단히 함수의 이름을 지어주고, 함수가 호출될 때 무엇을 할지 지정 해주는 것입니다. 사실 함수를 호출하는 것은 나타나있는 매개변수를 가지고 지정된 행위를 수행하는 것입니다.

예를 들어, 함수 square를 정의한다면, 함수를 다음과 같이 호출할 수 있습니다.

square(5);

위의 문장은 5라는 인수를 가지고 함수를 호출합니다. 함수는 이 함수의 실행문을 실행하고 값 25를 반환합니다.

function square(n) { 
	return n*n 
}

console.log(square(5)); /// 25

다시 말해, 함수 호출이란 함수를 실행시키는 명령을 전달하는 것과 같습니다.

---

매개변수와 전달인자

매개변수는 함수를 정의할 때 선언하고, 함수 코드 블록 안에서 변수처럼 취급됩니다. 앞서 설명한 것처럼 함수를 정의할 때 소괄호(())에 매개변수를 추가할 수 있습니다. 이렇게 추가된 매개변수는 함수 내부에서 마치 변수와 같은 역할을 하게 됩니다.

function greeting (name) {
	console.log('hello ' + name);
}

greeting이라는 이름의 함수가 name이라는 매개변수를 가지고 있습니다. 현재는 아무것도 할당되어 있지 않으므로, 매개변수 name은 undefined로 초기화되어 있습니다.  함수를 호출할 때 소괄호 안에 값을 넣음으로써 매개변수에 값을 할당할 수 있습니다. 이것을 바로 전달인자라고 합니다. 호출할 때 전달한 'kimcoding'이라는 문자열이 함수 내부에서 매개변수 name에 할당된 것을 확인할 수 있습니다. 이처럼 매개변수와 전달인자를 활용하면 함수 외부에서 함수 내부로 값을 전달할 수 있습니다.

function greeting (name) {
	console.log('hello ' + name);
}

greeting('kimcoding'); // 'hello kimcoding'

---

 

return문

외부에서 값을 전달받았듯 함수의 실행결과를 외부로 반환할 수는 없을까요? 여기서 반환한다는 것은 함수 외부에서 함수의 결과값을 사용할 수 있다는 의미입니다. 명령문은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환합니다.

이 함수는 두 수를 입력받아 합을 리턴하는 함수입니다. 여기서 주목해야 할 것은 return이라는 키워드입니다. ‘반환한다’라는 표현도 return을 번역한 표현이라고 보시면 됩니다. 

function counter() {
  for (var count = 1; ; count++) {  // 무한 반복
    console.log(count + "A"); // 5까지
      if (count === 5) {
        return;
      }
      console.log(count + "B");  // 4까지
    }
  console.log(count + "C");  // 절대 나타나지 않음
}

counter();

// 출력:
// 1A
// 1B
// 2A
// 2B
// 3A
// 3B
// 4A
// 4B
// 5A

 

다음 return 명령문 모두 함수 실행을 끊습니다.

return;
return true;
return false;
return x;
return x + y / 3;

 

return 명령문은 자동 세미콜론 삽입(ASI)의 영향을 받습니다. return 키워드와 표현식 사이에는 줄바꿈 문자가 올 수 없습니다.

return
a + b;

위 코드는 ASI로 인해 아래처럼 처리됩니다.

return;
a + b;

문제를 해결하려면 괄호를 사용해 ASI를 방지해야 합니다.

return (
  a + b
);