자바스크립트(JS) 함수(let, constant), 전역 변수, 지역 변수

이번 글에서는 함수에 대해서 알아보겠습니다.

그렇다면 함수의 정의와 기능부터 알아야 하겠죠? 함수의 정의는 "자주 실행해야 하는 명령어들의 집합"입니다.
세탁기를 한 번 생각해 볼까요? 세탁기에는 기능들이 다양합니다. 세탁, 헹굼, 탈수, 불림 이런 기능들이 아주 많습니다.

하지만 저희가 세탁기를 돌릴 때 세탁 기능만 사용하고 끝이 아니죠?
세제를 넣고 세탁을 한다 -> 물로 빨래를 헹군다 -> 탈수로 빨래의 물기를 제거한다. 여기서 건조 기능까지 있는 세탁기면 마지막에 건조 기능도 추가가 되겠죠? 만약에 세탁이 끝나고 저희가 직접 헹굼 버튼을 눌러 다시 돌리고 또 끝나고 또 다음 기능을 돌리고 하면 번거롭죠? 세탁이 끝난 후 헹굼을 눌러줘야 하는데 잠깐 어디 나가는 상황만 발생해도 빨래는 금방 상할 겁니다. 자 여기서 지금 세탁기들처럼 이 기능들을 한 번만 실행하면 쭉 다 해주는 성능이 있다면 번거로움도 없어지고 안전할 겁니다. 이런 기능들을 수행해 주는 것이 함수입니다.

이 함수들을 직접 정의해보고 실행해 볼까요?

function washingmachine( ) {
    alert("세탁");
    alert("헹굼");
    alert("탈수");
    alert("건조");
}

위 함수는 washingmachine()을 실행하면 세탁, 헹굼, 탈수, 건조 순으로 알림 창을 뜨게 하는 함수입니다.
이러한 함수를 사용하기 위해 불러오는 것을 "함수를 호출한다"라고 합니다.
호출하는 방법은 washingmachine(); 을 입력하면 호출되어 기능을 수행하는 것을 알 수 있습니다.

다음은 let과 constant에 대해서 알아볼 겁니다.

이를 알기 위해선 먼저 전역변수와 지역변수에 대해서 알아야 합니다. 제가 변수와 자료형을 다룬 글에서는 변수에 대해서만 말씀드리고 종류에 대해선 언급을 하지 않았습니다. 변수는 사용하는 범위에 따라 전역 변수와 지역 변수로 나뉩니다.

 

전역 변수 : 스크립트(코드) 소스 전체에서 사용할 수 있는 변수
지역 변수 : { } 블록 안에서만 사용할 수 있는 변수

이를 꼭 기억하셔야 합니다. 전역 변수와 지역 변수의 위치가 달라지거나 잘못 기입을 하면 원하는 결과가 절대 나오지 않아요. 그리고 이름도 항상 다르게 지정해 주셔야 전역 변수와 지역 변수가 헷갈리지 않습니다.

제가 변수를 다뤘던 글에서 변수를 선언하려면 어떤 예약어를 사용한다 했을까요? 정답은 var입니다.
하지만 var에는 문제 점이 2가지 있습니다.
1번째는 var에는 hoisting(호이스팅)이란 개념이 적용됩니다. hoisting이란 끌어올린다는 의미입니다.
눈치가 빠르시거나 다른 언어를 다뤄보신 분이라면 알고 계실 겁니다.

보통 함수는 파일을 따로 두거나 스크립트 가장 마지막에 작성합니다. hoisting은 var로 선언된 변수를 가장 위 쪽으로 끌어올려 해석하게 됩니다. 즉, 가장 아래에 있음에도 불구하고 가장 위 쪽에서 해석을 한다는 것이죠. 그럼 당연히 원하는 결과가 출력될 수 없겠죠?

var a = 15;
add();

function add( ) {
    alert("A는" + a + " B는 " + b);
    var b = 20;
}

결과 화면

