[Javascript] 변수(Variable)와 상수(Constant)

유동균·2022년 12월 3일

목록 보기

1/13

1. 변수(Variable)

값(Value)을 저장(할당)하고 그 저장된 값을 참조하기 위해 사용한다.
값이 저장된 메모리 공간의 주소를 가리키는 식별자
선언하기 위해서는 let 과 var 키워드(Keyword)를 사용한다.
변수 let과 var 는 상수 const 와 달리 값 재할당이 가능하다.
값을 할당하기 위해서는 = 할당 연산자를 사용한다.

let number; // let keyword에 number라는 이름을 가진 변수 선언
number = 1; // number라는 변수에 정수 1이라는 값을 할당

위의 코드를 아래와 같이 한 줄로 작성할 수 있다.

let number = 1;

변수 선언의 여러 방법

let name = 'kane' , age = 29 ;

위의 방법처럼 코드를 한 줄로 작성할 수 있지만, 가독성을 위해 아래와 같이 작성한다.

let name = 'kane';
let age = 29

let 키워드를 생략하는 방법

let name = 'kane' , 
	age = 29;

변수 선언시 주의점

변수의 값을 변경할 수 있지만,

let number = 1; // number 변수에 정수 값 1 할당
number = 2; 	// 변수의 값을 정수 2로 재할당
number = "숫자"; // 변수의 값을 문자열로 재할당

변수를 재선언할 수 없다.

let number = 1;
let number = 100; // error

변수명 규칙
- 변수명은 숫자, 문자, $, _ 만 사용할 수 있다.
- 변수명은 숫자로 시작할 수 없다.
- 변수명은 대문자와 소문자를 구분한다.
- 변수명에는 키워드를 사용할 수 없다.
  키워드란?
  - javascript에서 특정한 목적을 위해 사용하는 단어
  - 키워드 종류 : MDN - keyword

let name;
let userName;
let name1;
let $ = 4;
let _ = 'under';
let 1name;		// 변수명은 숫자로 시작할 수 없다.
let my-name;	// 변수명에 '-' 하이픈은 작성할 수 없다.
let apple;
let APPLE; 		// apple 과 APPLE 은 다른 변수이다.
let const;		// const와 같은 키워드는 변수명으로 작성할 수 없다.

바람직한 변수명 짓기
- 변수명은 간결하고, 명확해야 한다. 예를 들어 줄임말이나, a,b와 같이 짧은 이름을 피하고,
- 변수가 담고있는 값이 무엇인지 정확히 설명해야 한다.

2. 상수(Constant)

변수 let과 var은 재할당 가능하지만, 상수 const는 재할당이 불가능하다.
즉, 변하지 않는 값을 선언할 때 사용한다.

const age = 29;
age = 30;	// error
const name;	// error const는 반드시 선언과 동시에 할당이 이뤄져야한다.

하지만 const의 타입(Type)이 객체(Object)일 경우 객체의 프로퍼티(Property)의 값은 보호되지 않는다.

const kane = {
	age: 29,
    sex: 'male',
};
kane.age = 30; // kane 변수의 age 프로퍼티의 값인 29가 30으로 재할당
kane = {}; 
kane = [];
kane = 1; 과 같은 타입의 변경은 불가능

3."var"를 사용하지 않는 이유

"var" 변수의 특징

함수 레벨 스코프
- 함수의 코드 블록만을 스코프로 인정한다.
  전역 함수 외부에서 생성한 변수는 모두 전역 변수이다.
  이는 전역 변수를 남발할 가능성을 높인다.
- for 문의 변수 선언문에서 선언한 변수를 for 문의 코드 블록 외부에서 참조할 수 있다.
- 스코프 (Scope) - 자바스크립트에서 스코프를 구분해보면 다음과 같이 2가지로 나눌 수 있다.
  - 전역 스코프 (Global scope)
    - 코드 어디에서든지 참조할 수 있다.
  - 지역 스코프 (Local scope or Function-level scope)
    - 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.
- 함수 레벨 스코프, 블록 레벨 스코프
  - 함수 레벨 스코프(Function-level scope)
    함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.
    즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역변수다.
  - 블록 레벨 스코프(Block-level scope)
    모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등)내에서
    선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.
    즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.
- 모든 변수는 스코프를 갖는다. 변수의 관점에서 스코프를 구분하면 다음과 같이 2가지로 나눌 수 있다.
  - 전역 변수 (Global variable)
    전역에서 선언된 변수이며 어디에든 참조할 수 있다.
  - 지역 변수 (Local variable)
    지역(함수) 내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.
  - 변수는 선언 위치(전역 또는 지역)에 의해 스코프를 가지게 된다.
    즉, 전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고,
    지역(자바스크립트의 경우 함수 내부)에서 선언된 변수는 지역 스코프를 갖는 지역 변수가 된다.
  - 전역 스코프를 갖는 전역 변수는 전역(코드 어디서든지)에서 참조할 수 있다.
    지역(함수 내부)에서 선언된 지역 변수는 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

지역 변수가 되지 않는 'var'
var name = 'kane';	// 전역 변수
{
var name1 = 'son';	// 전역 변수
}
------------------------------
지역 변수가 되는 'let'
let name = 'kane';	// 전역 변수
{
let name1 = 'son';	// 지역 변수
}

var 키워드 생략 허용
- 암묵적 전역 변수를 양산할 가능성이 크다.
변수의 중복 선언 허용
- 의도하지 않은 변수값의 변경이 일어날 가능성이 크다.

/// 재선언이 가능한 'var'
var name = 'kane';
var name = 'son';
------------------
/// 재선언이 불가능한 'let'
let name = 'kane';
let name = 'son';	// error

변수 호이스팅(Hoisting)
- 변수를 선언하기 이전에 참조할 수 있다.
- var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.
  즉, 스코프에 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화(초기화 단계)한다.
  따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는다.
- 반면, let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.
  즉, 스코프에 변수를 등록(선언단계)하지만 초기화 단계는 변수 선언문에 도달했을 때 이루어진다. 초기화 이전에 변수에 접근하려고 하면 참조 에러(ReferenceError)가 발생한다. 이는 변수가 아직 초기화되지 않았기 때문이다.
- 호이스팅이란?
  var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.
- 변수의 생성 단계
  - 선언 단계(Declaration phase)
    변수를 실행 컨텍스트의 변수 객체(Variable Object)에 등록한다.
    이 변수 객체는 스코프가 참조하는 대상이 된다.
  - 초기화 단계(Initialization phase)
    변수 객체(Variable Object)에 등록된 변수를 위한 공간을 메모리에 확보한다.
    이 단계에서 변수는 undefined로 초기화된다.
  - 할당 단계(Assignment phase)
    'undefined'로 초기화된 변수에 실제 값을 할당한다.

console.log(name);	// 'kane'
var name = 'kane';
------------------
console.log(name);	// error
let name = 'kane';

참고 문헌

PoiemaWeb: 웹 프로그래밍 튜토리얼 https://poiemaweb.com
모던 JavaScript 튜토리얼 https://ko.javascript.info
벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us
MDN https://developer.mozilla.org/ko/

유동균

다음 포스트

[Javascript] 변수(Variable)와 상수(Constant)

JavaScript

1. 변수(Variable)

변수 선언의 여러 방법

변수 선언시 주의점

2. 상수(Constant)

3."var"를 사용하지 않는 이유

"var" 변수의 특징

참고 문헌

[Javascript] 데이터 타입(Data Type)

0개의 댓글