함수

스크립트를 작성하다 보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많다. 사용자가 로그인이나 로그아웃을 했을 때 안내 메시지를 보여주는 동작 같은 경우다.

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

함수 선언

function 함수이름(복수의, 매개변수는, 콤마로, 구분합니다) {
  /* 함수 본문 */
}

함수 선언(function declaration) 방식을 이용하면 함수를 만들 수 있다. 함수 선언 방식은 아래와 같이 작성할 수 있다.

function singSong() {
    console.log(“Twinkle, twinkle, little star,”)
}

function 키워드, 함수 이름, 괄호로 둘러싼 매개변수를 차례로 써주면 함수를 선언할 수 있다. 위 함수에는 매개변수가 없는데, 만약 매개변수가 여러 개 있다면 각 매개변수를 콤마로 구분해준다. 이어서 함수를 구성하는 코드의 모임인 '함수 본문(body)'을 중괄호로 감싼다.

function name(parameters) {
  ...함수 본문...
}

예시

function calculate(num) {
    console.log(num * num);
}

새롭게 정의한 함수는 함수 이름 옆에 괄호를 붙여 호출할 수 있다.

예시

function showMessage() {
  alert( '안녕하세요!' );
}

showMessage();
showMessage();

showMessage()로 함수를 호출하면 함수 본문이 실행된다. 위 예시에선 showMessage를 두 번 호출했으므로 얼럿 창이 두 번 뜰 것이다. 이렇게 함수의 주요 용도 중 하나는 중복 코드 피하기다.

return vs console.log

리턴은 실제 계산된 값을 리턴해준다. 콘솔은 프린트해주는 것 뿐이다.

예시

function square(x) {
    return x * x;
}

위 코드에서 return을 활용하여 various에 값을 저장할 수도 있다.

지역 변수

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

예시

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

  alert( message );
}

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

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

외부 변수

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

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처럼, 함수 외부에 선언된 변수는 전역 변수(global variable) 라고 부른다. 전역 변수는 같은 이름을 가진 지역 변수에 의해 가려지지만 않는다면 모든 함수에서 접근할 수 있다. 변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록 사용하지 않는 것이 좋다.

기본값

매개변수에 값을 전달하지 않으면 그 값은 undefined로 출력된다. 값을 전달하지 않아도 기본 값을 설정하고 싶다면 매개변수 옆에 =를 붙이고 기본값을 쓰면 된다.

예시

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의 값이 됨
}

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

이렇게 하면 의도한 대로 표현식을 반환할 수 있다.

Practice

맨 앞글자만 대문자로 바꾸기

// function declaration
function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

// function expression
var capitalize = function(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

• str.slice(start [, end])
  문자열의 start부터 end까지(end는 미포함)를 반환한다.

짝수 찾기

function isEven(num) {
    var result = num % 2;
    if (result == 0) {
        return true;
    }
    else {
        return false;
    }
}

function isEven(num) {
    return num % 2 === 0;
}
// 위 처럼 작성하여도 Boolean으로 작용

factorial

function factorial(num) {
    if(num === 1) {
        return 1
    }
    else {
        return num * factorial(num-1)
    }
}

function factorial(num) {
    var result = 1;
    for(var i = 2; i <= num; i++){
        result *= i;
    }
    return result
}
// same result.

Kebab to Snake

function KebabToSnake(string) {
	var newStr = string = string.replace('-','_')
	return newStr
}

참고자료 : https://ko.javascript.info/function-basics