모던 자바스크립트 튜토리얼
ko.javascript.info
변수와 상수
대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작한다.
변수는 이러한 정보를 저장하는 용도로 사용된다.
변수
변수(variable)는 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소' 다.
자바스크립트에선 let 키워드를 사용해 변수를 생성
let message; //message라는 이름의 변수 생성(선언)
message = 'Hello'; // 할당연산자 "="를 사용해 변수안에 문자열 데이터를 저장
alert(message); // Hello변수 선언과 동시에 값 할당을 한 줄에 작성할 수도 있다.
let message = 'Hello!';
alert(message) // Hello!한줄에 여러 변수를 선언하는 것도 가능하다.
let user = 'crewd', age = 26, message = 'Hello';이렇게 작성 하면 코드는 짧아보이지만 가독성이 떨어지기때문에 권장하는 방법은 아니다.
한줄에 한개의 변수만 작성하는 것이 가독성이 좋다.
let user = 'crewd';
let age = 26;
let message = 'Hello';아래와 같은 방식으로도 변수를 정의할 수 있다.
let user = 'crewd',
age = 26,
message = 'Hello';let user = 'crewd'
, age = 26
, message = 'Hello';위에 소개한 방식들에 기술적인 차이는 없으니 원하는 방식으로 코드를 작성하자.
✔ let 대신 var
var는 let과 거의 동일하게 동작하지만 var는 오래된 방식이다.
이에 대해서는 추후 자세히 다루도록 하겠다.
변수의 값은 어떤 값이든지 넣을 수 있고 원하는 만큼 값을 변경 할 수도 있다.
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
변수 명명 규칙
자바스크립트에선 변수 명명시 두 가지 제약 사항이 있다.
1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
2. 첫글자는 숫자가 될 수 없다.
여러 단어를 조합하여 변수명을 만들 땐 카멜 표기법(camelCase)이 흔히 사용된다. 카멜 표기법은 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성한다.
✔ 대소문자 구별
apple과 AppLE은 서로 다른 변수다.
✔ 비 라틴계 언어도 변수명에 사용할 수 있지만 권장하진 않는다.
키릴문자, 한글, 심지어 상형문자 등 모든 언어를 변수명에 사용할 수 있다.
그러나 영어를 변수명에 사용하는 것이 국제적인 관습
❗ 예약어
예약어 목록에 있는 단어는 변수명으로 사용 할 수 없다.
이 단어들은 자바스크립트 내부에서 이미 사용 중이기 때문이다.
예시: let, class, return, function ...
❗ use strict 없이 할당하기
변수는 대개 정의되어 있어야 사용할 수 있다. 그러나 예전에는 let 없이도 단순하게 값을 할당해 변수를 생성하는 것이 가능했다.
use strict를 쓰지 않으면 과거 스크립트와 호환성을 유지할 수 있기 때문에 여전히 이 방식을 사용할 수 있다.num = 5; // 변수 'num'이 정의되어있지 않더라도, 단순 할당만으로 변수가 생성된다. alert(num); // 5그러나 엄격모드에서는 에러를 발생시키기 때문에 이러한 방법은 지양하도록 하자.
상수
변화하지 않는 변수를 선언할 땐, let 대신 const를 사용
const로 선언한 변수를 '상수(constant)'라고 부른다.
상수는 재할당 할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다.
const myBirthday = '1996.03.25';
myBirthday = '2021.01.04'; // error, can't reassign the constant!대문자 상수
기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습이다.
이런 상수는 대문자와 밑줄로 구성된 이름으로 명명한다.
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";
// 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었다.
let color = COLOR_ORANGE;
alert(color); // #FF7F00대문자 상수로 만들어 사용할 때의 장점
COLOR_ORANGE는#FF7F00보다 기억하기 훨씬 쉽다.COLOR_ORANGE를 사용하면#FF7F00를 사용하는 것 보다 오타를 낼 확률도 낮다.COLOR_ORANGE가#FF7F00보다 훨씬 유의미하므로, 코드 가독성이 증가한다.
대문자 상수는 '하드 코딩'한 값의 별칭을 만들 때 사용하면 된다.
바람직한 변수 명
- 사람이 읽을 수 있는 이름을 사용
- 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나
a,b,c와 같은 짧은 이름은 피하자. - 최대한 서술적이고 간결하게 명명하자.
data와value는 안좋은 예시다. - 자신만의 규칙이나 소속된 팀의 규칙을 따르자. 만약 사이트 방문객을 'user’라고 부르기로 했다면, 이와 관련된 변수를 currentVisitor나 newManInTown이 아닌 currentUser나 newUser라는 이름으로 지어야 한다.
✔ 재사용 아니면 새로 만들기?
변수를 재사용하면 변수 선언에 쏟는 노력을 좀 덜 순 있겠지만, 디버깅에 열 배 더 많은 시간을 쏟아야 한다.
변수를 추가하는 것은 악습이 아니라 좋은 습관이다.
모던 자바스크립트 압축기(minifier)와 브라우저는 코드 최적화를 잘해준다. 변수를 추가한다고 해서 성능 이슈가 생기지 않는다. 값이 다른 경우, 변수를 다르게 선언해 주면 코드 최적화에 도움이 될 수도 있다.
요약
var, let, const를 사용해 변수를 선언 하고 선언된 변수에는 데이터를 저장 할 수 있다.
let: 모던한 변수 선언 키워드var: 오래된 변수 선언 키워드이며 잘 사용하지 않는다.const: 변수의 값을 변경 할 수 없는 상수 선언 키워드
변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 한다.
✔ 과제
변수 가지고 놀기
중요도 : 2
admin과name이라는 변수를 선언하세요.name에 값으로"Jhon"을 할당해 보세요.name의 값을admin에 복사해 보세요.admin의 값을alert창에 띄워보세요."Jhon"이 출력되어야 합니다.
해답
let admin; let name; name = "Jhon"; admin = name; alert(admin);
대문자 상수 올바르게 사용하기
중요도 : 4
아래 코드를 평가해 보시기 바랍니다.
const birthday = '18.04.1982';
const age = someCode(birthday);위 코드의 상수 birthday는 태어난 날짜 정보를 담고 있습니다. age라는 상수는 나이에 관한 값을 담고 있는데 birthday를 조작하여 그 값을 도출합니다(생일을 이용하여 나이를 도출하는 코드는 간결성을 위해 여기선 언급하지 않겠습니다. 이 문제에서 해당 코드가 중요한 역할을 하지 않기도 합니다).
이런 상황에서 birthday를 대문자 상수로 바꾸는 것이 적절할까요? age 역시 대문자 상수로 바꾸는 것이 괜찮은 선택일까요?
const BIRTHDAY = '18.04.1982'; // 대문자 상수로 바꿔도 괜찮을까요?
const AGE = someCode(BIRTHDAY); // 대문자 상수로 바꿔도 괜찮을까요?해답
대문자 상수는 ‘하드 코딩한’ 값의 별칭을 만들 때 주로 사용한다. 실행 전에 이미 값을 알고 있고, 코드에서 직접 그 값을 쓰는 경우에 사용
birthday가 그런 경우다. 따라서 birthday는 대문자 상수로 적합
그러나 age는 런타임에 평가된다. 올해의 나이와 내년의 나이는 다르기 때문에 age는 대문자 상수에 적합하지 않다.
