일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 스프링
- PM부트캠프
- 자바스크립트
- PO
- UX
- 스프링부트
- 코드스테이츠
- 서비스 기획
- 쇼핑몰
- SpringBoot
- 데이터분석
- db
- jquery
- 회고
- tag
- html
- javascript
- 서비스 기획자
- UI
- 서비스기획
- 생활코딩
- 프로덕트 매니저
- 회고록
- 코딩
- 프로젝트 매니저
- CSS
- kpt회고
- PM
- 서비스분석
- 데이터
- Today
- Total
콘텐츠기획자의 IT입문서
변수와 상수 본문
변수 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으로 고정
'JavaScript' 카테고리의 다른 글
브라우저와 상호작용하는 함수 3 (0) | 2022.06.24 |
---|---|
자바스크립트 자료형 10 (0) | 2022.06.24 |
다시 기초부터 복습하는 자바스크립트 (0) | 2022.06.22 |
jQuery - 타임세일 구현하기 (0) | 2022.06.17 |
jQuery - 현재 주소에 따라 카테고리 스타일 바꾸기 (0) | 2022.06.16 |