유지연

유지연

I’m a junior web developer.
Let’s code with me!

[코어 자바스크립트] 2.4 변수와 상수

업데이트:
5 분 소요

출처 : 모던 JavaScript 튜토리얼

1. 변수(variable)

  • 대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작하는데, 변수는 이러한 정보를 저장하는 용도로 사용된다.
  • 변수는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’이다.
  • 자바스크립트에서는 let 키워드를 사용해 변수를 생성한다.
let variable;
  • 할당 연산자 =를 사용하여 변수 안에 데이터를 저장할 수 있다.
let message;

message = 'Hello'; // 변수에 문자열 저장
  • 문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용하여 문자열에 접근할 수 있다.
let message;
message = 'Hello';

alert(message); // 변수에 저장된 값을 보여준다.
  • 변수 선언과 값 할당을 한 줄에 작성할 수도 있다.
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';

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

let 대신 var

  • 만들어진 지 오래된 스크립트에서 let 대신 var라는 키워드를 발견하는 경우가 있다.
var message = 'Hello';
  • var과 let은 거의 동일하게 동작한다. var도 let처럼 변수를 선언하는 데 쓰인다. 다만 var는 오래된 방식이고 미묘하게 차이가 있다.

2. 현실 속의 비유

  • ‘상자’ 안에 데이터를 저장하는데, 이 상자에 ‘message’라는 이름표가 붙어 있다고 가정한다. 그리고이 상자에 “Hello!”라는 문자열이 적힌 넣는다. 상자 속에는 어떤 값이든지 넣을 수 있고 원하는 만큼 값을 변경할 수도 있다.
let message;

message = 'Hello!';

message = 'World!'; // 값이 변경되었습니다.

alert(message);
  • 값이 변경되면 이전 데이터는 변수에서 제거된다. 변수 두 개를 선언하고, 한 변수의 데이터를 다른 변수에 복사할 수도 있다.
let Hello = 'Hello world!';

let message;

// Hello의 'Hello world' 값을 message에 복사한다.
message = Hello;

// 이제 두 변수는 같은 데이터를 가진다.
alert(Hello); // Hello world!
alert(message); // Hello world!

변수 두 번 선언

  • 변수는 한 번만 선언해야 한다. 변수를 여러 번 선언하면 에러가 발생한다.
let message = "This";

// 'let'을 반복하면 에러가 발생한다.
let message = "That"; // SyntaxError: 'message' has already been declared
  • 따라서 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용해 참조해야 한다.

함수형 언어

  • 함수형(functional) 프로그래밍 언어는 변숫값 변경을 금지한다. 스칼라(Scala)와 얼랭(Erlang)은 대표적인 함수형 언어이다.
  • 이런 언어에서는 변수에 값이 일단 저장되면, 그 값을 영원히 유지한다. 다른 값을 저장하고 싶다면 새로운 변수를 선언해야만 한다. 이전 변수를 재사용할 수 없다.
  • 함수형 언어는 중대한 개발에 적합한 언어이다.

3. 변수 명명 규칙

  • 자바스크립트에선 변수 명명 시 두 가지 제약 사항이 있다.
    • 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 가능하다.
    • 첫 글자는 숫자가 될 수 없다.
  • 유효한 변수명의 예
let userName;
let test418;
  • 여러 단어를 조합하여 변수명을 만들 때는 카멜 표기법(camelCase)가 흔히 사용된다. 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성한다.
  • 변수명에서 달러 기호 $ 와 밑줄 _ 가 일반 글자처럼 특별한 의미를 지니진 않는다.
let $ = 1; // '$'라는 이름의 변수 선언
let _ = 2; // '_'라는 이름의 변수 선언

alert($ + _); // 3
  • 잘못된 변수명의 예
let 1a; // 변수명의 첫 글자는 숫자가 될 수 없다.

let my-name; // 하이픈 '-'은 변수명에 올 수 없다.
  • 변수명은 대소문자를 구분한다. 아래 선언된 두 변수는 서로 다른 변수이다.
let apple;
let Apple;
  • 모든 언어를 변수명에 사용할 수 있지만, 영어를 변수명에 사용하는 것이 국제적인 관습이다.
let имя = '...';
let 我 = '...';

예약어(reserved name)

  • 예약어 목록에 있는 단어는 변수명으로 사용할 수 없다. 이 단어들은 자바스크립트 내부에서 이미 사용 중이기 때문이다.
  • 예약어 예 : let, class, return , function
  • 예약어를 변수명으로 사용한 경우 에러가 발생한다.
let let = 20;
let return = 21;

use strict 없이 할당하기

  • 변수는 정의되어 있어야 사용할 수 있지만, 이전에는 let 없이도 단순하게 값을 할당해 변수를 생성하는 것이 가능했다. use strict를 쓰지 않으면 과거 스크립트와의 호환성을 유지할 수 있기 때문에 여전히 이 방식을 사용할 수 있다.
