[모던 JavaScript Part 1] 2장 4

Kim Young Jae·2022년 9월 21일
0
post-thumbnail

이 글은 모던 자바스크립트 튜토리얼 2장 4 를 읽고 정리한 글입니다.

변수

변수는 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'입니다.
SNS 앱을 구축하는 경우 사용자의 이름이나 정보를 저장할 때 변수를 사용합니다.

자바스크립트에선 var, let, const 키워드를 사용해 변수를 생성합니다

let message;
message = 'Hello'; //문자열을 저장합니다.

console.log(message); //변수에 저장된 값을 보여줍니다.

한줄에 여러 변수를 선언하는 것도 가능합니다.

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

코드가 짧아 보이긴 하지만 권장하는 방법은 아닙니다. 가독성을 위해 한 줄에는 하나의 변수를 작성해주세요.

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

var 키워드를 사용하여 변수를 생성할 수 있습니다.

var message = 'Hello';

하지만 var는 '오래된' 방식입니다. 미묘한 차이점은 추후에 자세히 다루겠습니다.

현실 속의 비유

'상자'안에 데이터를 저장하는데, 이 상자에는 특별한 이름표가 붙어있다고 상상하면 좀 더 쉽게 이해할 수 있습니다.
예를 들어, 변수 messagemessage 라는 이름표가 붙어있는 상자에 "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 message = "This";
// 'let'을 반복하면 에러가 발생합니다.
let message = "That"; // SyntaxError: 'message' has already been declared

변수 명명 규칙

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

  • 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈수 있습니다.
  • 첫 글자는 숫자가 될 수 없습니다.

다음은 유효한 변수명의 예시입니다.

let userName;
let test123;

여러 단어를 조합하여 변수명을 만들 땐 카멜 표기법이 흔히 사용됩니다. 카멜 표기법은 단어를 차례대로 나영하면 첫 단어를 제외한 각 단어의 첫글자를 대문자로 작성합니다.

상수

변하지 않는 변수를 선언할 땐 const를 사용합니다.
상수로 선언된 변수는 재할당할 수 없으므로 변경하려고 하면 에러가 발생합니다

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // error, can't reassign the constant!

변숫값이 절대 변경되지 않을 것이라 확신하면, 값이 변경되는 것을 방지하기 위해 const를 사용해 변수를 선언하는 것이 좋습니다.

정리

  • const, let 은 비슷하지만, let은 값을 변경할 수 있고, const는 불가능하다.
  • 변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어야 한다.
profile
프론트엔드 뭐시기 주로 하는 사람

0개의 댓글