자바스크립트의 변수, 변수의 종류, 리터럴

변수

JavaScript에서 변수는 데이터를 저장하는데 사용되는 이름이 붙은 저장소를 의미한다.

• 값이 저장되어 있는 실제 메모리 주소값을 저장하고 있는 것을 의미하며
  데이터는 숫자, 문자열, 객체, 배열 모두 데이터가 될 수 있다.
• 여기서 말하는 메모리란 방대한 양의 데이터와 명령 및 프로그램 코드를 저장하는 디지털 저장소를 의미한다.

• 식별자는 어떤 데이터를 식별하는데 사용하는 이름 즉 변수명이 된다.
• 값이 변하는 데이터를 저장하고 관리하기 위한 공간을 변수라고 의미한다.

• 위 사진처럼 변수를 상자로 비유할 수 있으며 a, b, c는 변수의 이름(=변수명)을 나타내고 상자 내 저장되는 값들인 "kong", 123, true는 데이터를 의미한다. 실제 변수는 "kong"의 메모리 주소값, 123의 메모리 주소값, true의 메모리 주소값을 가지고 있다.

// 예제코드
// var는 키워드, num은 식별자, =는 연산자, 10 + 20은 표현식, ;은 세미콜론이다
var num = 10 + 20;

---

자바스크립트 변수의 종류

자바스크립트의 변수의 종류는 var, let, const가 있다.

var
- 가장 오래된 방식 중 하나이며, 현재에는 몇가지 특징으로 인해 주로 사용하고 있는 방식은 아니다.
- var로 선언된 변수의 사용 범위는 함수 스코프를 가지게 되는데 이는 해당 변수가 선언된 함수 내에서만 유효함으로 접근할 수 없음을 의미한다.
- 유지보수성, 중복선언과 메모리 효율에 문제점이 있다.

// var 변수의 예시
if(true){
	var x = 10;
}
console.log(x); //10

var의 세 가지 특징

• 선언을 중복해서 할 수 있다

var code = 10;
var code = 20;
console.log('code: ${code}'); // 'code: 20'

• scope의 범위가 전역/함수로 제한된다

var code = 20;
if(true){
	var code = 0;
  	var codeName = 'Hello JS!';
}
console.log('code:${code}'); //code:0
console.log('codeName:${codeName}'); //'codeName:Hello JS!'

• Hoisting이 가능하다

console.log('선언 전 : ${code}'); //선언 전 : undefined
var code = 10;
console.log('선언 후: ${code}' ); //선언 후 : 10

let
- 재선언이 불가능하지만 재할당은 가능하다.
- let은 프로그래밍에서 변수의 값이 변화할 수 있을 때 사용한다.

const
- 선언과 동시에 할당해주어야한다.
- 재선언과 재할당이 불가능하다.
- 객체나 배열같은 경우 객체의 속성이나 배열의 요소를 변경할 수 있다.
- 초기화하지 않으면 문법 에러가 발생한다.

• let과 const는 앞서 말한 var의 문제점을 해결하기 위해 ES6(ES2015)에서 새롭게 변수를 선언하는 방식이며 블록 스코프 영역을 활용하고 재선언이 금지된다.

그럼 우리는 왜 변수를 사용하는 것인가??🧐

• 메모리에 저장된 값의 위치를 안전하게 접근하게 도와준다!
• 코드의 재사용성을 높이고 유지보수를 용이하게 해준다!
  => 숫자 10이 100번 쓰였다고 가정하면 이 숫자 10을 모두 5로 바꾸고 싶다면 숫자 10을 100개 찾아서 5로 100번 바꿔줘야 한다.
  하지만 변수를 사용하게 되면 이러한 데이터를 변경하고 코드에 적용시키는 것이 훨씬 쉬워지고 효율적을 바뀌게 된다.

---

스코프(Scope)

• 함수 실행시, 함수 내 변수에 대한 접근이 어떻게 되는지를 나타내는 용어이다.
  (함수의 실행 컨텍스트 내에서의 변수 환경이 무엇인지) 스코프는 함수를 기반으로 한 용어를 의미한다.
• 스코프 체인(Scope Chain)이란 '식별자의 유효범위'를 안에서부터 바깥으로 순차적으로 검색해나가는 것을 의미한다.

함수스코프

• 자바스크립트는 기본적으로 함수스코프를 따르는 언어이다.
• "함수 스코프를 따른다"라는 의미는 새로운 함수가 생성될 때마다 새로운 스코프가 발생한다는 의미이다. 함수 몸체에 선언한 변수는 해당 함수안에서만 접근할 수 있다.
• 함수 스코프는 함수 내부는 지역 스코프(Local Scope), 함수 외부는 전역 스코프(Global Scope)라고 구분한다.

