변수와 값

docs.scrimba.com

체크아웃 페이지를 만들고 있다고 가정해봅시다. 상품 가격이 세 곳에 표시됩니다: 상품 라인, 누계 합계, 확인 창. 19.99를 손으로 세 곳에 모두 입력하면 판매는 오후 내내 찾기 및 바꾸기 작업이 됩니다. 하지만 한 번 어떤 이름으로 저장하고 한 곳에서 변경하면 그것을 사용하는 모든 곳이 자동으로 업데이트됩니다. 그 이름이 변수이며, 이 장에서는 변수를 만드는 방법, 언제 잠금하는지, 그리고 이름을 어떻게 지을지에 대해 다룹니다.

값 저장하기

**변수**는 나중에 다시 사용할 수 있도록 값에 붙이는 이름입니다. let, 이름, =, 저장할 값 순서로 만듭니다:

let userName = "김민준";
console.log(userName); // 김민준

이 줄은 다음을 의미합니다: 텍스트 "김민준"을 가져와서 userName이라는 이름으로 기억하세요. 그 이후로 userName을 쓸 때마다 JavaScript는 저장한 것을 돌려줍니다.

=를 "이 값을 이 이름으로 저장하세요"라고 읽으세요. 이것은 수학 시간의 등호가 아닙니다. 양쪽이 이미 같은 등호가 아니라 명령입니다: 오른쪽의 값을 가져와서 왼쪽의 이름으로 보관하세요.

저장 명령이기 때문에 나중에 다시 생각할 수 있습니다. 이름과 =를 다시 새로운 값으로 쓰면 JavaScript는 가장 최근 것을 유지합니다:

let score = 0;
score = 10;
console.log(score); // 10

첫 번째 줄은 score를 만들고 0을 넣습니다. 두 번째 줄은 새로운 값을 줍니다. 두 번째 let이 없습니다. score가 이미 존재하기 때문에 새로 만드는 것이 아니라 업데이트하는 것입니다.

변수는 값에 **바인딩**된 이름입니다. let으로 선언하고 할당 연산자 =로 값을 설정합니다:

let total = 0;
total = 42;
console.log(total); // 42

=는 할당이지, 비교가 아닙니다. 오른쪽의 식을 계산한 다음 결과를 왼쪽의 이름으로 저장합니다. 이것이 =가 "이 값을 할당하세요"를 의미하지 절대 "같음"을 의미하지 않는 이유입니다. 연산자에서 만날 비교는 다른 기호인 ===입니다.

let으로 선언하면 이름을 만들고, 다시 할당하면 값을 업데이트합니다. 변수당 let을 한 번만 사용합니다. 그 후에는 왼쪽의 이름만으로 충분합니다:

let itemPrice = 19.99;
itemPrice = 24.99;
console.log(itemPrice); // 24.99

오른쪽의 값은 JavaScript가 가지고 있는 데이터 타입 중 하나일 수 있습니다: 텍스트, 숫자, 불린값. 변수는 어느 것이든 상관없습니다. 마지막으로 할당한 것을 가집니다.

변수는 값에 바인딩된 식별자(코드의 이름)입니다. =는 할당 연산자입니다: 오른쪽 식을 계산하고 결과를 왼쪽의 이름에 바인딩합니다. 절대 같음을 검사하지 않으며, 고정된 상자에 값을 복사하지 않습니다. 값을 가리키는 이름입니다.

let total = 0;
total = 42;
console.log(total); // 42

재할당은 새로운 변수를 만들지 않습니다. 기존 바인딩을 다시 가리킵니다. 그 구별은 숫자와 문자열 같은 원시값에서는 보이지 않습니다. 각 값이 분리되어 있고 자기 포함적이기 때문입니다. 변수가 객체처럼 공유되는 것을 가리킬 때 중요하기 시작합니다. 왜냐하면 그러면 두 이름이 같은 값을 가리킬 수 있고 하나를 통한 변경이 다른 것을 통해서도 나타나기 때문입니다. 객체가 도착할 때 그것을 충분히 볼 것입니다. 지금은 "이름이 값을 가리킨다"는 개념을 유지하세요.

=가 하지 않는 또 다른 한 가지: 값을 제자리에 잠금하지 않습니다. let score = 0은 "일단 score를 0에 가리키세요"라고 말하고, 다음 줄은 그것을 다른 곳에 가리킬 자유가 있습니다. 바인딩을 다시 가리킬 수 있는지의 여부가 let과 const의 차이입니다. 다음을 보세요.

