[Javascript] 변수와 상수

📌 참고 사이트

변수와 상수 (javascript.info)

변수와 상수

 

 

 

📋 변수 (variable)

📍 변수의 특징

➡️ 변수는 데이터를 저장할 때 쓰는 '이름이 붙은 저장소' 이다.

➡️ 변수에 저장되는 값(데이터)에는 사용자나 서버로부터 입력받는 정보가 들어갈 수 있다. 

ex) 온라인 쇼핑몰에서 판매 중인 상품이나 장바구니 등의 정보

➡️ 변수는 특정 비트 세트 혹은 데이터 유형 (int, string, float 등)에 대해 이름이 붙여진 공간으로 결국 메모리 주소와 연결되고, 메모리 주소로 식별될 수 있다. (따라서 변수는 식별자의 역할을 함.)

➡️ 변수는 주어진 시스템의 메모리에 저장된 데이터의 메모리 주소를 가리키는 일반적인 참조 방법을 사용한다. 

Variable (computer science) - Wikipedia

Variable (computer science) - Wikipedia

 

 

 

 

📋 변수 선언하기

📍 let 키워드

➡️ 자바스크립트에서는 let 키워드를 사용해 변수 생성이 가능하다.

변수명과 함께 할당 연산자인 '='를 사용하면 해당 변수 안에 데이터를 저장하는 것이 가능하다.

변수 선언과 값 할당을 한번에 작성하는 것도 가능하다.

 

// 변수 선언 후 값 할당하기
let comment;
comment = 'Hi!';

// 변수 선언과 값 할당을 동시에 하기
let comment = 'Hi!';

 

➡️ 위와 같이 하면 'Hi!'라는 문자열이 변수 comment와 연결된 특정 메모리 영역에 저장되었기 때문에 변수명을 이용해 문자열에 접근이 가능하다.

비유해서 설명하자면, 변수 comment는 comment라는 이름표가 붙어있는 상자에 'Hi!' 라는 값을 저장한 것이라고 볼 수 있다.

 

alert(comment);     // Hi 라는 문구가 담긴 알림창이 화면에 뜬다.

 

➡️ 한 줄에 여러 변수를 선언하는 것도 가능하다.

but 가독성 증대를 위해 한 줄에 하나의 변수만 작성하는 것이 좋다.

 

// 한 줄에 여러 변수 선언하기
let user = 'Lily', age = 21. comment = 'Hi!';

// 한 줄에 하나의 변수 선언하기
let user = 'Lily';
let age = 21;
let comment = 'Hi!';

 

➡️ let 키워드를 사용하여 선언한 변수에서는 이미 변수에 할당된 값을 다른 값으로 변경하는 것도 가능하다.

값이 변경되면 이전 데이터는 변수에서 제거되고 새로운 데이터가 자리하게 된다.

 

let comment = 'Hi!';     // comment 변수 선언과 'Hi'라는 값 할당 동시에
comment = 'Friend';     // 값이 'Friend'로 변경됨.
alert(comment);     // 'Hi'가 아닌 'Friend'라는 문구가 적힌 알림창이 뜸.

 

➡️ 한 변수의 데이터를 다른 변수에 복사할 수 있다.

 

let greeting = 'Hi!';     // 'Hi'라는 값이 담긴 greeting 변수 선언
let hi;     // hi 변수 선언

// greeting 변수의 'Hi'라는 값을 hi 변수에 복사하기
hi = greeting;

// 이제 greeting 변수와 hi 변수는 같은 값을 가짐.
alert(greeting)     // 'Hi!'
alert(hi)     // 'Hi!'

 

➡️ let 키워드를 이용하여 선언한 변수는 한 번만 선언되어야 함을 기억해야 한다.

이미 한 번 선언되어 있는 변수를 참조할 때에는 let 키워드 없이 변수명만 사용하여 참조해야 한다.

 

let comment = 'Hi!';

// 다음과 같이 let 키워드를 반복하여 변수를 선언하면 에러가 발생한다.
let comment = 'Hello';     // SyntaxError: 'comment' has already been declared

 

