함수의 변수

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.
또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.

함수 알아보기

함수란 동작해야 할 목적대로 묶은 명령이라 말하며, 프로그래밍에서 중요한 역할을 수행한다.
alert()와 같이 자바스크립트에서 미리 만들어둔 함수를 사용할 수 있고 직접 선언과 호출을 통해 사용할 수 있다.

한번 묶인 명령 즉 함수를 선언하면 다양한 곳에 여러번 사용하기 좋다는 장점이 있다.

함수 선언과 호출

함수를 사용하기 위해서는 먼저 어떤 명령을 실행할 지 선언을 해야한다. 그리고 사용할 곳에 호출하여 기존에 선언한 함수를 실행하게 된다.

함수 선언

예약어 function을 사용하며, 중괄호 안에 여러 명령을 넣는다.

기본형

function 함수명() {
    실행할 명령
}

 

함수 호출

정의해 놓은 함수를 호출하여 실행해야 한다.

기본형
js 함수명() 또는 함수명(변수)

---

*자바스크립트 소스를 해석할 때 함수 선언 부분을 가장 먼저한다.* 따라서 선언만 해 놓으면 어느 위치든 함수를 실행할 수 있다. 그래서 보통 함수 선언은 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 부분을 모아 놓고 함수를 호출해 사용한다.

 

변수의 특징

ES6 버전 이후 변수를 선언하기 위한 예약어는 var, let, const가 있다.

 

var 예약어 특징

변수의 적용 범위 스코프

스코프란 변수를 선언하고 적용되는 범위를 말한다.

한 함수 안에서만 사용할 수 있는 변수를 지역 변수, 로컬 변수, 스크립트 전체에서 사용할 수 있는 변수를 전역 변수 또는 글로벌 변수라고 한다.

지역 변수

var예약어를 사용하여 변수를 선언해야 한다.

function addNum() {
var sum = 4 + 5;
}
addNum() ; 
console.log(sum) ;

이 소스에서 addNum() 함수 실행에서는 9라는 값이 나오지만, console.log(sum) 값은 정의되지 않았다는 오류가 나온다. 이 이유는 함수 안에 선언한 sum변수가 함수 밖에서는 인정받지 못하기 때문이다.

전역 변수

함수 밖에 변수를 선언하거나 var예약어를 사용하지 않으면 전역 변수가 된다.

function addNum() {
sum = 4 + 5;
}
addNum() ; 
console.log(sum) ;

이 소스에서는 var예약어를 사용하지 않았기 때문에 콘솔창에도 9라는 값이 나온다.
var 예약어를 실수로 빠트릴 경우 전역 변수로 바뀌기 때문에 주의하여 사용해야 한다.

 

호이스팅

자바스크립트 해석기는 함수 소스를 보면서 var를 사용한 변수를 따로 기억한다. 즉 선언을 미리 끌어 올린다는 의미가 호이스팅이다.(변수 선언과 할당을 분리하여 끌어 올린다)

// 실제 코드
function displayNumber() {
console.log("x : " + x);
var x = 10;
}
displayNumber();

이 소스의 결과를 보면 x는 defined 값이 나온다. 그 이유는 해석기가 인식하는 코드가 달라서 그렇다.

// 해석기가 인식하는 코드
function displayNumber() {
var x;
console.log("x : " + x);
x = 10;

할당된 값은 그대로 두고 변수 선언 부분만 호이스팅하여 선언했다고 생각하기 때문에 아직 할당되지 않은 defined값이 나오게 되는 것이다.

var예약어를 사용하는 변수를 선언하기 전에 사용하면 이렇게 오류가 발생할 수 있다.

 

변수의 재선언과 재할당

var를 사용한 변수는 재선언과 재할당을 할 수 있다.
한번 선언한 변수의 값을 다시 선언하거나 할당할 경우 기존에 저장된 값을 지우고 새로 저장하게 된다.

function addNum(num1, num2) {
return num1 + num2 ; 
}
var sum = addNum(5,10);
console.log(sum); //값은 15로 나온다.
sum = 50 ; 
console.log(sum); //값은 50으로 나온다.

이렇듯 sum 변수를 재할당할 경우 기존 값을 초기화하고 새로운 값이 저장되게 된다.
따라서 오류는 생기지 않지만 원치 않는 결과가 나올 수 있으니 주의해야 한다.

let와 const

var예약자는 함수 영역에 스코프와 재할당과 재선언이 가능했다. 그래서 실수할 경우 프로그램이 원치 않게 될 수가 있었다.
그 점을 보완하기 위해 let , const 예약자가 나왔다.

 

let을 사용한 변수

블록 영역의 스코프

let예약어는 블록 영역의 스코프를 가짐으로 블록(중괄호로 묶은 부분)에서만 유효하다.

재선언이 불가능한 변수

변수값을 재할당은 할 수 있지만 재선언 불가능하다.
따라서 var예약어처럼 변수 이름이 같아 의도하지 않은 결과가 나오는 것을 막을 수 있다.

호이스팅이 없다

변수 선언을 뒤에 할 경우 var예약어는 호이스팅으로 defined값이 입력되었다.
반면 let예약어를 사용할 경우 초기화를 해야한다는 오류 메세지가 나오게 된다.

 

const를 사용한 변수

블록 영역의 스코프

let예약어와 동일하게 블록 영역을 갖는다.

재선언, 재할당이 불가능한 변수

const으로 선언한 변수는 상수 변수라고 말한다. 즉 값이 변하지 않는다는 뜻이다.
대개 변하지 않는 값을 변수로 선언할 때 사용한다.

 

자바스크립트 변수 가이드

자바스크립트 언어는 유연성이 많아 여러모로 편리하지만, 규모가 커질수록 디버깅하기 어려워진다.
그래서 어느정도 규칙있게 변수를 사용하면 좋다.

전역 변수는 최소한

전역 변수는 어디에든 사용할 수 있어 편리하지만, 뜻밖에 오류를 발생할 수 있어 적게 사용하는 것이 좋다.

var 변수는 함수 시작 부분에 선언

var예약어는 호이스팅이 생기기 때문에 함수 시작부분에 선언하는 것이 좋다.

for문에 카운터 변수에 var 예약어 사용하지 않기

var예약어는 함수 레벨 스코프를 가지기 때문에 for문 밖에 선언하거나, let예약어를 사용하여 선언하는 것이 좋다.

var 보단 let을 이용하자

var예약어를 사용하게 되면 변수 이름이 같아도 값이 변하지 오류가 나지 않는다. 그래서 여러 사람이 작성한 코드를 합치다 보면 중복되는 경우도 존재한다.
let예약어를 사용할 경우 중복되면 오류가 나기 때문에 디버깅하기 수월하다.