[JS] 변수(Variable)

2025. 1. 6. 12:32·Front-end/Javascript

변수란 무엇인가?

데이터를 저장하고 참조할 수 있는 저장소

 

- 이름과 주소를 가진다

- var, let, const 키워드를 이용하여 변수를 선언한다

 

📌 변수의 5가지 주요 개념

변수 이름 = 저장된 값의 고유한 이름

변수 값 = 변수에 저장된 값

변수 할당 = 변수에 값을 저장하는 행위

변수 선언 = 변수를 사용한다고 컴퓨터에게 알리는 행위

번수 참조 = 변수에 할당된 값을 읽어오는 행위

 

📌 변수를 이해하기 위해 필요한 지식

TDZ(Temporal Dead Zone) : 변수가 선언되기 전의 코드 영역 (= 변수가 죽어있는 공간)

스코프 : 변수가 영향을 끼칠 수 있는 범위

함수 스코프 : 함수 내에서만 변수가 영향을 끼친다.

블록 스코프 : {} 내에서만 변수가 영향을 끼친다.

 

 

변수를 선언하는 3가지 방법

01 var

var coffeeMenu = "Americano"

var coffeeMenu = "Latte" // 재선언이 가능하다
coffeeMenu = "Latte" // 재할당도 가능하다

 

📌 특징

- 함수 스코프를 가진다.

- 재선언과 재할당이 모두 가능하다.

 

🚨 문제점

(1) 재선언이 가능하기 때문에, 이미 사용한 변수를 또 사용하게 되는 일이 발생할 수 있다.

var ourCoffeeMenu = "Americano" // 우리 팀 커피 메뉴는 아메리카노로 정해두었는데

var ourCoffeeMenu = "CafeMocha" // 카페모카로 바뀌어버릴 수 있는 것이다

 

(2) 변수를 선언하기 전에 변수를 참조하는 코드를 허용한다.

console.log(coffeeMenu); // 결과: undefined

coffeeMenu = "Americano";

var coffeeMenu;

=> 이러한 문제점들로 인해 논리적인 흐름을 벗어나기 때문에 var은 최대한 사용하지 않는 것이 좋다.

 

02 let

let coffeeMenu = "Americano"

let coffeeMenu = "Latte" // 재선언이 불가능하다
coffeeMenu = "Latte" // 재할당은 가능하다

 

📌 특징

- 블록 스코프를 가진다.

- 재선언이 불가능하다.

- 재할당이 가능하다.

 

03 const

const coffeeMenu = "Americano"

const coffeeMenu = "Latte" // 재선언이 불가능하다
coffeeMenu = "Latte" // 재할당도 불가능하다

 

📌 특징

- 블록 스코프를 가진다.

- 재선언과 재할당이 모두 불가능하다. => 값이 영원히 바뀌지 않기 때문에 코드의 안전성을 높인다.

- 반드시 선언과 동시에 초기화를 해야 한다.

 

 

const vs let

기본적으로 변수를 선언할 때 const를 사용하고, 재할당이 필요한 경우에만 let을 쓴다.

 

예를 들어, for문에서 사용되는 i의 경우 계속 값이 바뀌어야 하기 때문에 let을 사용한다.

for (let i = 0; i < 10: i++) {
	console.log(i);
}

 

 

변수가 필요한 이유

(1) 데이터 저장 및 관리의 필요성

변수는 프로그래밍에서 데이터를 저장하고, 그 값을 쉽게 관리하고 재사용할 수 있도록 한다.

예를 들어, 사용자로부터 받은 입력을 처리하거나 계산 결과를 다시 사용해야 할 때, 변수 없이는 각 단계마다 데이터를 반복적으로 똑같이 적어야 한다.

 

(2) 프로그램의 복잡성 관리

변수가 없다면 직접 값을 입력해야 하므로 코드의 복잡성이 증가하고 오류 가능성이 높아진다.

또한, 프로그램의 확장성과 유지 보수성이 떨어질 수 있다.

변수를 사용하면 코드의 가독성이 높아지고, 수정이 필요할 때 해당 변수만 수정하면 된다.

 

(3) 재사용성 및 유지보수 향상

변수를 통해 정의된 데이터 값을 여러 위치에서 재사용함으로써 코드의 재사용성을 높일 수 있다.

예를 들어, 한 함수에서 계산된 결과를 다른 여러 함수에서도 활용할 수 있다.

 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'Front-end > Javascript' 카테고리의 다른 글

[JS] 조건문(Conditional Statement)  (0) 2025.01.07
[JS] 함수(Function)  (1) 2025.01.06
[JS] 연산자(Operator)  (0) 2025.01.06
[JS] 데이터 타입(Data Type)  (1) 2025.01.06
[JS] 실행 컨텍스트(Execute context)에 대해 알아보자  (4) 2025.01.03
'Front-end/Javascript' 카테고리의 다른 글
  • [JS] 함수(Function)
  • [JS] 연산자(Operator)
  • [JS] 데이터 타입(Data Type)
  • [JS] 실행 컨텍스트(Execute context)에 대해 알아보자
집으로 감자
집으로 감자
Hello World
  • 집으로 감자
    Potato to Home
    집으로 감자
  • 전체
    오늘
    어제
  • 링크

    • Github
    • 분류 전체보기
      • Front-end
        • TIL
        • Javascript
        • Typescript
        • React
        • Next.js
        • CSS
        • 라이브러리
      • Algorithm
        • 프로그래머스: 기초 트레이닝
        • 프로그래머스 LV1
      • TroubleShooting
      • Problem & Solution
      • Project
      • Programing Knowledge
        • 개발 용어
        • CS
        • 운영체제
        • 자료구조
        • 데이터 베이스
  • 태그

    CSS
    실행컨텍스트
    코딩테스트
    react
    회고
    개발용어
    프로그래머스
    Til
    트러블슈팅
    tanstackquery
    반응형웹
    http
    styledcomponent
    문제해결
    JavaScript
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
집으로 감자
[JS] 변수(Variable)
상단으로

티스토리툴바