❗ 함수형 프로그래밍 언어에서는 변숫값 변경을 금지한다. 이러한 언어에서는 값이 한 번 할당되면 영원히 그 값을 유지하므로 다른 값을 저장하고 싶다면 이전 변수를 재사용하는 것이 아닌 새 변수를 선언해야 한다.

 

* 함수형 프로그래밍 (functional programming)

자료 처리를 수학적 함수의 계산으로 취급하고, 상태와 가변 데이터를 멀리하는 프로그래밍의 패러다임 중 하나이다.

명령형 프로그래밍에서 사용되는 명령형의 함수는 프로그램의 상태의 값을 바꿀 수 있는 부작용이 생길 수 있다. 따라서 명령형 함수는 참조 투명성이 없고, 같은 코드라도 실행되는 프로그램의 상태에 따라 다른 결과값을 낼 수 있다.

반대로, 함수형 프로그래밍에서 사용하는 수학적 함수는 출력값이 해당 함수에 입력된 인수에만 의존하므로 인수 x에 같은 값을 넣고 함수를 호출하면 항상 똑같이 f(x)라는 결과가 나온다. 변수의 값이 변경되는 부작용을 제거하면 프로그램의 동작을 이해하고 예측하기가 훨씬 쉽다.

함수형 프로그래밍 - 위키백과, 우리 모두의 백과사전 (wikipedia.org)

함수형 프로그래밍 - 위키백과, 우리 모두의 백과사전

 

📍 변수 명명 규칙

➡️ 변수명에는 오직 문자와 숫자, 기호 $와 _만 들어갈 수 있다.

➡️ 첫 글자는 숫자가 될 수 없다.

➡️ JS에서는 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성하는 카멜 표기법(camelCase)이 흔히 사용된다.

➡️ 변수명은 대소문자를 구분한다. (apple과 Apple은 다른 변수명이다.)

➡️ 예약어(reversed name) 목록에 있는 단어는 변수명으로 사용할 수 없다. (let, class, return, function 등)

➡️ 비 라틴계 언어도 변수명에 사용할 수 있지만 권장하지 않는다.

 

// 유효한 변수명의 예시
let userName;
let test123;
let $

// 잘못된 변수명의 예시
let 1a     // 변수명은 숫자로 시작 불가하다.
let my-name     // 하이픈(-)은 변수명으로 올 수 없다.

 

➡️ 예전에는 let 없이도 단순히 값을 할당해 변수를 생성하는 것이 가능했다. 따라서 use strict을 사용하지 않으면 과거 스크립트와의 호환성을 유지할 수 있으므로 위와 같은 변수 선언 방식을 사용할 수 있다.

하지만 use strict를 사용하는 엄격 모드에서는 위와 같이 변수를 선언하면 에러를 발생시킨다.

 

// 엄격 모드를 사용하지 않는 경우
num = 5;     // 변수 num을 예약어를 통해 정의하지 않고 단순 할당만 하더라도 변수가 생성된다.
alert(num);     // 5 (정상적으로 작동)

// 엄격 모드를 사용하는 경우
"use strict";
num = 5;     // error: num is not defined

 

📍 상수 (const 키워드)

➡️ 변화하지 않는 변수(상수)를 선언할 경우 let 대신 const 예약어를 사용한다.

➡️ 상수는 let에서와 달리 재할당할 수 없으므로 상수를 변경하려 하면 에러가 발생한다.

 

const date = '2023-07-03';     // 상수 date 선언
date = '2023-07-04';     // error, can't reassign the constant!

 

❓ 대문자 상수

기억하기 힘든 값을 변수에 할당해 별칭에 사용하는 관습이다.

이러한 상수는 대문자와 빝줄로 구성된 이름으로 명명한다.

대문자 상수를 사용하면 기억하기 쉽고, 오타를 낼 확률이 낮고, 가독성이 증가하는 장점이 있다.

 

// 16진수 컬러 코드 중 빨간색을 나타내는 값을 대문자 상수 COLOR_RED라는 변수에 저장
const COLOR_RED = '#F00';

// 이제 색상을 고르고 싶을 때 편리하게 별칭을 사용할 수 있게 되었다.
let color = COLOR_RED;
alert(color);     // #F00

 