// 전역 스코프 예제
let a = 100;
function sum(){
	console.log("함수 내부 : ${a}"); // 함수 내부
}
sum();
console.log("함수 외부 : ${a}") // 함수 외부

// * 출력결과 *
// 함수 내부 : 10
// 함수 외부 : 10

// 지역 스코프 예제
function sum(){
 	let a = 10;
 	console.log('함수 내부 : ${a}');
}
sum();
console.log('함수 외부 : ${a}');

// * 출력결과 *
// 함수 내부 : 10
// ReferenceError : a is not defined

블록스코프

• 블록스코프는 블록 {}이 생성될 때마다 새로운 스코프가 형성되는 것을 의미한다.
• 블록{} 내부에서 선언된 변수는 해당 블록에서만 접근 가능한 것을 의미한다.
• let과 const 키워드의 등장으로 블록 스코프를 형성하는 것이 가능해졌다.

// 블록 스코프 예제
let a = 10;
{
 	let b = 30;
 	console.log('코드 블록 내부 a : ${a}');
  	console.log('코드 블록 내부 b : ${b}');
}
console.log('코드 블록  외부 a : ${a}');
console.log('코드 블록  외부 b : ${b}');

// * 출력결과 *
// 코드 블록 내부 a : 10
// 코드 블록 내부 b : 30
// 코드 블록 내부 c : 10
// ReferenceError : b is not defined

---

변수 선언과 할당

• 선언이란 사용할 변수의 이름을 작성해 사용할 변수를 작성하는 것을 의미하며 선언만 사용하게 될 경우 초기 값이 undefined로 설정된다. 한번 값이 설정되면 수정이 불가능한 const는 선언만 단독으로 사용이 불가능하다. (=선언과 동시에 할당을 해주는 초기화 과정을 거쳐야 한다.)

// 변수의 선언 방법
// 변수 a, b, c는 undefined가 저장된다.
let a;
var b;
const c;

• 할당이란 선언된 변수에 값을 저장하는 것을 의미한다.
  - undefined는 데이터를 할당하지 않을 경우 자바스크립트가 내부적으로 변수와 상수 공간에 임시로 데이터를 할당되는 값을 의미한다.
  - null은 변수나 상수를 선언하고 의도적으로 선언한 공간을 비워둘 때 할당하는 값을 의미한다.

// 변수의 할당 방법
// 변수 a, b, c는 undefined가 저장된다.
let a; 
var b;
const c;

a = 1;
b = 2;
c = 3;

// 변수의 선언과 동시에 초기화 방법
let a = 1;
var b = 2;
const c = 3;

• var변수만이 재선언이 가능하다.

// var변수의 재선언이 가능하다.

var greeter = "hey hi";
var greeter = "hello";

var greeter = "hey hi";
greeter = "hello";


// let변수의 재선언이 불가능하다. 재할당은 가능하다.
// 재할당 가능
let greeter = "hey hi";
greeter = "hello";

// 재선언 불가능
let greeter = "hey hi";
let greeter = "hello";
//error 발생 : error: Identifier 'greeter' has already been declared


// const변수의 재선언과 재할당이 불가능하다.
// 재할당 불가능
const greeter = "hey hi";
greeter = "hello";
// error 발생 : error: Assignment to constant variable. 

// 재선언 불가능
const greeter = "hey hi";
const greeter = "hello";
// error: Identifier 'greeting' has already been declared

---

리터럴(Literal)

• 리터럴이란 데이터(값) 그 자체를 의미한다. 즉 변수에 넣는 변하지 않는 데이터를 의미한다.
• 상수와 리터럴의 차이점은 상수는 변하지 않는 '변수', 즉 메모리 위치(공간)를 의미하며,
  리터럴은 변하지 않는 '값' 또는 '데이터'. 즉 메모리 위치(공간)에 저장되는 값을 의미한다.
• 리터럴을 사용한다는 것은 변수를 선언하면서 동시에 값을 지정해주는 방식을 의미한다.
• 리터럴을 사용해서 객체를 생성한다는 것은 객체를 선언과 동시에 값을 지정해준다는 의미이다.

//리터럴 예제 코드
const car = {
  name : "소나타",
  color : "yellow",
  price : 30000000,
  info : function(){
  	console.log(this.name + "의 색상은 " + this.color + "이며, 가격은" + this.price+"이다");
  }
};

console.log(car.name);
console.log(car.color);
console.log(car.price);
car.info();

// * 출력 결과 *
소나타
yellow
30000000
소나타의 색상은 yellow이며, 가격은 30000000이다.

// 객체 속성 추가
car.fuel = "가솔린";

console.log(car.name);
console.log(car.color);
console.log(car.price);
console.log(car.fuel);
car.info();

// * 출력 결과 *
소나타
yellow
30000000
가솔린
소나타의 색상은 yellow이며, 가격은 30000000이다.