Juno값 저장하기 변수는 재사용하려는 값의 이름이고 let name = value로 만듭니다. =를 "이 값을 이 이름으로 저장하세요"로 읽으세요. 수학 시간의 등호가 아닙니다. 나중에 변경하려면 두 번째 let 없이 이름과 =를 다시 쓰고 JavaScript는 가장 최근 값을 유지합니다.

Juno값 저장하기let으로 선언하면 이름을 만들고 =로 할당하면 값을 그 아래 저장합니다. =는 할당이지 비교가 아니므로 절대 "같음"을 의미하지 않습니다. 변수당 let을 한 번만 쓰세요. 그 후 이름만으로 가진 값을 업데이트합니다.

Juno값 저장하기=는 이름을 값에 바인딩합니다. 상자에 복사하거나 같음을 검사하지 않습니다. 재할당은 새로운 변수를 만드는 것이 아니라 기존 바인딩을 다시 가리킵니다. 그것은 숫자와 문자열에서는 보이지 않고 이름이 공유된 것을 가리킬 때 시작하므로 객체가 나타나기 전에 "이름이 값을 가리킨다"는 개념을 기억하세요.

let vs const

변수를 만드는 두 가지 단어가 있습니다: let과 const. let을 봤습니다. 값이 설정 후 절대 변경되지 않아야 할 때 const를 사용하세요:

const taxRate = 0.2;
console.log(taxRate); // 0.2

세율은 고정되어 있으므로 const가 맞습니다: "이것은 설정되었고 실수로 변경되지 않기를 원합니다"라고 말합니다. const를 재할당하려고 하면 JavaScript는 에러로 막습니다. 이것은 도움이 되는 방책입니다.

먼저 const에 도달하세요. 점수가 올라가거나 합계에 더하는 것처럼 값이 변할 것임을 알 때만 let을 사용하세요. 값이 전체 수명 동안 같으면 const는 그것을 말하고 보호합니다.

const currency = "USD";
let itemsInCart = 0;
itemsInCart = 3;
console.log(itemsInCart); // 3

통화는 변경되지 않으므로 const입니다. 장바구니 수는 변할 것이므로 let입니다.

JavaScript는 변수를 선언하는 두 가지 방법을 제공하며, 선택은 값이 재할당될지에 대한 것입니다. const는 상수 바인딩을 선언합니다: 한 번 할당하면 그 이름을 새로운 값에 가리킬 수 없습니다.

const taxRate = 0.2;
taxRate = 0.25; // TypeError: Assignment to constant variable.

let은 재할당을 허용하고 const는 금지합니다. 코드를 깨끗하게 유지하는 규칙은 기본적으로 const에 도달하고 재할당해야 할 때만 let을 사용하는 것입니다. 대부분의 변수는 한 번 설정되고 여러 번 읽혀집니다. 그래서 대부분은 const여야 합니다.

const currency = "USD";
let runningTotal = 0;
runningTotal = 19.99;
console.log(runningTotal); // 19.99

const는 값이 특별한 것이 아닙니다. 코드를 읽는 모든 사람, 다음 주의 당신 포함하게 이름이 움직이지 않을 것이라는 신호입니다. 그 신호는 프로그램을 따라가기 쉽게 만듭니다. const는 제자리에 있을 것을 믿을 수 있기 때문입니다.

let과 const 모두 바인딩(이름과 값 사이의 링크)을 선언합니다. 차이는 그 바인딩이 재할당될 수 있는지 여부입니다. const는 바인딩을 고정합니다: 초기 할당 후, 이름을 새로운 값에 가리키는 것은 TypeError입니다.

const taxRate = 0.2;
taxRate = 0.25; // TypeError: Assignment to constant variable.

const를 기본값으로 하고 재할당이 실제일 때만 let으로 떨어지세요. 이것은 문체적 성가심이 아닙니다. const는 읽으면서 의존할 수 있는 사실이고, 당신 아래에서 변할 수 있는 이름이 하나 적으며, 그것이 버그가 살 수 있는 곳을 좁힙니다.

초기에 말할 가치가 있는 미묘함: const는 바인딩을 고정하지만 내용은 고정하지 않습니다. 이름을 다시 가리키는 것을 막지만 값이 내부 부분이 있는 것이면 그 부분들은 여전히 변할 수 있습니다. 숫자나 문자열은 변할 내부 부분이 없으므로 const는 "이 값이 고정됨"처럼 정확히 작동합니다. 하지만 객체와 함께 const는 이름이 같은 객체를 가리키는 것을 보장할 뿐입니다. 객체 자신의 내용은 여전히 편집 가능합니다. 그 간격이 사람들을 놀라게 하고, 그것은 중점 디버깅보다 이제 더 쉽게 흡수됩니다. 그래서 객체가 직접 돌아옵니다.

