자바스크립트 기본 - 변수와 상수

devheyrin·2022년 4월 12일
0

modern javascript

목록 보기
4/26

변수

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

자바스크립트에서는 let 변수를 사용해 변수를 생성한다.

아래 statement 는 ‘message’라는 이름을 가진 변수를 생성(선언)한다.

let message;

할당 연산자를 사용해 변수 안에 데이터를 저장할 수 있다.

let message;
message = 'Hello'; 

문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있게 되었다.

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

아래와 같이 변수 선언과 값 할당을 한 줄에 작성할 수도 있다.

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

한 줄에 여러 변수를 선언하는 것도 가능하지만, 권장하는 방법은 아니다. 가독성을 위해 한 줄에는 하나의 변수만 작성하자.

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

다음과 같이 let 을 한번만 작성할 수도 있다.

let user = 'John',
	age = 25;,
	message = 'Hello!';
let user = 'John'
	, age = 25;
	, message = 'Hello!';
💡 let 과 var
과거에는 변수 선언시 var 키워드를 사용했다. var 와 let 은 거의 동일하게 동작하지만, var 는 오래된 방식이다!

현실 속 비유

‘상자' 안에 데이터를 저장하는데, 이 상자에 붙여진 특별한 이름표를 변수라고 생각할 수 있다. 즉, 변수 message 는 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 없이 변수명만 사용해야 한다.

let message = "This";

// 'let'을 반복하면 에러가 발생합니다.
let message = "That"; 
// SyntaxError: 'message' has already been declared
💡 함수형 언어
함수형 프로그래밍 언어는 변수값 변경을 금지한다. 스칼라와 얼랭이 대표적인 함수형 언어에 속한다. 이들 언어에서는 상자 속에 값이 일단 저장되면, 그 값을 영원히 유지한다. 다른 값을 저장하고 싶다면 새 변수를 선언해야만 한다. 이전 변수를 재사용할 수는 없다! 함수형 언어는 중대한 개발에 상당히 적합한 언어이다. 언젠가 공부해보는 것이 시야에 도움이 될 것이다!

변수 명명 규칙

자바스크립트에선 변수 명명 시 두 가지 제약 사항이 있다.

  1. 문자와 숫자, 기호 $와 _만 들어갈 수 있다.
  2. 첫 글자는 숫자가 될 수 없다.
let userName; // 가능
let test123; // 가능
let $ = 1; // 가능
let _ = 2; // 가능
let 1a; // 불가능 
let my-name; // 불가능 

그 밖의 규칙들

  • 변수명은 대소문자를 구별한다. 즉 apple 과 Apple 은 다른 변수이다.
  • 키릴문자와 상형문자 등 모든 언어를 변수명으로 사용할 수 있지만 변수명으로는 영어를 사용하는 것이 국제적인 관습이므로, 영어를 사용하도록 하자!
  • 예약어는 변수명으로 사용할 수 없다. let, class, return, function 등
  • use strict 모드를 쓰지 않으면 let 없이 값을 할당하기만 해도 변수를 생성할 수 있다. 그러나 이는 엄격 모드에서 에러를 발생시킬 수 있으므로 나쁜 관습이다. 사용을 지양하자!

상수

변하지 않는 변수를 생성할 때 const 를 사용한다. const 로 선언한 변수를 ‘상수'라고 부른다. 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다.

변숫값이 절대 변경되지 않을 것임을 확신한다면, 값이 변경되는 것을 방지하기 위해 and 다른 개발자들에게 상수임을 알리기 위해 const 를 사용하는 것이 좋다.

대문자 상수

기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 경우가 많다. 이때는 대문자와 밑줄로 구성된 이름으로 명명한다. 다음과 같은 장점이 있다.

  • 기억하기가 훨씬 쉽다.
  • 오타를 낼 확률이 낮다.
  • 코드 가독성이 증가한다.

구체적으로 어떤 상황에서 대문자를 사용해 명명해야 할까?

‘하드 코딩한'값의 별칭을 만들 때 사용하면 된다.

변하지 않는 값이지만 ‘계산되어'할당되는 변수라면 일반적인 상수로 명명한다.

바람직한 변수명

  • 간결하고 명확해야 한다.
  • 변수가 담고 있는 것이 무엇인지 잘 설명할 수 있어야 한다.
  • 작성했던 코드를 다시 봤을 때, 변수가 올바른 이름을 가지고 있어야 정보를 더 쉽게 찾을 수 있다.
  • userName 이나 shoppingCart 처럼 사람이 읽을 수 있는 이름을 사용한다.
  • 줄임말이나 a, b, c와 같은 짧은 이름은 피한다.
  • 최대한 서술적이고 간결하게 명명한다. data 와 value 는 되도록 사용하지 않는다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용한다.
  • 소속된 팀의 규칙을 따른다.
💡 변수 재사용 vs 새로 만들기
재사용 변수는 과거에 붙여진 스티커를 떼지 않은 채 물건만 바뀐 상자와 같다. 내용물을 알기 위해서는 상자에 다가가 확인해보아야만 한다. 변수를 추가하는 것은 좋은 습관이므로, 값이 다른 경우 변수를 다르게 선언하기로 하자!
profile
개발자 헤이린

0개의 댓글