[JavaScript] 함수, let, const

 

▶ 함수

함수는 크게 '함수 선언'을 하고, '함수 호출'을 해서 대상 함수를 가져와 사용한다. 단, 웹 브라우저에서 JS 소스를 해석할 때 함수의 선언 부분을 가장 먼저 해석하기 때문에, '함수 호출'을 먼저하든 '함수 선언'을 먼저하든 크게 상관이 없다.

// 함수 선언
fuction addNumber() {
.....
}
// 함수 
addNumber();
 
// 함수 사용 예
var num1 = parseInt(prompt("첫 번째 숫자:"));
var num2 = parseInt(prompt("두 번째 숫자:"));
var result = addNumber(num1, num2);
alert("두 수를 더한 값은 "+ result + "입니다.");
 
function addNumber(a,b) {
    var sum = a + b;
    return sum;
}
 
// 익명 함수(함수이름 없이 함수실행 - function 함수이름()없이)
var add = function(a,b) {
    return a + b;
}
var sum = add(10,20); // sum = 30 
 
// 즉시 실행 함수
var result = (function() {
    return 10 + 20;
}());
console.log(result); //값 확인
30
 
// 화살표 함수(ES6 이후)
const hi = () => {return "안녕하세요?"};
const hi = () => "안녕하세요?" ;
let hi = user => document.write(user + "님, 안녕하세요?");
let sum = (a,b) => {return a + b}
let sum = (a,b) => a + b;

 

 

▶ let, constant 의 등장 배경

이미 앞에서 본 것과 같이 var이라는 예약어로 변수를 이미 선언할 수 있는데, 왜 let과 constant가 나왔을까? 자바스크립트에서는 변수를 선언하고 사용할 때 변수가 적용되는 범위가 있다. 이를 스코프(Scope)라고 한다. 한 함수 안에서만 사용하고(=지역 변수, 로컬 변수) 다른 함수에서는 사용할 수 없는 변수가 있는가 하면, 스크립트 소스 전체에서 어느 함수에서나 다 사용할 수 있는 변수(=전역 변수, 글로벌 변수)가 있다. 

함수 내에서 var예약어를 통해 변수를 선언하면, 해당 함수 내에서만 사용할 수 있는 지역 변수가 된다. 따라서 지역 변수는 전역 변수에 영향을 주지 않으나, 헷갈릴 수 있으니 변수 이름은 겹치지 않게 하는 것이 좋다. 만약 함수 내에서 전역 변수를 선언하고 싶다면, var 예약어를 붙이지 않고 변수를 설정하면 된다. 

var myVar = 100; //전역변수 선언
test();
document.write("myVar is " + myVar);
 
function test() {
    myVar = 50; //전역변수 선언
    var myVar = 50; //지역변수 선언
}

※ 호이스팅(Hoisting) : 자바스크립트에서 해석을 할 때, var 변수를 따로 기억해두기 때문에 변수를 실행하기 전인데도 선언한 것과 같은 효과가 있는 것. 또한, var은 재선언이 가능하므로, var로 선언을 할 때는 유의해서 해야한다.

이러한 이유로 var을 빼뜨려서 의도치않게 전역 변수가 되기도 하고, 실수로 재선언을 해서 값을 재할당하는 경우가 발생하므로, let과 const가 추가되었다. var은 함수 영역(레벨)의 스코프를 가지지만, let와 const는 블록 영역의 스코프를 가진다. 

 

▶ let

let예약어를 이용해서 선언을 하게 되면, 해당 변수는 해당 함수의 블록({})안에서만 사용할 수 있다. 예시로 for문의 카운터 변수 i도 let 예약어를 사용하면, i는for문을 벗어나면 사용할 수 없게 할 수 있다.

function calcSum(n) {
    let sum = 0; // 블록 변수 선언
    for(let i = 1; i < n + 1; i++){
        sum += i;
    }
    console.log(sum); // 블록 변수 선언
}
 
calcSum(10);

 

만약 전역 변수를 선언하고 싶다면 let 예약어를 쓰지 않고 변수 이름과 초깃값만 할당하면 된다.  let 예약어의 특징으로는 재할당은 가능하지만 재선언은 할 수 없는 변수라는 특징이 있다. 만약 let으로 선언한 다음, 같은 변수값으로 한번 더 선언하게 된다면 해당 변수가 중복으로 선언되었다는 오류 메세지가 뜨게 된다. 또한, 호이스팅이 없는 변수라서 선언 전에 사용하게 되면, undefined가 아닌 오류 메시지로 "Cannot access @ before initializa-tion at test"와 같은 오류를 띄우게 된다. var같은 경우, 호이스팅이 있기 때문에 선언 전에 사용하더라도 undefined값으로 수행하며, 중복으로 선언되어도 값이 덮어씌워 진다.

 

▶ Const

Const(Constant : 상수)도 let과 마찬가지로 변수를 선언하는데 사용되는 예약어이지만, 재선언과 재할당 둘다 불가능하다는 특징을 가지고 있으며, let과 같이 블록 레벨의 스코프를 가진다.

 

▶ 변수 할당 시 유의사항

[1] 전역 변수는 최소한으로 사용할 것.

[2] var 변수는 함수의 시작 부분에서 선언할 것.

[3] for문에서 카운터 변수를 사용할 때는 블록 변수를 사용하는 것이 좋다.

[4] ES6를 사용한다면 var보단 let을 사용하는 것이 좋다.