Front-endJavaScript

자바스크립트에서 변수를 관리하는 방법

⏱ 읽기 소요 시간: 6 분

자바스크립트에서 변수 관리법- 1. 함수 단위

변수를 관리하는 방법에 대해 알아보자.
JavaScript에서 변수를 관리하는 방법은 크게 세 가지로 정리할 수 있다.

  1. 함수 단위로 변수를 관리하기
  2. 실행 시의 변수 검색은 렉시컬 영역을 기준으로 하기
  3. 실행 시의 변수 검색은 변수 스코프 체인을 이용하기
  • 변수를 관리하는 방법을 알아보기에 앞서, 먼저 변수의 종류에는 무엇이 있는지 알아보자.

변수의 종류

변수의 종류로는 크게 전역 변수,지역 변수가 있다.

  • 전역 변수: 어디서나 접근할 수 있는 변수를 말한다.

  • 지역 변수: 선언된 영역에서만 접근 가능한 변수이다.

자바스크립트 스코프(JavaScript Scope)의 개념

  • 자바스크립트에서의 스코프(Scope)는 변수가 유효성을 갖는 영역. 즉, 변수가 유효한 범위를 말한다.

  • 해당 영역을 벗어난 변수는 참조할 수 없다는 특징이 있다.

  • 중요한 것은 자바스크립트는 다른 언어와는 달리 중괄호가 아닌 변수를 함수 단위로 관리한다는 점이다.

1. 함수 단위로 변수를 관리하기

자바스크립트에서는 변수를 함수 단위로 관리한다는 것을 예제를 통해 살펴보자.

예제1

1
2
3
4
5
6
7
8
function mood() {
  if (true) {
    let now = "excited";
  }
  now = "awesome";
  return now;
}
mood(); // awesome

  • 자바스크립트에서는 같은 함수의 내부에 있다면,
    위의 예제처럼 함수 안에 정의된 블록의 종류에 상관없이(if문, for문 등)
    정의한 변수에도 접근할 수 있다.

  • 따라서 now = “awesome”;는 변수 now가 정의된 if문을 벗어났지만,
    같은 함수인 mood 내부에 있으므로 변수 now에 “awesone”이라는 문자열을 대입할 수 있는 것이다.

예제2

1
2
3
4
5
6
7
8
let now = "tired";
function mood() {
  let now = "excited";
  now = "awesome";
  return now;
}
mood(); // now의 값을 바꾸기 위해 시도
console.log(now); // tired
  • 함수 mood를 실행해도 now를 콘솔에 찍어보면, tired가 찍힌다.
  • 위의 코드에서 let now = “tired”;처럼 어떠한 함수에도 포함되어 있는 않은 변수는 전역 변수 스코프에 정의된다.
  • 같은 변수 now라도 함수 mood 바깥에 있는 now는 전역변수이고,
    mood 함수 안에 있는 now는 지역 변수이다.
  • 따라서, 콘솔로 now를 찍을 때는 이미 함수 mood안에 정의되어 있는 now의 유효 범위를 벗어났기 때문에
    전역 변수인 now의 값인 tired가 찍히는 것이다.

참고 링크

Share