변수(Variable) 란?
- 데이터를 저장할 수 있는 메모리 공간 = 데이터(값) 보관함
- 변수명 = 보관함의 이름(라벨)
- 잠재적으로 변경 될 수 있는 라벨이 붙은 값
- 이름을 통해 데이터를 사용
📌 보관함의 이름 을 지어준 후 그 안에 값을 보관하는 개념!
X(보관함 이름) =(대입연산자) 10(저장될 값)
대입연산자 : 오른쪽 값을 왼쪽 보관함에 넣어라!
변수의 생성단계
1단계: 선언(Declaration)
변수명 등록하여 존재알리기
스코프가 참조하는 대상이 된다.2단계: 초기화(Initialization)
할당 받을 값을 위한 메모리 공간 확보
이 단계에서 undefined를 할당하여 초기화3단계: 할당(Assignment)
undefined로 초기화된 변수에 실제 값을 할당
let을 사용하여 변수를 선언
- 재할당 가능하나 재선언 X(변수명 중복 불가)
- let 변수명; (선언 + 초기화)
변수명 = 값; (할당) - let 변수명 = 값; (선언 + 초기화 + 할당)
//1번 예시
let num;
num = 10;
console.log(num);
//2번 예시
let data = 20;
console.log(data);✍️Result
콘솔창에 숫자 10, 20이 순서대로 출력된다.
//1.값을 재할당하게 된다면?
let data = 20;
data = 300;
console.log(data);
//2.값을 할당하지 않는다면?
let str;
console.log(str);✍️Result
1.콘솔창에 값을 재할당하게 되면 마지막에 있는 값이 담아지므로 300의 값이 출력된다.
2.값을 할당해주지 않으면 undefined(타입이 정해지지 않음)으로 출력된다.
var를 사용하여 변수를 선언
- 변수 중복 선언 가능
- 전역 변수로 인한 재할당
- 전역 스코프 공유로 예상치 못한 결과 출력
- 이러한 이유 때문에 에러 가능성이 있어 사용 X
- var 변수명;
변수명 = 값; - var 변수명 = 값;
// 1.변수 Value 선언만, 초기값X
var value;
console.log(value); //undifined
// 2.변수 Num를 선언함과 동시에 3을 Num에 할당
var num = 3;
console.log(num); //3
// 3.콤마를 이용하여 여러변수를 한 번에 선언 및 초기화 가능
var redApple = 1,
buleMuffin = 2,
yellowBall = 3;
console.log(redApple,buleMuffin,yellowBall)상수(Constant) 란?
- 프로그램 실행하는 동안 최초 선언된 이후 값 변경 X
- 절대적으로 변경 되지 않는 수 또는 변경할 수 없도록 선언하여 사용
- 재할당, 재선언 모두 불가
const를 사용하여 상수를 선언
📌 상수는 선언과 할당을 동시에 해야한다.
const 상수명 = 값;
//1.OK!
const NUMBER = 10;
console.log(NUMBER);
//2.Error!
const NAME = "인절미";
NAME = "꿀떡";
console.log(NAME);✍️Result
1.콘솔창에 상수값 숫자 10이 출력된다.
2.상수는 재할당이 불가능하므로 인절미와 꿀떡을 동시에 할당하면 에러가 발생한다.
변수 호이스팅(Hoisting)
코드를 실행하기 전 변수,함수 선언을 해당 스코프의 최상단으로 끌어 올려지는 현상 (실제로 최상단으로 올라가는 것은 아니다)
let, const 또한 발생하지 않는 것처럼 보일 뿐 호이스팅이 일어납니다.
다만 var 키워드의 경우 선언과 초기화가 동시에 일어나는 반면
📌 let, const 변수는 선언과 초기화가 단계별로 분리되어 출력하기 때문에 해당 코드가 실행되기 전까지는 초기화가 되지 않아 일시적 사각지대에 빠져 호이스팅이 일어나지 않는 것처럼 보인다.
//Uncaught ReferenceError: Cannot access 'Test' before initialization at 3_변수상수.html:51:14
let test = 1;
{
console.log(test);
let test = 2;
}✍️Result
'초기화 전 'Test'에 액세스할 수 없습니다.' 초기화 에러 발생
// Uncaught SyntaxError: Missing initializer in const declaration
const NAME;
const NAME = 'puppy'✍️Result
'const 선언에 이니셜라이저가 없습니다.' 초기화 에러 발생
--
📌 var 변수의 경우는 선언과 초기화가 동시에 일어나기 때문에 호이스팅 현상을 확인할 수 있다.
//undefined
console.log(test);
var test = 2;✍️Result
호이스팅하여 선언을 먼저 가져와 값을 할당 받을 공간을 만들었기 때문에 'undefined'로 출력된다.
스스로 마음을 다잡기 위해 공부한 내용을 기록합니다.
수정되어야 할 점이나 추가되어야 할 점이 있다면 언제든지 코멘트 부탁드립니다!
