콘텐츠기획자의 IT입문서

변수와 상수 본문

JavaScript

변수와 상수

lazy_cat 2022. 6. 24. 14:13

변수 LET

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

따라서 변수명은 간결하고, 명확해야 하며, 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 한다.
자바스크립트에서 let 키워드를 사용해 변수를 생성한다. (과거에는 'var'을 사용했다.)

변수명을 정하기 위한 규칙

  • userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용하세요.
  • 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피하세요.
  • 최대한 서술적이고 간결하게 명명해 주세요. data와 value는 나쁜 이름의 예시입니다. 이런 이름은 아무것도 설명해주지 않습니다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용합시다.
  • 자신만의 규칙이나 소속된 팀의 규칙을 따르세요. 만약 사이트 방문객을 'user’라고 부르기로 했다면, 이와 관련된 변수를 currentVisitor나 newManInTown이 아닌 currentUser나 newUser라는 이름으로 지어야 합니다.


변수는 한 번만 선언해야 하며 (두 번 이상 선언하면 에러 발생)
함수형 프로그래밍 언어는 변숫값 변경을 금지하고 있다.

//1. 변수 선언
let message;

//2. 문자열 저장
message = 'Hello!';

//3. 변수에 저장된 값을 보여줌
alert(message);

 

그렇다면 왜 재사용을 금지할까?

1) 변수를 재사용하면 변수 선언에 쏟는 노력을 좀 덜 순 있겠지만, 디버깅에 열 배 더 많은 시간을 쏟아야 한다.

2) 변수를 추가한다고 해서 성능 이슈가 생기지 않음. 오히려 값이 다른 경우, 변수를 다르게 선언해 주면 코드 최적화에 도움이 될 수도 있다.

 

 



한줄에 여러 변수를 선언할 수도 있다!

이때, 가독성을 위해 한 줄에 한개의 변수를 작성하는 것이 좋다.

(나중에 내가 작성한 코드도 다시보면 헷갈리기도 하더라.. ^_ㅠ)

//한줄로 표기
let user = 'John', age = 25, message = 'Hello';

//가독성을 고려한 표기
let user = 'John',
	age = 25,
    message = 'Hello';

 


변수 명명 규칙

  • 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
  • 첫 글자는 숫자가 될 수 없다.
  • 예약어 목록에 있는 단어는 변수명으로 사용할 수 없다.
    (자바스크립트 내부에서 이미 사용 중이기 때문에!)

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

 


 

상수 CONST

변화하지 않는 변수를 선언할 때 상수를 사용한다.

 

대문자 상수

관습적으로 기억하기 힘든 값을 변수에 할당해 별칭으로 사용한다.

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

 

얼핏 기억하기로는 UI/UX 디자인에 사용되는 컬러코드를 설정해두고 사용하는 것으로 알고 있다..!

const COLOR_ORANGE = "#FF7F00";

let color = COLOR_ORANGE;
alert(color);


대문자로 상수를 만들어 사용하는 이유

  • COLOR_ORANGE는 "#FF7F00"보다 기억하기가 훨씬 쉽다.
  • COLOR_ORANGE를 사용하면 "#FF7F00"를 사용하는 것보다 오타를 낼 확률이 낮다.
  • COLOR_ORANGE가 #FF7F00보다 훨씬 유의미하므로, 코드 가독성이 증가한다.

 

그렇다면 언제 일반적인 방식으로 상수를 명명하고, 언제 대문자를 사용해서 명명해야 할까?

'상수’는 변수의 값이 절대 변하지 않음을 의미한다.

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

가령 pageLoadTime의 값은 페이지가 로드되기 전에는 정해지지 않기 때문에 일반적인 방식으로 변수명을 짓는다.

하지만 이 값은 최초 할당 이후에 변경되지 않으므로 여전히 상수이다.

정리하자면, 대문자 상수는 하드 코딩한 값의 별칭을 만들 때 사용하면 된다!

 

 


*하드코딩 = 변수의 값을 고정하여 코딩하는 것.

//사용자의 나이를 입력 받아 이벤트를 처리할때
int age = 20; // 사용자의 나이를 20으로 고정

 



Comments