변수(Variable)

변수란?

변수(variable) 이란 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터

다양한 형태의 데이터를 저장할 수 있는 메모리 공간

 

변수의 선언

변수를 구별할 수 있도록 이름을 붙여주는 것

var 라는 예약어 뒤에 변수 이름을 적는다.

var 변수명 

 var myName

 

변수 선언의 규칙 

1. 변수 이름은 문자와 언더스코어(_), 숫자를 사용

    변수명은 반드시 문자로 써야하며, 따옴표("")로 싸지 않는다. 따옴표로 싸게 되면 문자데이터가 됨

    숫자나 기호, 띄어쓰기는 허용하지 않는다.

• 사용 가능 예 : myName, now, now25, now_25
• 사용 불가 예 : 12my, 25now, my name, name 12

2. 자바스크립트는 영어 대소문자를 구별하며 예약어는 변수 이름으로 사용 불가

   myname, Myname, myName -> 모두 다른 변수이름으로 인식함

  ※ 예약어 : function, var, if 등 브라우저 객체에서 사용되고 있는 기능어

 

3. 변수의 명명법

   변수는 띄어쓰기를 못하고 모두 붙여서 한 단어처럼작성한다.

   2음절 이상의 단어를 변수로 만들때 아래처럼 만든다.

            (1) 카멜 케이스(Camel Case):

                첫단어는 소문자,

                뒷단어는 첫글자 대문자

                예) myHouseIsBig

            (2) 파스칼 케이스(Pascal Case):

                모든 단어 첫글자 대문자

                예) YouAreMyLover

            (3) 스네이크 케이스(Snake Case):

                단어사이에 언더바(_)사용

                예) seoul_korea_good

 보통은 카멜케이스를 많이 사용한다.

 

4. 변수 이름은 의미 있게 작성하기

    코딩할 때 변수를 수십 개 사용하므로 각 변수의 역할을 일일히 기억하기 쉽지 않음 

    변수 이름만 보고도 어떤 값인지 추측할 수 있도록 명명하자

 

변수의 할당

선언된 변수에 값(데이터)를 넣는 것

 

변수 선언과 값 할당 따로 하기

var birthYear;
birthYear = 1992;

 혹은

 

변수 선언과 값 할당 같이 하기 

var birthYear = 1992;

 

할당 시 규칙

한 문서안에 같은 이름의 변수를 한 번 이상 쓰지 못한다(쓰게 되면 덮어씌워짐)

 

 

변수 생성의 단계

1단계 : 선언 단계(Declaration phase)

변수를 실행 컨텍스트의 변수 객체에 등록

이 변수 객체는 스코프가 참조하는 대상이 됨

2단계 : 초기화 단계(Initializaion phase)

변수 객체에 등록된 변수를 위한 공간을 메모리에 확보

이 단계에서 변수는  undefined로 초기화됨

3단계 : 할당 단계(Assignment phase)

undefined로 초기화된 변수에 실제 값 할당

 

 

지역변수와 전역변수

지역변수(Local Variable)

함수 영역 내에 선언한 변수

선언한 함수 영역 내에서만 사용 가능

전역변수(Global Variable)

함수 밖의 영역에서 선언한 변수 

또는 함수 안에서 선언하더라도  var 예약어를 사용하지 않으면 전역변수가 됨

스크립트 소스 전체에서 사용 가능

 

var dog = "강아지"; // 전역변수선언
function animal() {
 var cat = "고양이"; // 지역변수선언
 rabbit = "토끼"; // 전역변수선언
 }

 

 

 

---

var, let, const

var

함수영역변수(함수레벨스코프)

1. 함수 영역에서 사용할 때만 지역변수

2. 함수 영역 바깥에서 사용하면 전역변수

3. 전역변수와 같은 이름의 변수를 함수 내에서 값을 할당하면 덮어쓰기 됨(새로운 값으로 업데이트)

4. 함수 영역에서 전역변수와 같은 이름의 변수를 선언하면 다른 지역변수로 관리(같은 이름이지만 지역변수로 사용 가능)

5. 호이스팅 가능

선언 단계와 초기화 단계가 한번에 이뤄짐

 

let

블록영역변수(블록레벨스코프)

1. let으로 변수를 선언하면 전역과 지역을 별도로 관리하여 같은이름의 변수도 별개의 변수로 인식한다.

   중괄호는 모두 블록처리하며, 특정코드블록(if, for, while 등)도 블록처리한다 (var는 function 내에서만 지역변수 처리됨)

2. let변수는 선언 후 아래쪽에서 사용해야함 ->>> 변수 호이스팅이 금지이므로

3. 같은 영역에서 같은 이름의 변수를 중복 선언 불가(재선언불가)

4. 재선언은 불가하지만 재할당은 가능

선언 단계와 초기화 단계가 분리되어 진행

let sum = 0; // let 으로 선언 및 할당
sum = 100; // 재할당

let sum; // let으로 선언
sum = 100; // 재할당

let sum = 0;
let sum = 100; // let은 재선언불가

 

const

블록영역변수(블록레벨스코프)

1. 선언과 동시에 할당해야함

2. 한 번 할당한 값은 변경불가(재할당불가)

3. 배열과 객체, 함수를 상수로 만드는 경우가 많음

4. 기타의 특징은  let 과 동일하다.(재선언불가)

5. 호이스팅이 없음

const currentYear = 2023; // 선언과 동시에 할당

const currentYear = 2023; // 선언과 동시에 할당
const currentYear = 2024; // 재선언 및 재할당 불가능

const currentYear = 2023; // 선언과 동시에 할당
currentYear = 2024; // 재할당 불가능

 

 

변수	재선언	재할당	스코프	생성과정
var	가능	가능	함수 스코프	1. 선언 및 초기화 2. 할당
let	불가능	가능	블록 스코프	1. 선언 2. 초기화 3. 할당
const	불가능	불가능	블록 스코프	1. 선언+초기화+할당

 

※ 호이스팅

인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 형상(출처 : mdn)

자바스크립트에서 변수 및 함수 선언이 코드의 최상단으로 올려지는 현상

호이스팅 시 변수의 선언과 초기화(undefined으로) 같이 시킴

변수와 함수의 선언이 실제 코드의 실행 전에 처리 -> 코드를 이해하고 예측하는데 혼란 야기