Variables (JavaScript)

출처 : https://javascript.info/variables

Variables

 

 

 

변수

대부분의 경우 JavaScript 애플리케이션은 정보를 다루어야 함. 

 

예를 들면 : 

 

온라인 쇼핑몰 - 판매되는 상품과 장바구니 등의 정보가 필요함. 

채팅 애플리케이션 - 사용자 , 메시지 등 다양한 정보를 저장해야 함.

 

이러한 정보를 저장하는데 변수(variable)가 사용됨.

 

변수란? 

변수는 데이터를 저장하는 "이름이 붙은 저장소"임.

즉 우리는 변수에 상품 , 방문자 등 다양한 정보를 저장할 수 있음.

변수를 만들려면 let 키워드를 사용함. 

 

예제 : 변수 선언하기 

 

let message;

 

위 코드에서 message라는 변수를 만들었음.

이제 변수에 데이터를 할당할 수 있음.

 

예제 : 변수에 값 저장하기 

 

let message;

message = 'Hello'; // 변수 message에 문자열 'Hello' 저장

 

이제 'hello' 문자열이 변수 message 와 연결된 메모리 공간에 저장되었음. 

변수명을 사용하여 이 값을 가져올 수 있음. 

 

예제 : 변수 사용하기 

 

let message;
message = 'Hello!';

alert(message); // 'Hello!' 출력

 

선언과 할당을 한 줄로 줄일 수도 있음. 

 

let message = 'Hello!';
alert(message); // 'Hello!' 출력

 

여러 개의 변수 선언 

변수는 한 줄에 여러 개 선언할 수도 있음.

 

let user = 'John', age = 25, message = 'Hello';

 

하지만 가독성을 위해 변수는 한 줄씩 선언하는 것이 좋음.

이렇게 하면 유지보수하기 쉬워짐. 

 

let user = 'John';
let age = 25;
let message = 'Hello';

 

또는 다음과 같이 작성 가능 

 

let user = 'John',
    age = 25,
    message = 'Hello';

 

 

var VS let 

옛날 코드에서는 var 키워드를 사용하는 경우도 있음.

 

var message = 'Hello';

 

var도 변수를 선언할 때 사용되지만 , let과 몇 가지 차이점이 있음. 

이 차이는 "var의 문제점"에서 자세히 다룸. 

지금은 let을 사용하는 것이 좋음.

 

변수의 개념을 현실에 비유하기

변수는 이름이 붙은 "박스"와 같음.

message라는 변수를 선언하면 "message"라는 라벨이 붙은 박스가 생김. 

message = 'hello!' 하면 그 박스 안에 "hello!"가 들어감. 

message = 'world!' 하면 기존 "hello!" 값은 지워지고 "world!"로 대체됨.

 

let message;
message = 'Hello!';
message = 'World!'; // 값 변경

alert(message); // 'World!' 출력

 

또한 변수 간 값을 복사할 수도 있음. 

 

let hello = 'Hello world!';
let message;

message = hello;

alert(hello); // 'Hello world!'
alert(message); // 'Hello world!'

 

 

중복 선언 금지 

변수는 한 번만 선언해야 함. 

같은 변수명을 다시 선언하면 오류가 발생함. 

 

변수에 값을 재할당하는 건 가능하지만 선언은 무조건 한번만 가능 

 

변수 이름 규칙

변수 이름을 정할 때는 다음 규칙을 따라야 함. 

 

변수명에는 문자 , 숫자 , $ , _만 사용가능함. 

변수명은 숫자로 시작할 수 없음.

 

올바른 변수명 예제 

 

let userName;
let test123;
let $price;
let _privateVar;

 

잘못된 변수명 예제 

 

let 1a; // ❌ 숫자로 시작하면 안 됨
let my-name; // ❌ 하이픈(-)은 사용할 수 없음

 

JavaScript에서는 대소문자를 구분함.

 

let apple = 10;
let APPLE = 20;

alert(apple); // 10
alert(APPLE); // 20

 

비록 JavaScript에서는 다른 언어의 문자도 변수명으로 사용할 수 있지만 가독성을 위해 영어를 쓰는 것이 좋음. 

 

let имя = '...'; // 가능하지만 추천하지 않음
let 我 = '...'; // 가능하지만 추천하지 않음

 

예약어

JavaScript에서 미리 정의된 키워드는 변수명으로 사용할 수 없음.

 

잘못된 예제 

 

let let = 5; // ❌ 'let'은 예약어이므로 사용 불가
let return = 5; // ❌ 'return'도 예약어

 

"use strict"와 변수

보통 변수는 let을 사용해 선언해야 함. 

하지만 "use strict"모드를 사용하지 않으면 선언 없이 변수에 값을 할당할 수 도 있음. 

이것은 나쁜 습관이므로 사용하지 않는 것이 좋음. 

 

나쁜 예제 (비추천)

 

num = 5; // ❌ 선언 없이 할당 (use strict 없으면 가능)

alert(num); // 5

 

엄격 모드 (strict mode)에선 오류 발생

 

"use strict";

num = 5; // ❌ 오류 발생: num is not defined

 

상수(const)

변수의 값을 변경할 수 없도록 하려면 const를 사용해야 함. 

 

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // ❌ 오류 발생

 

언제 const를 사용해야할까 

 

값이 절대 변경되지 않는 경우 ( 예: 생년월일)

의도적으로 변하지 않는 값을 명확하게 표시할 떄 

 

대문자로 쓰는 상수 (Uppercase Constants)

상수를 선언할 떄 , 값을 미리 알고 있는 "하드코딩된 값"이라면 대문자 + 언더스코어 (UPPER_CASE)형식을 사용함.

해당 값을 실행시켜서 가져오는 것이 아닌 값 자체를 바로 하드코딩 하는 것이라면 대문자 + 언더스코어를 사용.

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";

let color = COLOR_RED;
alert(color); // "#F00"

 

대문자로 선언할 때 vs 소문자로 선언할 떄 

 

const BIRTHDAY = '18.04.1982'; // ⭕ 미리 아는 값이므로 대문자 사용
const age = someCode(BIRTHDAY); // ❌ 실행 중 계산되므로 소문자 사용

 

상수 값이 실행 중 계산되는 값이라면 const age 처럼 소문자를 사용해야 함. 

 

 

변수 이름 잘 짓기 

변수명은 읽기 쉽고 직관적이어야 함. 

변수명이 코드의 가독성을 결정함.

 

좋은 변수명 예제

 

let userName;
let shoppingCart;
let currentUser;

 

나쁜 변수명 예제 

 

let d; // ❌ 의미 없음
let data; // ❌ 너무 포괄적임
let value; // ❌ 어떤 값인지 알 수 없음

 

 

재사용할 것인가 , 아니면 만들 것인가 ? 

마지막으로 새로운 변수를 선언하는 대신 기존 변수를 재사용하는 게으른 프로그래머들이 있음.

 

결과적으로 그들의 변수는 사람들이 스티커를 바꾸지 않고도 다양한 물건을 던지는 상자와 같음.

 

이런 프로그래머는 변수 선언에서는 약간의 비용을 절감하지만 디버깅에서는 10배나 더 많은 비용을 낭비함. 

추가 변수는 악이 아닌 선임.

 

최신 javaScript 축소기와 브라우저는 코드를 충분히 최적화하므로 성능 문제가 발생하지 않음. 

다른 값에 대해 다른 변수를 사용하면 엔진이 코드를 최적화하는데 도움이 될수도 있음.