본문 바로가기

바닐라 코드/Java Script

5. 변수와 상수

1. 정보에 이름을 붙여 저장하는 방법

데이터를 저장하는 상자에 이름을 붙이고 그 안에 데이터를 넣어 사용할 수 있다.

변수명 : 상자에 이름표를 붙이는 것

let message = "Hello!";
console.log(message); // "Hello!"

상자를 만들고 이름표를 붙여 데이터를 저장해두면, 필요할 때 이름표를 사용해 데이터를 꺼낼 수 있다.


2. 변수 (let) - 변하는 값을 저장

변수란 변할 수 있는 값을 저장하는 상자이다.

1. 변수 선언과 값 변경

let score; // 점수라는 이름의 상자를 만듦
	score = 10; // 상자에 10을 넣음
	score = 20; // 상자의 값을 20으로 변경
console.log(score); // 20 (변경한 20 출력)

2. 변수 선언 시 주의 사항

  • 상자를 만들 때는 let 키워드를 사용하고, 값을 바꿀 땐 이름만 사용한다.
  • 같은 이름의 상자를 두 번 만들 수 없다.
let score = 10;

// 같은 이름의 상자를 만들려고 하면 에러 발생
let score = 20; // 에러!

console.log(score); // 사용할 때는 let을 쓰지 않는다.

3. 상수 (const) - 변하지 않는 값을 저장

상수는 한 번 값을 저장하면 바꿀 수 없는 상자이다.

1. 상수 선언

const PI = 3.14; // 원주율은 변하지 않음
console.log(PI); // 3.14

2. 상수는 값을 변경할 수 없다

const birthYear = 1990;
// 값을 변경하려고 하면 에러 발생
birthYear = 2000; // 에러!

3. 상수와 대문자

상수라고 꼭 대문자로 사용해야 하는것은 아니지만, 전역에서 사용하는 상수는 대문자로 쓰는 것이 관례이다.

 

- 프로젝트 전체에서 사용할 상수.

const MAX_USERS = 100; // 최대 사용자 수
const PI = 3.14159; // 원주율

 

- 함수 내부나 로컬에서 사용하는 상수.

const defaultUserName = "Guest"; // 함수 내부에서만 사용
const sessionTimeout = 3000; // 로컬 변수용 상수

4. 변수와 상수의 차이점

사용 상황 키워드 설명
변하는 값 let 점수, 상태 등 언제든지 바뀔 수 있는 데이터
변하지 않는 값 const 원주율, 고정된 설정값 등 바뀌지 않는 데이터

5. 변수 이름 규칙

변수 이름을 지을 때는 규칙이 있다.

1. 허용되는 문자

  • 알파벳(대소문자), 숫자, $, _만 사용 가능.
  • 숫자로 시작할 수 없다.
let myName = "Alex"; // 올바른 변수 이름
let $price = 100; // $ 사용 가능
let _temp = "임시"; // _ 사용 가능
let 1stPlace = "Winner"; // 에러! 숫자로 시작할 수 없음

2. 대소문자를 구분

  • appleApple은 다른 변수.
let apple = "사과";
let Apple = "애플";
console.log(apple); // "사과"
console.log(Apple); // "애플"

3. 예약어 사용 금지

  • let, const 같은 자바스크립트 예약어는 변수 이름으로 사용할 수 없다.
let let = 5; // 에러 발생
const const = 10; // 에러 발생

4. 변수 이름 작성법

  • 단어를 연결할 때 첫 단어는 소문자로 쓰고, 두 번째 단어부터 첫 글자를 대문자로 적는다(카멜케이스).
let userName = "John"; // 올바른 변수 이름
let user_age = 25; // 비추천 (언더스코어 사용)

6. 실무에서의 변수와 상수 사용법

1. 상수는 고정된 값 저장

const MAX_LOGIN_ATTEMPTS = 5; // 최대 로그인 시도 횟수

2. 변수는 변하는 값 저장

let currentLoginAttempts = 0; // 현재 로그인 시도 횟수
currentLoginAttempts++;

3. 적절한 변수 이름을 통해 가독성 높이기

let userScore = 100; // 사용자 점수
const DEFAULT_LANGUAGE = "ko"; // 기본 언어 설정

7. 변수와 상수의 활용 예시

가위바위보 게임

const CHOICES = ["가위", "바위", "보"]; // 상수
let userChoice = "가위";                // 변수
let computerChoice = CHOICES[Math.floor(Math.random() * 3)];

console.log("사용자 선택:", userChoice);
console.log("컴퓨터 선택:", computerChoice);

요약

  1. let은 변하는 값을 저장, const는 고정된 값을 저장.
  2. 변수 이름은 규칙에 맞게 작성하고, 의미 있는 이름을 사용.
  3. 변경되지 않는 값에는 상수 사용해 코드를 안전하게 작성.

'바닐라 코드 > Java Script' 카테고리의 다른 글

7. 자료형 변환  (1) 2024.12.09
6. 자바스크립트의 자료형  (0) 2024.12.06
4. use strict  (1) 2024.12.04
3. 문과 식  (2) 2024.12.03
2. html에 자바스크립트 추가하기  (1) 2024.12.02