대부분의 경우 JavaScript 애플리케이션은 정보를 처리해야 합니다. 다음은 두 가지 예입니다.
온라인 상점 – 정보에는 판매되는 상품과 장바구니가 포함될 수 있습니다.
채팅 애플리케이션 – 정보에는 사용자, 메시지 등이 포함될 수 있습니다.
이 정보를 저장하기 위해 변수가 사용됩니다.
변수는 데이터에 대한 "명명된 저장소"입니다. 변수를 사용하여 상품, 방문자 및 기타 데이터를 저장할 수 있습니다.
JavaScript에서 변수를 만들려면 let 키워드를 사용하세요.
아래 명령문은 "message"라는 이름의 변수를 생성합니다(즉, 선언합니다 ).
메시지를 보내십시오;
이제 할당 연산자 = 사용하여 여기에 데이터를 넣을 수 있습니다.
메시지를 보내십시오; 메시지 = '안녕하세요'; // message라는 변수에 'Hello'라는 문자열을 저장합니다.
이제 문자열이 변수와 관련된 메모리 영역에 저장됩니다. 변수 이름을 사용하여 접근할 수 있습니다:
메시지를 보내십시오; message = '안녕하세요!'; 경고(메시지); // 변수 내용을 보여줍니다.
간결하게 하기 위해 변수 선언과 할당을 한 줄로 결합할 수 있습니다.
메시지 = '안녕하세요!'; // 변수를 정의하고 값을 할당합니다. 경고(메시지); // 안녕하세요!
한 줄에 여러 변수를 선언할 수도 있습니다.
사용자 = 'John', 나이 = 25, 메시지 = '안녕하세요';
더 짧아 보일 수도 있지만 권장하지는 않습니다. 가독성을 높이기 위해 변수당 한 줄을 사용하십시오.
여러 줄 변형은 약간 길지만 읽기 쉽습니다.
사용자 = 'John'으로 설정; 나이 = 25라고 놔두세요; 메시지 = '안녕하세요';
어떤 사람들은 이 여러 줄 스타일로 여러 변수를 정의하기도 합니다.
사용자 = 'John', 나이 = 25, 메시지 = '안녕하세요';
...또는 "쉼표 우선" 스타일에서도 마찬가지입니다.
사용자 = 'John'으로 설정 , 나이 = 25세 , 메시지 = '안녕하세요';
기술적으로 이러한 모든 변형은 동일한 작업을 수행합니다. 따라서 그것은 개인적인 취향과 미학의 문제입니다.
let 대신 var
이전 스크립트에서는 let 대신 var 라는 또 다른 키워드를 찾을 수도 있습니다.
var 메시지 = '안녕하세요';
var 키워드는 let 과 거의 동일합니다. 또한 변수를 선언하지만 약간 다른 "구식" 방식을 사용합니다.
let 과 var 사이에는 미묘한 차이가 있지만 아직은 중요하지 않습니다. 이에 대해서는 이전 "var" 장에서 자세히 다루겠습니다.
변수라는 이름을 고유한 이름의 스티커가 붙은 데이터를 담는 '상자'로 상상하면 '변수'의 개념을 쉽게 이해할 수 있습니다.
예를 들어, 변수 message 값이 "Hello!" 인 "message" " 상자로 상상할 수 있습니다. 그 안에 :
우리는 상자에 어떤 값이라도 넣을 수 있습니다.
원하는 만큼 여러 번 변경할 수도 있습니다.
메시지를 보내십시오; message = '안녕하세요!'; message = '세계!'; // 값이 변경됨 경고(메시지);
값이 변경되면 이전 데이터가 변수에서 제거됩니다.
두 개의 변수를 선언하고 한 변수에서 다른 변수로 데이터를 복사할 수도 있습니다.
let hello = '안녕하세요!'; 메시지를 보내십시오; // hello의 'Hello world'를 메시지에 복사합니다. 메시지 = 안녕하세요; // 이제 두 변수가 동일한 데이터를 보유합니다. 경고(안녕하세요); // 안녕하세요! 경고(메시지); // 안녕하세요!
두 번 선언하면 오류가 발생합니다.
변수는 한 번만 선언해야 합니다.
동일한 변수를 반복해서 선언하면 오류가 발생합니다.
메시지 = "이것"을 보자; // 'let'을 반복하면 오류가 발생합니다. 메시지 = "그것"을 보자; // SyntaxError: 'message'가 이미 선언되었습니다.
따라서 변수를 한 번 선언한 다음 let 없이 참조해야 합니다.
기능적 언어
Haskell과 같이 변수 값 변경을 금지하는 소위 순수 함수형 프로그래밍 언어가 존재한다는 점은 흥미롭습니다.
이러한 언어에서는 값이 "상자에" 저장되면 영원히 존재합니다. 다른 것을 저장해야 하는 경우 언어는 강제로 새 상자를 만듭니다(새 변수 선언). 우리는 오래된 것을 재사용할 수 없습니다.
언뜻 보기에는 조금 이상해 보일 수도 있지만 이러한 언어는 상당한 발전을 이룰 수 있습니다. 그 외에도 이러한 제한이 특정 이점을 제공하는 병렬 계산과 같은 영역이 있습니다.
JavaScript의 변수 이름에는 두 가지 제한 사항이 있습니다.
이름에는 문자, 숫자 또는 $ 및 _ 기호만 포함되어야 합니다.
첫 번째 문자는 숫자가 아니어야 합니다.
유효한 이름의 예:
사용자 이름을 보자; test123을 보자;
이름에 여러 단어가 포함된 경우 CamelCase가 일반적으로 사용됩니다. 즉, 단어는 차례로 이어지며, 첫 번째 단어를 제외한 각 단어는 대문자 myVeryLongName 로 시작됩니다.
흥미로운 점은 달러 기호 '$' 와 밑줄 '_' 도 이름에 사용할 수 있다는 것입니다. 이는 문자와 마찬가지로 특별한 의미가 없는 일반적인 기호입니다.
유효한 이름은 다음과 같습니다.
$ = 1로 놔두세요; // "$"라는 이름의 변수를 선언했습니다. _ = 2로 놔두세요; // 그리고 이제 이름이 "_"인 변수 경고($ + _); // 3
잘못된 변수 이름의 예:
1a를 보자; // 숫자로 시작할 수 없습니다. 내 이름을 보자; // 이름에 하이픈 '-'은 허용되지 않습니다.
사건 문제
apple 과 APPLE 이라는 변수는 서로 다른 두 변수입니다.
라틴 문자가 아닌 문자는 허용되지만 권장되지는 않습니다.
다음과 같이 키릴 문자, 중국어 로고 등을 포함한 모든 언어를 사용할 수 있습니다.
let имя = '...'; 내가 = '...'라고 하자;
기술적으로 여기에는 오류가 없습니다. 이러한 이름은 허용되지만 변수 이름에 영어를 사용하는 국제 관례가 있습니다. 비록 작은 스크립트를 작성한다고 해도 앞으로 긴 수명이 있을 수 있습니다. 다른 나라의 사람들도 언젠가 읽어야 할 수도 있습니다.
예약된 이름
언어 자체에서 사용하기 때문에 변수 이름으로 사용할 수 없는 예약어 목록이 있습니다.
예를 들어 let , class , return 및 function 예약되어 있습니다.
아래 코드는 구문 오류를 제공합니다.
하자 = 5; // 변수 이름을 "let"으로 지정할 수 없습니다. 오류! 반환하자 = 5; // 또한 이름을 "return"으로 지정할 수 없습니다. 오류!
use strict 하지 않는 할당
일반적으로 변수를 사용하기 전에 변수를 정의해야 합니다. 하지만 예전에는 let 사용하지 않고 단순히 값을 할당하는 것만으로 변수를 만드는 것이 기술적으로 가능했습니다. 이전 스크립트와의 호환성을 유지하기 위해 스크립트에 use strict 넣지 않은 경우에도 이 기능은 여전히 작동합니다.
// 참고: 이 예에서는 "엄격한 사용"이 없습니다. 숫자 = 5; // 변수 "num"이 존재하지 않으면 생성됩니다. 경고(숫자); // 5
이는 나쁜 습관이며 엄격 모드에서는 오류가 발생할 수 있습니다.
"엄격하게 사용하세요"; 숫자 = 5; // 오류: num이 정의되지 않았습니다.
상수(변경되지 않는) 변수를 선언하려면 let 대신 const 사용하십시오.
const myBirthday = '18.04.1982';
const 사용하여 선언된 변수를 "상수"라고 합니다. 재할당할 수 없습니다. 이렇게 하면 오류가 발생합니다.
const myBirthday = '18.04.1982'; myBirthday = '01.01.2001'; // 오류입니다. 상수를 다시 할당할 수 없습니다!
프로그래머가 변수가 절대 변경되지 않을 것이라고 확신하는 경우 const 사용하여 변수를 선언하여 해당 사실을 모든 사람에게 보장하고 전달할 수 있습니다.
실행 전에 알려진 기억하기 어려운 값에 대한 별칭으로 상수를 사용하는 관행이 널리 퍼져 있습니다.
이러한 상수는 대문자와 밑줄을 사용하여 이름이 지정됩니다.
예를 들어 소위 "웹"(16진수) 형식의 색상에 대한 상수를 만들어 보겠습니다.
const COLOR_RED = "#F00"; const COLOR_GREEN = "#0F0"; const COLOR_BLUE = "#00F"; const COLOR_ORANGE = "#FF7F00"; // ...색상을 선택해야 할 때 색상 = COLOR_ORANGE로 둡니다. 경고(색상); // #FF7F00
이익:
COLOR_ORANGE 는 "#FF7F00" 보다 기억하기 훨씬 쉽습니다.
COLOR_ORANGE 보다 "#FF7F00" 잘못 입력하는 것이 훨씬 쉽습니다.
코드를 읽을 때 COLOR_ORANGE 는 #FF7F00 보다 훨씬 더 의미가 있습니다.
상수에 언제 대문자를 사용해야 하며 언제 일반적으로 이름을 지정해야 합니까? 그 점을 분명히 합시다.
"상수"라는 것은 변수의 값이 결코 변하지 않는다는 것을 의미합니다. 그러나 일부 상수는 실행 전에 알려져 있으며(예: 빨간색의 16진수 값) 일부 상수는 실행 중에 런타임에 계산 되지만 초기 할당 후에는 변경되지 않습니다.
예를 들어:
const pageLoadTime = /* 웹페이지를 로드하는 데 걸리는 시간 */;
pageLoadTime 의 값은 페이지가 로드되기 전에는 알 수 없으므로 정상적으로 이름이 지정됩니다. 하지만 할당 후에도 변경되지 않기 때문에 여전히 상수입니다.
즉, 대문자로 명명된 상수는 "하드 코딩된" 값의 별칭으로만 사용됩니다.
변수에 관해 이야기하자면, 매우 중요한 것이 하나 더 있습니다.
변수 이름은 저장되는 데이터를 설명하는 명확하고 명확한 의미를 가져야 합니다.
변수 명명은 프로그래밍에서 가장 중요하고 복잡한 기술 중 하나입니다. 변수 이름을 보면 초보자와 숙련된 개발자가 작성한 코드가 무엇인지 알 수 있습니다.
실제 프로젝트에서는 처음부터 완전히 별개로 무언가를 작성하기보다는 기존 코드 베이스를 수정하고 확장하는 데 대부분의 시간이 소요됩니다. 한동안 다른 작업을 수행한 후 일부 코드로 돌아오면 레이블이 잘 지정된 정보를 찾는 것이 훨씬 쉽습니다. 즉, 변수 이름이 좋은 경우입니다.
변수를 선언하기 전에 변수의 올바른 이름을 생각해 보세요. 그렇게 하면 후하게 보답할 것이다.
따라야 할 몇 가지 규칙은 다음과 같습니다.
userName 또는 shoppingCart 와 같이 사람이 읽을 수 있는 이름을 사용하세요.
수행 중인 작업을 잘 모르는 경우 a , b , c 와 같은 약어나 짧은 이름을 사용하지 마세요.
이름은 최대한 설명적이고 간결하게 만드세요. 나쁜 이름의 예로는 data 및 value 있습니다. 그런 이름은 아무 말도하지 않습니다. 코드의 컨텍스트를 통해 변수가 참조하는 데이터나 값이 매우 분명한 경우에만 이를 사용하는 것이 좋습니다.
팀 내에서 그리고 마음속으로 조건에 동의하세요. 사이트 방문자가 "사용자"라고 불리는 경우 관련 변수의 이름을 currentVisitor 또는 newManInTown 대신 currentUser 또는 newUser 로 지정해야 합니다.
간단하게 들리나요? 실제로 그렇습니다. 그러나 실제로 설명적이고 간결한 변수 이름을 만드는 것은 그렇지 않습니다. 그것을 위해 가십시오.
재사용할 것인가, 아니면 창조할 것인가?
그리고 마지막 메모. 새로운 변수를 선언하는 대신 기존 변수를 재사용하는 경향이 있는 게으른 프로그래머가 있습니다.
결과적으로 변수는 사람들이 스티커를 바꾸지 않고도 다양한 물건을 던지는 상자와 같습니다. 지금 상자 안에는 무엇이 들어있나요? 누가 알겠어요? 가까이 가서 확인해야 해요.
그러한 프로그래머는 변수 선언에 있어서 약간의 비용을 절약하지만 디버깅에 있어서는 10배 더 많은 손실을 입습니다.
추가 변수는 악이 아니라 선입니다.
최신 JavaScript 축소기와 브라우저는 코드를 충분히 최적화하므로 성능 문제가 발생하지 않습니다. 다양한 값에 다양한 변수를 사용하면 엔진이 코드를 최적화하는 데 도움이 될 수도 있습니다.
var , let 또는 const 키워드를 사용하여 데이터를 저장하는 변수를 선언할 수 있습니다.
let – 현대적인 변수 선언입니다.
var – 구식 변수 선언입니다. 일반적으로 우리는 이를 전혀 사용하지 않지만, 필요할 경우를 대비해 이전 "var" 장에서 let 과의 미묘한 차이점을 다룰 것입니다.
const – let 과 비슷하지만 변수 값을 변경할 수 없습니다.
변수의 이름은 그 안에 무엇이 있는지 쉽게 이해할 수 있도록 지정되어야 합니다.
중요도: 2
admin 및 name 두 개의 변수를 선언합니다.
name 에 "John" 값을 할당합니다.
name 에서 admin 으로 값을 복사합니다.
alert 사용하여 admin 값을 표시합니다("John"을 출력해야 함).
아래 코드에서 각 줄은 작업 목록의 항목에 해당합니다.
관리자, 이름을 알려주세요. // 두 개의 변수를 동시에 선언할 수 있습니다. 이름 = "존"; 관리자 = 이름; 경고(관리자); // "존"
중요도: 3
우리 행성의 이름으로 변수를 만듭니다. 그러한 변수의 이름을 어떻게 지정하시겠습니까?
현재 웹 사이트 방문자의 이름을 저장하는 변수를 만듭니다. 해당 변수의 이름을 어떻게 지정하시겠습니까?
그것은 간단합니다:
ourPlanetName = "지구"를 설정하세요.
더 짧은 이름인 planet 사용할 수 있지만 그것이 어떤 행성을 가리키는지 명확하지 않을 수 있습니다. 더 장황한 것이 좋습니다. 적어도 isNotTooLong 변수가 나올 때까지는 말이죠.
let currentUserName = "John";
다시 말하지만, 사용자가 현재 사용자인지 확실히 알면 이를 userName 으로 단축할 수 있습니다.
최신 편집기와 자동 완성 기능을 사용하면 긴 변수 이름을 쉽게 작성할 수 있습니다. 그것들을 저장하지 마십시오. 3단어로 된 이름이면 괜찮습니다.
편집기에 적절한 자동 완성 기능이 없으면 새 편집기를 얻으십시오.
중요도: 4
다음 코드를 살펴보세요.
const 생일 = '18.04.1982'; const age = someCode(생일);
여기에는 날짜에 대한 상수 birthday 과 age 상수가 있습니다.
age someCode() 사용하여 birthday 로부터 계산됩니다. 이는 아직 설명하지 않은 함수 호출을 의미합니다(곧 설명하겠습니다!). 그러나 세부 사항은 여기서 중요하지 않습니다. 요점은 age 어떻게든 다음을 기반으로 계산된다는 것입니다. birthday .
birthday 에는 대문자를 사용하는 것이 맞을까요? age 때문에? 아니면 둘 다에 해당하나요?
const BIRTHDAY = '18.04.1982'; // 생일을 대문자로 만드시겠습니까? const AGE = someCode(생일); // 나이를 대문자로 만드시겠습니까?
일반적으로 "하드 코딩된" 상수에는 대문자를 사용합니다. 즉, 실행 전에 값이 알려져 있고 코드에 직접 기록되는 경우입니다.
이 코드에서 birthday 정확히 그와 같습니다. 그래서 우리는 대문자를 사용할 수 있습니다.
이와 대조적으로 age 런타임에 평가됩니다. 오늘 우리에게는 하나의 나이가 있고, 1년이 지나면 또 다른 나이가 생길 것입니다. 코드 실행을 통해 변경되지 않는다는 점에서 일정합니다. 하지만 이는 birthday 보다 약간 "상수가 적습니다". 계산되므로 소문자를 유지해야 합니다.