[JavaScript] 함수

- 지역 변수

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

  

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

  alert( message );
}

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

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

 

- 외부 변수

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

  

    
    
    
    
  
let userName = 'John';

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

showMessage(); // Hello, John

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

  

    
    
    
    
  
let userName = 'John';

function showMessage() {
  userName = "Bob"; // (1) 외부 변수를 수정함

  let message = 'Hello, ' + userName;
  alert(message);
}

alert( userName ); // 함수 호출 전이므로 John 이 출력됨

showMessage();

alert( userName ); // 함수에 의해 Bob 으로 값이 바뀜

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

함수 내부에 외부 변수와 동일한 이름을 가진 변수가 선언되었다면, 내부 변수는 외부 변수를 가린다.

  

    
    
    
    
  
let userName = 'John';

function showMessage() {
  let userName = "Bob"; // 같은 이름을 가진 지역 변수를 선언합.

  let message = 'Hello, ' + userName; // Bob
  alert(message);
}

// 함수는 내부 변수인 userName만 사용.
showMessage();

alert( userName ); 
// 함수는 외부 변수에 접근하지 않습니다. 따라서 값이 변경되지 않고, John이 출력.

위 코드를 보면 함수 내부에 외부 변수와 동일한 이름을 가진 지역 변수 userName이 선언되어 있다. 외부 변수는 내부 변수에 가려져 값이 수정되지 않는다.

 

* 전역 변수 *

위 예시의 useName처럼, 함수 외부에 선언된 변수는 전역 변수(global variable)라고 한다.

전역 변수는 같은 이름을 가진 지역변수에 의해 가려지지만 않는다면 모든 함수에서 접근할 수 있다.

변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록 사용하지 않은 것이 좋다. 비교적 근래에 작성된 코드들은 대부분 전역 변수를 사용하지 않거나 최소한으로 사용한다. 다만 프로젝트 전반에서 사용되는 데이터는 전역 변수에 저장하는 것이 유용한 경우도 있으니 참고!

 

- 매개변수(parameter)

: 매개변수를 이용하면 임의의 데이터를 함수 안에 전달할 수 있다.

  

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

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)

위 코드에서 함수 showMessage는 매개변수 from과 text를 가진다.

 

전역 변수 from이 있고, 이 변수를 함수에 전달했다. 함수가 from을 변경하지만, 변경 사항은 외부 변수 from에는 반영되지 않는다.

  

    
    
    
    
  
function showMessage(from, text) {

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

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

let from = "Ann";

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

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

 

- 기본값

: 매개변수에 값을 전달하지 않으면 그 값은 undefined가 된다. 위에서 정의한 함수 showMessage(from, text)는 매개변수가 2개지만, 아래와 같이 인수를 하나만 넣어서 호출할 수 있다.

  

    
    
    
    
  
showMessage("Ann");

이렇게 코드를 작성해도 에러는 발생하지 않는다. 두 번째 매개변수에 값을 전달하지 않았기 때문에 text엔 undefined가 할당된다. 따라서 에러 없이 "Ann: undefined"가 출력된다.

매개변수에 값을 전달하지 않아도 그 값이 undifined가 되지 않게 하려면 '기본값(default value)'을 설정해주면 된다.

매개변수 오른쪽에 =를 붙이고 undifined를 대신 설정하고자 하는 기본값을 써준다.

  

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

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

아래와 같이 복잡한 표현식도 기본값으로 설정 할 수 있다.

  

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

위 코드에서 매개변수 text에 값이 없는 경우에만 showMessage를 호출할 때 anotherFunction()이 호출된다.

 

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

: 가끔은 함수 선언부에서 매개변수 기본값을 설정하는 것 대신 함수가 실행되는 도중에 기본값을 설정하는 게 논리에 맞는 경우가 생기기도 한다. 이런 경우에는 일단 매개변수를 undefined와 비교하여 함수 호출 시 매개변수가 생략되었는지 확인한다.

  

    
    
    
    
  
function showMessage(text) {
  if (text === undefined) {
    text = '빈 문자열';
  }

  alert(text);
}

showMessage(); // 빈 문자열

// 논리 연산자 ||도 사용가능
// 매개변수가 생략되었거나 빈 문자열("")이 넘어오면 변수에 '빈 문자열'이 할당됩니다.
function showMessage(text) {
  text = text || '빈 문자열';
  ...
}

// nullish 병합 연산자 ?? 를 사용
// 매개변수 'count'가 넘어오지 않으면 'unknown'을 출력해주는 함수
function showCount(count) {
  alert(count ?? "unknown");
}

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

 

- 반환 값

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

  

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

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

지시자 return은 함수 내 어디서든 사용 가능하다. 실행 흐름이 return을 만나면 함수 실행은 즉시 중단되고 함수를 호출한 곳에 값을 반환한다. 위 예시에선 반환 값을 result에 할당했다. 함수 하나에 여러 개의 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를 반환하면, (*)로 표시한 줄은 실행이 안되기 때문에 함수 showMovie는 alert창을 보여주지 않는다.

 

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

  

    
    
    
    
  
function doNothing() { /* empty */ }

alert( doNothing() === undefined ); // true

// return 지시자만 있는 경우도 undefined를 반환한다. return은 return undefined와 동일하게 동작한다.
function doNothing() {
  return;
}

alert( doNothing() === undefined ); // true

 

* return과 값 사이에 절대 줄을 삽입하지 않는다. *

반환하려는 값이 긴 표현식인 경우, 아래와 같이 지시자 return과 반환하려는 값 사이에 새 줄을 넣어 코드를 작성하고 싶을 수도 있는데

  

    
    
    
    
  
return
 (some + long + expression + or + whatever * f(a) + f(b))

자바스크립트는 return문 끝에 세미콜론을 자동으로 넣기 때문에 이렇게 return을 작성하면 안된다. 위 코드는 아래 코드처럼 작동하게 된다.

  

    
    
    
    
  
return;
 (some + long + expression + or + whatever * f(a) + f(b))

따라서 반환하고자 했던 표현식을 반환하지 못하고 아무것도 반환하지 않는 것처럼 되어버린다.

표현식을 여러 줄에 걸쳐 작성하고 싶다면 표현식이 return지시자가 있는 줄에서 시작하도록 작성해야 한다. 또는 아래와 같이 여는 괄호를 return 지시자와 같은 줄에 써도 된다.

  

    
    
    
    
  
return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
  )

 

- 함수 이름짓기

: 함수 이름은 가능한 한 간결하고 명확해야 한다. 함수 이름을 보고 어떤 동작을 하는지 설명할 수 있어야 하며 코드를 읽는 사람은 함수 이름만 보고도 함수가 어떤 기능을 하는지 힌트를 얻을 수 있어야 한다.  

이름을 지을 때 접두어를 사용하여 함수 이름짓기에 참고한다.

• "show..." - 무언가를 보여줌 
• "get…" – 값을 반환함
• "calc…" – 무언가를 계산함
• "create…" – 무언가를 생성함
• "check…" – 무언가를 확인하고 불린값을 반환함

  

    
    
    
    
  
showMessage(..)     // 메시지를 보여줌
getAge(..)          // 나이를 나타내는 값을 얻고 그 값을 반환함
calcSum(..)         // 합계를 계산하고 그 결과를 반환함
createForm(..)      // form을 생성하고 만들어진 form을 반환함
checkPermission(..) // 승인 여부를 확인하고 true나 false를 반환함