본문 바로가기
JavaScript

[JavaScript/자바스크립트] 값과 변수

by hans-j 2022. 12. 23.

데이터 타입은 크게 두 가지로 나눌 수 있다.


단일 데이터(원시,primitive)-------값
number 
String
boolean
null
undefined
symbol



복합데이터(객체,object)-----------객체
object
function


단일 데이터복합데이터의 차이점은?

값을 할당(대입/저장) 하는 메모리 저장소가 다름.

값 -> Stack 영역

//값이 복사되면 값 자체가 복사되어 전달됨


객체 -> Heap 영역

// 객체타입은 참조값 (메모리주소, 레퍼런스)가 복사되어 전달됨


왜 전달되는 구조가 다를까?

let tree = {
	name : 'tree',
    color : 'green'
} //객체는 중괄호로 묶여서 값을 저장하고 있다

여기서 객체 이름인 tree는 실제 메모리 셀이가지고 있는 주소를 가리킨다. 

힙영역에 저장될 때는 여러셀에 걸쳐져서 저장되기때문에,

name : tree가 호출된다면 힙영역에 있는 객체가
stack 영역에 있는 tree의 참조값을 가져온다.


변수란? 

하나의 값을 저장하기 위해 확보한 메모리 공간의 이름!!

변수를 만들때는 규칙이 있다.


1. 라틴문자로 구성되어야함

2.대소문자를 구분함

3. 한국어 불가

4.예약어 불가 (ex: await, break, case, catch, do, else, for ...)

5. 특수문자 불가 , 하지만 언더바_, 달러$는 예외

6.이모지 불가


그리고 이외에도 변수를 숫자 1,2,3이런식으로만 구별하는 것은 불가하진 않지만 , 바람직한 형태는 아니다.

 

제3 자가 보았을때 충분히 구별할 수 있을 정도의 의미를 담아내야한다.

let myAge
let userID
let userName
//이런식으로 하는 것이 바람직

** 만약 변수 선언만 하고 값을 할당하지 않는다면, 변수 선언에 의해 확보된 메모리 공간에는

undefined(원시타입)이라는 값이 암묵적으로 할당되어 초기화된다. 


console.log(score);// undefined
let score; // 변수 선언
score = 80; // 값의 할당
console.log(score); // 80

만약undefined가 저장되어있던 변수 값에 새로운 값을 할당한다면
(var, let 키워드를 사용할 경우 값의 재할당이 가능하다.)

기존 메모리 공간을 지우는것이아니라 새로운 메모리 공간을 확보하고 그 곳에 할당 값을 저장한다.

 

(이때 사용되지 않는 값들은 가비지 콜렉터에 의해 메모리에서 자동해제된다.
But, 언제 해제될지는 예측할 수 없다.

 

해당 오브젝트를 아무도 참조하고있지않다면

가비지 컬렉터가 메모리에서 청소해준다.

자스 엔진 백그라운드 프로세스/자체적 시스템 )


이때 사용하는 키워드는 var 혹은 let!! 

var은 ES6이 도입되기전에 변수를 선언할 수 있는 유일한 키워드였다.


위와 같이 새로운 값을 할당하는 수 있는 '변수'가 존재하는 반면

'상수'는  값을 재할당 할 수 없다.  딱 한번만 할당할 수 있는 변수이다!!!!

 

이때 쓰이는 키워드는 const !!


var let const
중복 선언 가능 중복 선언 불가 중복 선언 불가
재할당 가능 재할당 가능 재할당 불가능
선언과 초기화 단계 동시진행하고 할당 진행 선언, 초기화 할당 순으로 분리되어 진행 선언, 초기화 단계 동시발생
범위 function / 함수 스코프 범위 중괄호() / 블록 스코프 범위 중괄호() / 블록스코프

**let 키워드로 선언한 변수는 "선언 단계"와 "초기화 단계"가 분리되어 진행된다.


var은 코드의 가독성과 유지보수성에 좋지않다. 

왜냐?! 키워드 없이 선언과 재할당이 가능하기 때문에

선언인지 재할당인지 구분하기 어렵다.

따라서 var을 사용하는것은 최대한 지양하는 것이 좋다.(변수의 스코프는 최대한 좁게 만드는 것을 권장하기때문)

const로 변수 설정하는 것이 가장 좋으며 재할당이 필요한 경우에만 let으로 사용하는 것이 바람직하다 ex)for반복문


할당된 값의 타입이 궁금하다면 typeof 키워드를 사용하면 된다.

variable = 123; // ⬅ 할당된 값에 따라 타입이 결정됨!
console.log(typeof variable);

출력결과에 따르면 number타입인것을 알 수 있따

variable = {}; 
console.log(typeof variable); //출력결과 : object

variable = function () {};
console.log(typeof variable); //출력결과 : function

variable = Symbol();
console.log(typeof variable); //출력결과 : symbol

console.log(typeof 123); //출력결과 : number
console.log(typeof '123'); //출력결과 : string

**모던 자바스크립트 deep dive (이응모 선생님) 를 읽고 참고하여 작성하는 글입니다 **