// 이 코드에는 "use strict"가 없다.

num = 5; // 변수 'num'이 정의되어있지 않지만, 단순 할당만으로 변수가 생성된다.

alert(num); // 5
  • 이렇게 변수를 생성하는 것은 엄격 모드에서 에러를 발생시킨다.
"use strict";

num = 5; // error: num is not defined

4. 상수(constant)

  • 변화하지 않는 변수를 선언할 때는 let 대신 const를 사용한다. const로 선언한 변수를 상수라 부른다.
const myBirthday = '18.04.1991';
  • 상수는 재할당 할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다.
const myBirthday = '18.04.1991';

myBirthday = '01.01.2021'; // error, can't reassign the constant!
  • 특정 변수의 값이 절대 변경되지 않는다고 확신한다면, 값이 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 const를 사용해 변수를 선언한다.

대문자 상수

  • 기억하기 힘든 값을 변수에 할당해 별칭으로 사용할 때, 대문자와 밑줄로 구성된 이름으로 명명한다.
  • 예) 16진수 컬러 코드에 대한 상수 만들기
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// 색상을 고르고 싶을 때 별칭을 사용할 수 있다.
let color = COLOR_ORANGE;
alert(color); // #FF7F00
  • 대문자로 상수를 만들어 사용하면 여러 장점이 있다.
    • 기억하기 쉽다.
    • 오타를 낼 확률이 낮다.
    • 코드 가독성이 좋다.
  • ‘상수’는 변수의 값이 절대 변하지 않음을 의미한다. 그 중에는 코드가 실행되지 전에 이미 그 값을 알고 잇는 상수도 있고, 런타임 과정에서 계산되지만 최초 할당 이후에 값이 변하지 않는 상수도 있다.
  • 아래와 같은 경우에는, 페이지가 로드되기 전에는 값이 정해지지 않기 때문에 일반적인 방식으로 변수명을 지었다. 하지만 최초 할당 이후에 값이 변경되지 않으므로 상수이다.
const pageLoadTime = /* 웹페이지를 로드하는데 걸린 시간 */;
  • 대문자 상수는 ‘하드코딩한’ 값의 별칭을 만들 때 사용한다.

4. 바람직한 변수명

  • 변수명은 간결하고 명확해야 한다. 변수가 담고 있는 것이 무엇인기 잘 설명할 수 있어야 한다.
  • 실제 프로젝트에서 변수 명명시 참고할 규칙
  • 사람이 읽을 수 있는 이름을 사용한다. 예) userName, javaClass
  • 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름을 피한다.
  • 최대한 서술적이고 간단하게 명명한다. data와 value같은 이름은 아무것도 설명해주지 않기 때문에, 피하는 것이 좋다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용한다.
  • 자신만의 규칙이나 소속된 팀의 규칙을 따른다.

변수의 재사용

  • 변수를 재사용하면 변수 선언에 쏟는 노력을 좀 덜 수는 있겠지만, 디버깅에 많은 시간을 쏟아야 한다.
  • 값이 다른 경우에는, 새로운 변수를 선언하는 것이 코드 최적화에 도움이 된다.

5. 요약

  • var, let, const를 사용해 변수를 선언할 수 있다.
    • let - 모던한 변수 선언 키워드
    • var - 오래된 변수 선언 키워드
    • const - let과 비슷하지만, 변수의 값 변경 불가능
  • 변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어야 한다.

6. 과제

변수 선언과 값 할당하기

  1. admin과 name이라는 변수를 선언하세요.
  2. name에 값으로 "John"을 할당해 보세요.
  3. name의 값을 admin에 복사해 보세요.
  4. admin의 값을 alert 창에 띄워보세요. “John”이 출력되어야 합니다.
  • 풀이
let admin;
let name;

name = "John";
admin = name;

alert(admin);

올바른 이름 선택하기

  1. 현재 우리가 살고있는 행성(planet)의 이름을 값으로 가진 변수를 만들어보세요. 변수 이름은 어떻게 지어야 할까요?
  2. 웹사이트를 개발 중이라고 가정하고, 현재 접속 중인 사용자(user)의 이름(name)을 저장하는 변수를 만들어보세요. 변수 이름은 어떻게 지어야 할까요?
  • 풀이
let ourPlanetName = "Earth";

let currentUserName = "Jiyoun";

참고

2022-02-22 TIL(at work)

업데이트:
5 분 소요

업무 배경 이 업무가 할당된 이유 회사에서 맡고 있는 서비스 중, 회원이 구매를 신청하면 정부24에서 그 컨텐츠를 구매하여 제공을 하는 서비스가 있다. (참고로, 구매를 한다고 바로 완료되는게 아니라 구매 로직을 태운 후 실제로 컨텐츠를 가져오기까지 어느정도 시간이 소요된다....