const currency = "USD";
let runningTotal = 0;
runningTotal = 19.99;
console.log(runningTotal); // 19.99

세 번째, 더 오래된 키워드가 있습니다. 기존 코드에서 만날 것입니다: var. 사용하지 마세요. 그것은 버그를 일으키는 두 가지 점에서 let과 다릅니다. 첫째, var는 함수 스코프입니다: let과 const가 존중하는 { } 블록을 무시하므로 블록 내에 선언된 var는 전체 주변 함수로 새어나가는 반면 let과 const는 블록 스코프이고 가장 가까운 { } 안에 머물러 있습니다. 둘째, var는 호이스트됩니다: 선언이 스코프의 맨 위로 옮겨진 것으로 취급되므로 var 이름은 선언하는 줄 전에 존재하며 undefined를 가집니다. 이것은 실수를 잡기보다 숨깁니다.

let과 const도 호이스트되지만 선언 줄 전에 도달하면 조용하게 undefined를 주기 보다 던집니다. 그 초기 창은 일시적 사각지대라고 불리고 그것이 만드는 에러는 특징입니다. 조용한 버그를 큰 것으로 바꾸기 때문입니다. 짧은 버전: 기본적으로 const를 쓰고, 반드시 재할당해야 할 때 let을 사용하며, var를 오래된 코드 유지에 대한 읽기 전용 지식으로 취급하세요.

Junolet vs const 절대 변경되지 않아야 할 값에 const를 사용하고, 변할 값에는 let을 사용하세요. 먼저 const에 도달하고 값이 변해야 할 때만 let으로 전환하세요. const를 재할당하면 에러가 나고, 그것은 방책이 하는 일입니다.

Junolet vs constconst는 재할당을 금지하고 let은 허용합니다. const를 기본값으로 하고 값이 변해야 할 때만 let에 도달하세요. const는 다음 읽는 사람에게 이 이름이 움직이지 않을 것이라고 말합니다. 대부분의 변수는 한 번 설정되고 여러 번 읽혀집니다. 그래서 대부분은 const여야 합니다.

Junolet vs constconst는 바인딩을 고정하지만 내용은 고정하지 않으므로 이름을 재할당하는 것은 TypeError이지만 가리키는 객체는 여전히 편집될 수 있습니다. const를 기본값으로 사용하고, 실제 재할당에만 let을 사용하며, 오래된 var를 함수 스코프이고 버그를 숨기는 방식으로 호이스트되므로 읽기 전용 지식으로 취급하세요. 바인딩 대 내용 간격이 사람들을 잡으므로 객체가 도착할 때를 위해 그것을 기억하세요.

변수 이름 짓기

변수 이름에는 몇 가지 규칙이 있습니다. 문자, 숫자, _, $를 사용할 수 있지만 숫자로 시작할 수 없으며 공백을 포함할 수 없습니다:

let firstName = "김민준";
let item2 = "책";

이름은 대소문자 구분이므로 firstName과 firstname은 두 개의 다른 변수입니다. 대소문자를 틀리는 것은 초기 실수이므로 이름을 일관되게 유지하는 것이 도움됩니다.

JavaScript 개발자들이 사용하는 스타일을 **카멜케이스**라고 합니다: 소문자로 시작하고 나중 각 단어의 첫 글자를 대문자로 하고 공백은 없습니다. 그래서 firstName, itemPrice, isLoggedIn입니다.

let itemPrice = 19.99;
let isLoggedIn = true;

규칙 너머로, 그들이 가진 것을 말하는 이름을 목표로 하세요. price가 p를 이기고 userName이 x를 이깁니다. 코드를 쓰는 것보다 훨씬 더 많이 읽을 것이고, 명확한 이름이 그것을 읽을 수 있게 만드는 것입니다.

유효한 이름의 규칙: 문자, 숫자, _, $를 포함할 수 있고, 숫자로 시작할 수 없으며, 공백이나 let 같은 예약어를 포함할 수 없습니다. 이름은 대소문자 구분이므로 total과 Total은 분리된 변수입니다.

