[모던 자바스크립트] 2.4 변수와 상수

https://ko.javascript.info/variables

변수와 상수

 

✏️ 변수

변수(variable)는 데이터를 저장할 때 쓰이는 이름이 붙은 저장소

자바스크립트에선 let 키워드를 사용해 변수를 생성

• 아래 문(statement)은 message라는 이름을 가진 변수를 생성(선언)

  • let message;

 

• 할당 연산자 =를 사용해 변수 안에 데이터를 저장

  • let message;
    
    message = 'Hello';

 

• 문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열 접근 가능

  • let message;
    message = 'Hello';
    
    alert(message); // 변수에 저장된 값 출력

 

• 변수 선언과 값 할당을 한줄에 가능

  • let message = 'Hello';
    
    alert(message);

 

• 한 줄에 여러 변수 선언 가능

  • 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

• var message = 'Hello';

  • 만들어진지 오래된 스크립트에서는 let 대신 var라는 키워드를 씀
  • 거의 동일하게 동작하지만 오래된 방식 [오래된 var]

 

🚨 변수 중복 선언

• let message = "This";
  
  // 'let'을 반복하면 에러가 발생
  let message = "That"; // SyntaxError: 'message' has already been declared

• 변수는 한 번만 선언해야 함
• 같은 변수를 여러 번 선언하면 에러 발생
• 선언한 변수를 참조할 때는 let 없이 변수명만 사용해 참조

 

✏️ 변수 명명 규칙

1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있음
2. 첫 글자는 숫자가 될 수 없음

   • let userName;
     let test123;

 

• 여러 단어를 조합하여 변수명을 만들 땐 카멜 표기법(camelCase)

  • let $ = 1; // '$'라는 이름의 변수를 선언
    let _ = 2; // '_'라는 이름의 변수를 선언
    
    alert($ + _); // 3

 

• 잘못된 변수명의 예시

  • let 1a; // 변수명은 숫자로 시작해선 안됨
    
    let my-name; // 하이픈 '-'은 변수명에 올 수 없음

 

🚨 대/소문자 구별

• apple와 AppLE은 서로 다른 변수

 

🚨 비 라틴계 언어도 변수명에 사용할 수 있지만 권장하지 않음

• 키릴 문자, 심지어 상형문자도 변수명에 사용할 수 있음
• 모든 언어를 변수명에 사용할 수 있음

  • let имя = '...';
    let 我 = '...';

  • 기술적인 에러도 없고 변수명도 유효하지만 영어를 변수명에 사용하는 것이 국제적인 관습
  • 다른 나라 사람이 스크립트를 볼 경우를 대비해 장기적인 안목을 가지고 코드를 작성

 

🚨 예약어

• 예약어(reserved name) 목록에 있는 단어는 변수명으로 사용할 수 없음
• 이 단어들은 자바스크립트 내부에서 이미 사용 중이기 때문
  • 예약어 예시: let, class, return, function

  • let let = 5; // 'let'을 변수명으로 사용할 수 없으므로 에러!
    let return = 5; // 'return'을 변수명으로 사용할 수 없으므로 에러!

 

🚨 use strict 없이 할당하기

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

  • // 참고: 이 예제에는 "use strict"가 없음
    
    num = 5; // 변수 'num'이 정의되어있지 않더라도, 단순 할당만으로 변수가 생성됨
    
    alert(num); // 5

 

• 아래의 코드는 변수를 생성하는 것은 나쁜 습관임. 엄격 모드에서 에러를 발생시키기 때문

  • "use strict";
    
    num = 5; // error: num is not defined

 

✏️ 상수

변화하지 않는 변수를 선언할 땐, let 대신 const를 사용

• const myBirthday = '18.04.1982';

  • 이렇게 const로 선언한 변수를 상수(constant)라고 함

 

• const myBirthday = '18.04.1982';
  
  myBirthday = '01.01.2001'; // error, can't reassign the constant!

  • 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러 발생
  • 변숫값이 절대 변경되지 않을 것을 확신하면, 값이 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 const를 사용해 변수를 선언

 

✏️ 대문자 상수

• const COLOR_RED = "#F00";
  const COLOR_GREEN = "#0F0";
  const COLOR_BLUE = "#00F";
  const COLOR_ORANGE = "#FF7F00";
  
  // 색상을 고르고 싶을 때 별칭을 사용할 수 있게 됨
  let color = COLOR_ORANGE;
  alert(color); // #FF7F00

  • 대문자로 상수를 만들어 사용하면 여러 장점이 있음
    1. COLOR_ORANGE는 "#FF7F00"보다 기억하기가 훨씬 쉬움
    2. COLOR_ORANGE를 사용하면 "#FF7F00"를 사용하는 것보다 오타를 낼 확률이 낮음
    3. COLOR_ORANGE가 #FF7F00보다 훨씬 유의미하므로, 코드 가독성이 증가

 

• 언제 일반적인 방식으로 상수를 명명하고, 언제 대문자를 사용하는 걸까?
  • 상수는 변수의 값이 절대 변하지 않음을 의미
  • 코드가 실행되기 전에 이미 그 값을 알고 있는 상수도 있고, 런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않는 상수가 있음

  • const pageLoadTime = /* 웹페이지를 로드하는데 걸린 시간 */;

    • pageLoadTime의 값은 페이지가 로드되기 전에는 정해지지 않기 때문에 일반적인 방식으로 변수명을 지음
    • 이 값은 최초 할당 이후에 변경되지 않으므로 여전히 상수

 

✅ 결론

대문자 상수는 '하드 코딩한' 값의 별칭을 만들 때 사용