➡️ 대문자 상수를 사용하는 경우 : 코드가 실행되기 전에 이미 그 값을 알고 있고, 값이 변하지 않을 때 (하드 코딩한 값의 별칭을 만들 때)

➡️ 일반적인 방식으로 상수명을 짓는 경우 : 런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않을 때 (웹페이지를 로드하는데 걸리는 시간 등)

 

📍 var 키워드와 let 키워드

var 키워드로도 변수 선언이 가능하다.

 

var comment = 'Hi!';

 

var 키워드로 변수를 선언하는 방식은 오래된 스크립트에서 종종 발견할 수 있다. let과 유사하지만 분명하게 다른 점들이 있다.

 

➡️ var에는 블록 스코프가 없고, var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프이다. 따라서 블록 밖에서 접근이 가능하다.

 

if (true) {
    var test = true;     // var로 test 변수 선언
}
alert(test)     // true (if문이 끝났어도, 즉 블록 밖이어도 변수에 접근 가능)

 

만약 위 test 변수를 let으로 선언하였다면 alert(test)에서 변수에 접근할 때 'test is not defined'라는 에러를 볼 수 있다. 즉, let을 사용하면 변수 test는 if문 안에서만(블록 스코프) 접근이 가능한 것이다.

위 if문 코드 블록이 어떤 함수 안에 있을 경우 var는 함수 레벨 변수가 된다. 함수 안에서만 var로 선언한 변수에 접근할 수 있다는 뜻이다.

 

function sayHi() {
    if (true) {
        var phrase = 'Hello';
    }
    alert(phrase);     // Hello (함수 안에서는 제대로 출력)
}

sayHi();
alert(phrase);     // Error: phrase is not defined (함수 밖에서 접근하면 에러)

 

➡️ var은 변수의 중복 선언을 허용한다.

var로 같은 변수를 여러 번 선언할 수 있는데, 이미 선언된 변수에 var을 사용하면 그 var은 무시된다. 이전에 이미 한 번 선언되었으므로 그 var의 역할은 없고, 값만 재할당되는 것이다.

 

var user = 'Peter';
var user = 'John';     // 이 var는 아무것도 하지 않는다. (이전에 이미 선언됨.) 에러도 발생 X

alert(user)     // John (두번째 값이 저장되어 있음)

 

let의 경우 한 스코프에서 중복되게 선언하면 에러가 발생한다. (SyntaxError: ~ has already been declared)

 

➡️ var은 선언하기 전에 사용할 수 있다.

var은 전역에서 선언하였다면 스크립트가 시작될 때, 그렇지 않으면 함수가 시작될 때 처리된다.

함수 본문 내에서 var로 선언한 변수는 선언 위치와 관계없이 함수 본문이 시작되는 지점에서 정의된다.

(중첩 함수(함수 안에서 함수 정의)에서 정의된 것이 아닌 경우)

이렇게 변수가 끌러올려지는 현상을 '호이스팅(hoisting)' 이라고 한다. var로 선언한 모든 변수는 이 호이스팅이 적용된다.

 

function sayHi() {
    // var로 선언된 변수는 함수 본문이 시작되는 지점에서 정의됨.
    phrase = 'Hello';     // 할당
    alert(phrase);     // Hello (정상적으로 작동)
    var phrase;     // var로 선언
}
sayHi();

// 위 코드는 아래 코드와 동일하게 동작
function sayHi() {
    var phrase;
    phrase = 'Hello';
    alert(phrase);
}
sayHi();

 

이때, 선언이 호이스팅되는 것이지 할당이 호이스팅 되는 것이 아니다. 따라서 var로 선언한 변수는 어디서든 참조 가능하지만 값을 할당하기 전까지는 값이 undefined이다.

 

function sayHi() {
    alert(phrase);     // 변수에 값 할당 전 참조
    var phrase = 'Hello';     // var로 변수 선언하면서 Hello라는 값 할당
}
sayHi();     // undefined

// 위 함수는 아래 함수와 같은 방식으로 작동한다.
function sayHi() {
    var phrase;     // 선언은 함수 시작 시 처리된다.
    alert(phrase)     // undefined
    phrase = 'Hello';     // 할당은 실행 흐름이 해당 코드에 도달했을 때 처리된다.
}
sayHi();

 