위 코드로는 당연히 "A는 15 B는 20"이라는 결과를 생각합니다.

하지만 B가 undefined라고 출력되고 있죠. undefined는 값이 할당되지 않았을 때의 자료형이라고 언급했었습니다.
이와 같이 가장 아래서 선언했음에도 불구하고 hoisting으로 인해 값이 할당되지 않았다는 것입니다.
var 변수는 JS 해석기가 소스 코드를 살펴보면서 이러한 변수가 있다고 기억을 하기 때문에 선언과 같은 효과가 있습니다.
선언만 되었기 때문에 할당은 되지 않은 것이죠.

2번째 문제 점은 var 예약어가 재선언이 가능하다는 것입니다. 재선언이라 하면 중복을 생각해 볼 수 있겠죠?
개인 프로젝트에선 상관없을 수 있지만 팀 프로젝트, 실무에서의 프로젝트로 넘어가면 여러 개발자들이 코드를 사용합니다. 이미 사용한 var변수를 같은 var예약어 + 같은 이름 변수를 사용하게 된다면 값이 덮어 쓰여 원하는 결과가 나오지 않습니다.

이를 위해 let, constant가 추가가 된 것입니다.

• let
  1. { }안에서 사용가능한 지역 변수입니다. 
       - let은 지역 변수기 때문에 전역 변수를 사용하고 싶다면 a = 10; 과 같이 변수와 값을 할당하면 됩니다.
  2. 재할당 가능, 재선언 불가
       - 재선언이 불가능하기 때문에 실수로 같은 이름의 변수가 됐을 걱정이 없습니다.
  3. 호이스팅 없음
       - 호이스팅이 없기 때문에 var과 같이 값이 할당되지 않는 오류가 발생하지 않습니다.
         대신 선언하기 전에 사용하면 오류가 발생하기 때문에 꼭 다른 변수들처럼 가장 앞에서 선언을 해주시면 됩니다.
• const
  1. 상수 변수
       - 변하지 않는 값입니다.
         자주 사용하는 값이 있다면 const로 지정하여 사용한다면 더 안전하고 편리하겠죠?
  2. { }안에서 사용가능한 지역 변수입니다. 
  3. 재할당, 재선언 불가

추가적으로 매개변수(인수)와 return을 말씀드리고 이번 글을 마치겠습니다.

• 매개변수
  매개변수는 함수가 실행하기 위해 필요하다고 지정하는 값입니다.
  인수는 매개변수로 넘겨주는 값입니다.

add(15, 20);

function add(a,b) {
    alert("A는" + a + " B는 " + b);
}

        위 코드에서 매개변수는 a b 이렇게 2가지이며 인수는 15 20 이렇게 2가지 입니다.
        a 매개변수에 해당하는 인수는 15, b 매개변수에 해당하는 인수는 20 이렇게 되는 것이죠.

        직접 실행하면 A는 15 B는 20이 출력됩니다. 

• return
  return은 값을 넘겨주는 역할을 수행합니다.
  아래 코드를 설명해드릴게요.
  - 1,2 번째 줄 : 정수 값을 입력받아 변수 a, b에 저장
  - 3 번째 줄 : add 함수에 a, b의 값을 넘겨주고 실행 결과를 result에 저장
  - 4 번째 줄 : 알림창에 result(a + b)의 값을 출력
  - add 함수 : 받은 인수를 사용하여 sum에 a+b를 저장
                      알림창에 a와 b의 값을 출력
                      return으로 sum의 값을 add 함수의 결과로 반환
                         ( return을 사용하지 않을 시 result에 값이 할당되지 않아 sum의 값이 출력 되지 않음)

var a = parseInt(prompt("a 값을 입력"));
var b = parseInt(prompt("b 값을 입력"));
var result = add(a, b);
alert("a + b 는 " + result);

function add(a,b) {
    let sum = a + b;
    alert("A는" + a + " B는 " + b);
    return sum;
}