대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작한다.
예)
- 온라인 쇼핑몰 - 판매 중인 상품이나 장바구니 등의 정보
- 채팅 애플리케이션 - 사용자 정보, 메시지 등의 정보
변수는 이러한 정보를 저장하는 용도로 사용된다.
변수
변수(variable)는 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소' 이다. 온라인 쇼핑몰 애플리케이션을 구축하는 경우 상품이나 방문객 등의 정보를 저장할 때 변수를 사용한다.
자바스크립트에선 let 라는 키워드를 사용해 변수를 생성한다.
아래의 문(statement)은 message 라는 이름을 가진 변수를 생성(선언)한다.
let message;이제 할당 연산자 = 를 사용해 변수 안에 데이터를 저장해본다.
let message;
message = 'Hello'; // 문자열을 저장한다.문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있게 되었다.
let message;
message = 'Hello'!;
alert(message); // 변수에 저장된 값을 보여준다.아래와 같이 변수선언과 값 할당을 한 줄에 작성할 수도 있다.
let message = 'Hello'; // 변수를 정의하고 값을 할당한다.
alert(message); // Hello한 줄에 여러 변수를 선언하는 것도 가능하다.
let use = '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
만들어진 지 오래된 스크립트에서 let 대신 var 라는 키워드를 발견하는 경우가 있다.
var message = 'Hello';var 는 let 과 거의 동일하게 동작한다. 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 world';
// 이제 두 변수는 같은 데이터를 가진다.
alert(Hello); // Hello world!
alert(message); // Hello world!⚠️ 변수를 두 번 선언하면 에러가 발생한다.
변수는 한 번만 선언해야 한다.
같은 변수를 여러 번 선언하면 에러가 발생한다.
let message = "This";
// 'let'을 반복하면 에러가 발생한다.
let message = "That"; // SyntaxError: 'message' has already been declared따라서 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용해 참조해야 한다.
변수 명명 규칙
자바스크립트에선 변수 명명 시 두 가지 제약 사항이 있다.
- 변수명에는 오직 문자와 숫자, 그리고 기호
$와_만 들어갈 수 있다. - 첫 글자는 숫자가 될 수 없다.
다음은 유효한 변수명의 예시이다.
let userName;
let test123;여러 단어를 조합하여 변수명을 만들 땐 '카멜 표기법(vamelCase)'가 흔히 사용된다. 카멜 표기법은 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성한다.
예) myVeryLongName
달러 기호 '$' 와 밑줄 '_' 를 변수명에 사용할 수 있다는 점이 조금 특이하다. 이 특수 기호는 일반 글자처럼 특별한 의미를 지니진 않는다.
let $ = 1;
let _ = 2;
alert($ + _); // 3아래는 잘못된 변수명의 예시❗
let 1a; // 변수명은 숫자로 시작해선 안된다.
let my-name; // 하이픈 '-'은 변수명에 올 수 없다.❗대소문자 구별
apple 와 AppLE 은 서로 다른 변수이다.
❗비 라틴계 언어도 변수명에 사용할 수 있지만 권장하지 않는다.
영어를 변수명에 사용하는 것이 국제적인 관습이므로, 변수명은 영어로 사용하길 권장한다.
✅ 예약어
예약어 목록에 있는 단어는 변수명으로 사용할 수 없다. 이 단어들은 자바스크립트 내부에서 이미 사용 중이기 때문이다.
예약어 예시❕ 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 myBrithday = '18.94.1982';
myBrithday = '01.01.2001'; // error, can't reassign the constant!변숫값이 절대 변경되지 않을 것이라 확신하면, 값이 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 const 를 사용해 변수를 선언하도록 하자.
대문자 상수
기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습이다.
이런 상수는 대문자와 밑줄로 구성된 이름으로 명명한다.
예시로 웹에서 사용하는 색상 표기법인 16진수 컬러 코드에 대한 상수를 만들어보겠다.
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보다 훨씬 유의미하므로, 코드 가독성이 증가한다.
그렇다면 언제 일반적인 방식으로 상수를 명명하고, 언제 대문자를 사용해서 명명해야 하는 걸까?
'상수'는 변수의 값이 절대 변하지 않음을 의미한다. 그중에는(빨간색을 나타내는 16진수 값처럼) 코드가 실행되기 전에 이미 그 값을 알고 있는 상수도 있고, 런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않는 상수도 있다.
const pageLoadTime = /* 웹페이지를 로드하는데 걸린 시간 */;pageLoadTime 의 값은 페이지가 로드되기 전에는 정해지지 않기 때문에 일반적인 방식으로 변수명을 지었다. 하지만 이 값은 최초 할당 이후에 변경되지 않으므로 여전히 상수이다.
정리하자면, 대문자 상수는 '하드 코딩한'값의 별칭을 만들 때 사용하면 된다.
바람직한 변수명
변수에 관한 매우 중요한 사실은 한 가지 더있다.
변수명은 간결하고, 명확해야 한다. 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 한다.
변수명은 이름을 짓는 것은 프로그래밍에서 가장 웅요하고 복잡한 기술 중 하나이다. 변수명만 슬쩍 봐도 초보자가 코드를 작성했는지, 노련한 개발자가 작성했는지 알 수 있다.
실제 프로젝트에선 맨 처음부터 완전히 독립적인 코드를 작성하기보다 기존 코드의 틀을 변경하고 확장하는데 대부분의 시간을 보낸다. 작성했던 코드를 얼마 후에 다시 봤을 때, 정보에 알맞은 이름이 적혀있으면 정보를 더 쉽게 찾을 수 있다. 다시 말해, 변수가 올바른 이름을 가졌을 때 말이다.
그러므로 변수를 선언하기 전에 내가 지은 변수의 이름이 괜찮은지 숙고하는것이 좋다.
userName이나shoopingCart처럼 사람이 읽을 수 있는 이름을 사용- 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나
a,b,c와 같은 짧은 이름 피하기 - 최대한 서술적이고 간결하게 명명하기.
date와value는 나쁜 이름의 예시. 이런 이름은 아무것도 설명해주지 않는다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이러한 이름을 사용 - 자신만의 규칙이나 소속된 팀의 규칙을 따르기. 만약 사이트 방문객을
user라 부르기로 했다면, 이와 관련된 변수를currentVistor이나newManInTown이 아닌currentUser나newUser라고 지어야 한다.
✅ 요약
var, let, const를 사용해 변수를 선언할 수 있다. 선언된 변수엔 데이터를 저장할 수 있다.
let– 모던한 변수 선언 키워드var– 오래된 변수 선언 키워드. 잘 사용하지 않는다.const–let과 비슷하지만, 변수의 값을 변경할 수 없다.
변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 한다.
✅ 과제
변수 가지고 놀기
admin과name이라는 변수를 선언하세요.name에 값으로"John"을 할당해 보세요.name의 값을admin에 복사해 보세요.admin의 값을alert창에 띄워보세요. "John"이 출력되어야 합니다.
해답:
let admin, name;
name = 'John';
admin = name;
alert(admin); // "John"대문자 상수 올바로 사용하기
const birthday = '18.04.1982';
const age = someCode(birthday);위 코드의 상수 birthday 는 태어난 날짜 정보를 담고 있다. age 라는 상수는 나이에 관한 값을 담고 있는데 birthday 를 조작하여 그 값을 도출한다.
이런 상황에서 birthday 를 대문자 상수로 바꾸는 것이 적절할까? age 역시 대문자 상수로 바꾸는 것이 괜찮은 선택일까?
해답:
대문자 상수는 '하드 코딩한' 값의 별칭을 만들 때 주로 사용한다. 실행 전에 이미 값을 알고 있고, 코드에서 직접 그 값을 쓰는 경우에 사용한다.
위 코드에서 birthday 가 그런 경우이다. 따라서 대문자 상수로 적합하다.
반면, age는 런타임에 평가됩니다. 올해의 나이와 내년의 나이는 다르다. 상수는 코드가 실행될 때마다 바뀌지 않아야 하는 값이란걸 느낄 수 있다.
이런 관점에서 보았을 때, age 는 birthday 보다 덜 상수스럽다. 따라서 age 는 대문자 상수에 적합하지 않다.