✍️ const, let, var 차이점 간단 요약

예약어	선언하지 않고 사용할 경우	재선언	재할당
var	오류 없음 (호이스팅 발생)	O	O
let	오류 발생	X	O
const	오류 발생	X	X

 

 

 

📋 바람직한 변수명 짓기

➡️ 사람이 읽을 수 있는 이름을 사용하자. ex) userName, shoppingCart

➡️ 어떤 역할인지 명확히 알지 못하는 경우 외에는 줄임말이나 a, b, c 같은 의미 없는 변수명은 피하자.

➡️ 최대한 서술적이고 간결하게 작성하자. data와 value 같은 변수명은 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때 제외하고는 사용하지 않는 것이 좋다.

➡️ 자신만의 규칙이나 소속된 팀의 규칙을 따르자.

➡️ 모던 자바스크립트 압축기 (minifier)와 브라우저는 코드 최적화를 잘해주므로 기존 변수를 재사용하는 것보다 새로운 변수를 선언해 변수를 다르게 해 주면 코드 최적화에 도움이 된다. 변수를 재사용하면 새로운 변수를 선언하는 데 걸리는 비용보다 훨씬 더 많은 비용을 디버깅에 쏟아야 할 수도 있다.

 

 

 

✏️ 과제

📍 변수 가지고 놀기

1️⃣ admin과 name이라는 변수를 선언해라.

❗ VSCode에서 실행할 경우, name은 VSCode 내부 개발 환경 구축을 위해 사용하는 라이브러리(lib.dom.d.ts)에 이미 name이라는 이름의 변수가 존재하여 결국 변수를 2번 선언하는 꼴이 되어 오류가 발생하게 된다. 브라우저 콘솔 환경에서는 올바르게 작동한다.

 

2️⃣ name에 값으로 'John'을 할당해 보자.

 

3️⃣ name의 값을 admin에 복사해 보자.

 

4️⃣ admin의 값을 alert 창에 띄워보자. (결과로 John이 출력되어야 함.)

 

// 1.
let admin;
let name;
// 혹은 let admin, name; 이렇게 동시에 변수 2개 선언 가능하다.

// 2.
name = 'John';

// 3.
admin = name;     // 이제 admin의 값도 John이 된다.

// 4.
alert(admin);

 

📍 올바른 이름 선택하기

1️⃣ 현재 우리가 살고 있는 행성(planet)의 이름을 값으로 가진 변수를 만드려면 변수 이름은 어떻게 지어야 할까?

 

let ourPlanetName = 'Earth';

 

변수명은 명확하게 우리가 살고 있는 행성(ourPlanet)의 이름(Name)으로 해 주었고, 값은 문자열인 'Earth' (지구)를 할당해 주었다.

 

2️⃣ 웹사이트를 개발 중이라고 가정하고, 현재 접속 중인 사용자(user)의 이름(name)을 저장하는 변수를 만들어 보라. 변수 이름은 어떻게 지어야 할까?

 

let currentUserName = "John";

 

📍 대문자 상수 올바르게 사용하기

아래 코드를 평가해 보자.

 

const birthday = '18.04.1982';
const age = someCode(birthday);

 

위 코드에서 상수 birthday는 태어난 날짜 정보를 담고 있다. age라는 상수는 나이에 관한 값을 담고 있는데 birthday를 조작하여 그 값을 도출한다.

이런 상황에서 birthday를 대문자 상수로 바꾸는 것이 적절할까? age 역시 대문자 상수로 바꾸는 것이 괜찮은 선택일까?

 

🅰️ birthday의 경우 실행 전에 이미 값을 알고 있는 변하지 않을 값이므로 하드 코딩한 값에 해당하고, 따라서 대문자 상수(BIRTHDAY)로 적합하다.

but age의 경우 똑같은 상수이지만 somdCode 함수를 실행하기 전에는 값을 모르므로(값이 런타임에 계산됨.) 대문자 상수가 아닌 일반적인 변수 작성 방식으로 작성해야 한다.