자바스크립트 - 함수

자바스크립트에서 함수는 보통 중복 없이 유사한 동작을 하는 코드를 여러 번 사용하기 위해 사용합니다.

함수 선언

문법 :

function fucName(매개변수1, 매개변수2) {
   alert( 'alert을 실행합니다!' ); 
}

fucName(); //함수 실행하기

1. function키워드, 함수 이름, 괄호로 둘러싼 매개변수, 중괄호로 이루어집니다.

2. 매개변수는 아래에서 설명하도록 하겠습니다.

3. 중괄호 안에는 함수 호출 시 실행 할 코드를 입력합니다.

4. 함수이름()을 통해 함수를 호출합니다.

지역변수

함수 내에서 선언한 변수는 함수 안에서만 접근할 수 있습니다. 해당 변수를 지역변수라고 부릅니다.

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

  alert( message );
}

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

alert( message ); // ReferenceError

외부변수

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

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 ); 

함수 외부에 선언된 변수는 전역 변수(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를 가집니다.

1. 첫번째 showMessage에선 'Ann' 이 함수에서 from 'Hello!' 가 text가 됩니다.

2. 두번째 showMessage에선 '.Ann'이 함수에서 from, "what's up?"이 text가 됩니다.

예시2 : 전역변수가 매개변수와 이름이 같은 경우

function showMessage(from, text) {

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

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

let from = "Ann";

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

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

기본값

함수 호출 시 매개변수에 인수를 전달하지 않으면 그 값은 undefined가 됩니다.

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

showMessage('Ann'); // Ann: undefined

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

기본값 예제

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

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

1. 이젠text가 값을 전달받지 못해도 undefined 대신 기본값 "no text given"이 할당됩니다.

2. 매개변수에 값을 전달해도 그 값이 undefined와 엄격히 일치한다면 기본값이 할당됩니다.

매개변수 기본값을 설정하는 다른 방법들

예제1 : if문

function showMessage(text) {

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

  alert(text);
}

showMessage(); // 빈 문자열

예제2 : OR연산자

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

예제3 : nullish연산자

function showCount(count) {
  alert(count ?? "unknown");
}

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

반환 값 Return

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

예시 1

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

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

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( "영화 상영" ); 
}

참고-자바스크립트 튜토리얼