그 규칙 내에서 관례는 **카멜케이스**입니다: 소문자 첫 단어, 각 다음 단어 대문자, 구분자 없음.

let firstName = "김민준";
let itemPrice = 19.99;
let isLoggedIn = true;

관례는 언어에 의해 강제되지 않지만 당신이 작업할 모든 코드베이스에서 강제됩니다. 처음부터 따르세요. 불린은 is 또는 has 접두사(isLoggedIn, hasDiscount)로 잘 읽혀지며, 한눈에 값이 참 또는 거짓임을 신호합니다.

이름은 문서입니다. daysUntilExpiry는 다음 읽는 사람에게 값의 의미를 말합니다. d는 그들이 찾아다니게 합니다. 기술적인 이름은 몇 번의 키 입력이 들고 실제 시간을 절약합니다. 그래서 그들에게 소비하세요.

어휘 규칙: 유효한 식별자(코드의 이름)는 문자, 숫자, _, $를 포함할 수 있고, 숫자로 시작할 수 없으며, 예약어(let, const, return 등)가 아닙니다. 식별자는 대소문자 구분이므로 total과 Total은 구별됩니다.

맨 위에 겹쳐진 관례는 변수에 대한 카멜케이스이며, 언어가 강제하지 않더라도 협상 불가능한 것으로 취급할 가치가 있습니다. 도구, 팀원, 모든 인기 있는 스타일 가이드는 그것을 가정하므로 이탈은 이득 없이 마찰을 더합니다.

const firstName = "김민준";
const itemPrice = 19.99;
const isLoggedIn = true;

더 높은 가치 습관은 의미를 위해 이름 짓는 것입니다. 이름은 가장 싼 문서이고 가장 정확하게 머물 가능성이 높습니다. 그것이 설명하는 값에 앉아 있기 때문입니다. remainingCredits는 리팩토링을 살아남지만 댓글 "남은 크레딧"은 그렇지 않을 수 있습니다. 불린은 예, 아니오 질문으로 최고로 읽힙니다(isActive, hasAccess), 그리고 변경 후 거짓말하는 이름을 피하세요. 개념적으로 계속 더하는 const total 같은 것. 의미가 드리프트하면 이름을 바꾸세요. 명확한 이름 짓기는 이 장에서 가장 높은 레버리지 습관이고, 그것은 무료입니다.

Juno변수 이름 짓기 이름은 문자, 숫자, _, $를 사용할 수 있지만 숫자로 시작하거나 공백을 포함할 수 없습니다. 이름은 대소문자 구분이므로 firstName과 firstname은 다릅니다. itemPrice처럼 카멜케이스를 사용하고, 그들이 가진 것을 말하는 이름을 선택하세요. p보다 price입니다.

Juno변수 이름 짓기 유효한 이름은 문자, 숫자, _, $를 사용하고, 숫자로 시작하지 않으며, 대소문자 구분입니다. 관례는 카멜케이스이고, 언어가 강제하지 않더라도 모든 코드베이스가 강제합니다. 처음부터 따르세요. 기술적인 이름은 정확하게 유지되는 문서이므로 d 위의 daysUntilExpiry에 키 입력을 소비하세요.

Juno변수 이름 짓기 식별자는 문자, 숫자, _, $를 허용하고, 숫자로 시작할 수 없으며, 예약어가 아니고, 대소문자 구분입니다. 카멜케이스를 사용하세요. 언어가 강제하지 않지만 모든 도구와 팀원이 그것을 가정합니다. 의미를 위해 이름 짓기는 여기서 가장 높은 레버리지 습관이고, 그것은 비용이 없으므로 r 위의 remainingCredits를 기본값으로 만드세요.

여기서 변수는 어디로 가는가

변수는 다른 모든 것이 앉아 있는 기초입니다: 값은 도달할 수 있는 이름을 가질 때까지 유용하지 않습니다. 이제 let으로 값을 저장하고, const로 값을 잠금하고, 좋은 이름을 짓는 세 가지 중요한 움직임을 가지고 있고, 여기서부터 작성하는 모든 프로그램에서 이 세 가지를 사용할 것입니다.

다음으로 데이터 타입에서 값 자체를 살펴볼 것입니다: 저장한 텍스트, 숫자, 불린값, 그리고 각각이 그 방식으로 동작하게 하는 것. 그 후, 연산자는 그 값들을 결합하는 방법을 보여주고, 함수는 변수가 값의 이름을 짓는 방식처럼 작업의 이름을 지을 수 있게 합니다.