Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

변수

변수는 값에 대표 이름을 할당하는 데이터 구조입니다. 모든 종류의 데이터가 포함될 수 있습니다.

변수 이름을 식별자라고 합니다. 유효한 식별자는 다음 규칙을 따릅니다.

식별자에는 유니코드 문자, 달러 기호 ($), 밑줄이 포함될 수 있습니다. 문자 (_), 숫자 (0-9), 심지어 일부 유니코드 문자까지 가능합니다.
식별자는 공백을 포함할 수 없습니다. 파서가 공백을 사용하여 별도의 입력 요소를 생성합니다. 예를 들어 myVariable 대신 my Variable이면 파서에 식별자 두 개가 표시됩니다. my 및 Variable를 생성하고 구문 오류('예기치 않은 토큰: 확인합니다.
식별자는 문자, 밑줄 (_) 또는 달러 기호 ($)로 시작해야 합니다. 숫자 간의 혼동을 방지하기 위해 숫자로 시작할 수 없습니다. 식별자:
```
let 1a = true;

> Uncaught SyntaxError: Invalid or unexpected token
```
JavaScript에서 식별자 시작 부분에 숫자를 허용하면 숫자로만 구성된 식별자로 인해 식별자로 사용되는 숫자 및 숫자:
```
let 10 = 20

10 + 5
> ?
```
'예약어' 이미 구문적으로 의미가 있는 단어는 식별자로 사용할 수 없습니다.
식별자에는 특수문자 (! . , / \ + - * =)를 포함할 수 없습니다.

다음은 식별자 생성에 관한 엄격한 규칙은 아니지만 업계 권장사항에 대해 알아보겠습니다. 특정 프로젝트의 표준이 다르다면 일관성을 위해 이러한 표준을 따르세요.

JavaScript의 내장 메서드 및 속성에서 설정된 예에 따라 카멜 표기법('카멜 표기법'이라고도 함)은 여러 단어로 구성된 식별자입니다 카멜 표기법은 개선을 위해 첫 글자를 제외한 모든 단어의 첫 글자를 대문자로 표시 공백 없이 가독성을 높일 수 있습니다.

let camelCasedIdentifier = true;

일부 프로젝트는 컨텍스트와 특성에 따라 다른 이름 지정 규칙을 사용합니다. 살펴 보겠습니다. 예를 들어 클래스의 첫 번째 문자는 는 일반적으로 대문자로 표기되므로 여러 단어로 된 클래스 이름에는 흔히 카멜의 변형을 사용합니다. 일반적으로 '대문자 카멜 표기법'이라고 하는 케이스 또는 Pascal 표기법입니다.

class MyClass {

}

식별자는 자신이 포함하는 데이터의 특성을 간결하게 설명해야 하며 예를 들어 currentMonthDays이 theNumberOfDaysInTheCurrentMonth보다 더 나은 이름입니다.) 한눈에 명확하게 읽을 수 있습니다 (val보다 originalValue가 더 좋음). 이 이 모듈 전체에 사용되는 myVariable 식별자는 작동하지만 프로덕션 코드에는 전혀 도움이 되지 않습니다. 왜냐하면 어떤 데이터도 제공하지 않습니다.

식별자는 자신이 포함하는 데이터에 대해 너무 구체적이지 않아야 합니다. 왜냐하면 스크립트가 해당 데이터에 대해 작동하는 방식 또는 결정을 내릴 수 있습니다. 예를 들어 원래 miles 식별자는 나중에 프로젝트의 상태를 변경하기 때문에 유지관리자가 해당 변수에 대한 참조를 나중에 혼란을 피할 수 있습니다. 이를 방지하려면 distance를 식별자로 사용하세요. 하세요.

JavaScript는 정보를 제공하는 식별자에 대해 특별한 권한이나 의미를 밑줄 (_)로 시작하지만 일반적으로 밑줄과 변수, 메서드 또는 속성이 '비공개'인 경우 이는 포드에서 실행 가능한 포함된 객체의 컨텍스트 내에서 사용할 수 없으며 해당 컨텍스트 외부에서 액세스하거나 수정할 수 있습니다 이 원칙은 전 세계 뉴스 조직을 다른 프로그래밍 언어와 유사하며 JavaScript의 사유

변수 선언

JavaScript가 식별자, 프로세스라는 것을 인식하도록 하는 방법에는 여러 가지가 있습니다. '선언'이라는 사용할 수 있습니다. 변수는 let, const를 사용하여 선언됩니다. 또는 키워드 var개

let myVariable;

let 또는 var를 사용하여 언제든지 변경할 수 있는 변수를 선언합니다. 이러한 키워드는 JavaScript 인터프리터에 문자 시퀀스가 식별자를 반환합니다.

최신 코드베이스로 작업할 때는 var 대신 let를 사용하세요. var은(는) 계속 사용 가능 웹 브라우저 표준에 정의된 것처럼 보이지만 직관적이지 않은 동작이 나중에 그것으로 변경할 수 없었다는 것을 하위 호환성을 유지합니다 일부 문제를 해결하기 위해 ES6에 let가 추가되었습니다. var의 디자인을 적용해 보겠습니다.

선언된 변수는 값을 변수에 할당하여 초기화됩니다. 사용 단일 등호 (=)는 변수에 값을 할당하거나 재할당합니다. 가능한 작업 이를 선언한 동일한 문의 일부로 포함해야 합니다.

let myVariable = 5;

myVariable + myVariable
> 10

변수를 초기화하지 않고 let (또는 var)로 선언할 수도 있습니다. 즉시 사용할 수 있습니다. 지정할 경우 변수의 초깃값은 undefined 값을 할당합니다.

let myVariable;

myVariable;
> undefined

myVariable = 5;

myVariable + myVariable
> 10

값이 undefined인 변수는 정의되지 않은 변수와 다릅니다 아직 선언되지 않은 ID입니다. 아직 설정하지 않은 변수 참조 선언하면 오류가 발생합니다.

myVariable
> Uncaught ReferenceError: myVariable is not defined

let myVariable;

myVariable
> undefined

식별자와 값의 연결을 일반적으로 '바인딩'이라고 합니다. let, var 또는 const 키워드 다음에 오는 문법을 "바인딩 목록" 여러 개의 쉼표로 구분된 변수 선언을 허용합니다. 로 끝나야 합니다. 이렇게 하면 다음과 같은 코드 스니펫이 기능적으로 동일함:

let firstVariable,
     secondVariable,
     thirdVariable;

let firstVariable;
let secondVariable;
let thirdVariable;

변수 값을 재할당할 때는 let (또는 var)가 사용되지 않습니다. JavaScript가 변수가 존재한다는 것을 이미 알고 있습니다.

let myVariable = true;

myVariable
> true

myVariable = false;

myVariable
> false

기존 값에 따라 변수에 새 값을 재할당할 수 있습니다.

let myVariable = 10;

myVariable
> 10

myVariable = myVariable * myVariable;

myVariable
> 100

프로덕션 환경에서 let를 사용하여 변수를 다시 선언하려고 하면 구문 오류가 발생합니다.

let myVariable = true;
let myVariable = false;
> Uncaught SyntaxError: redeclaration of let myVariable

브라우저 개발자 도구 let 및 class 재선언에 대해 더 관대하므로 같은 오류가 표시될 것입니다.

기존 브라우저 호환성을 유지하기 위해 var에서 불필요한 재선언을 허용합니다. 다음과 같습니다.

var myVariable = true;
var myVariable = false;

myVariable\
> false

`const`

const 키워드를 사용하여 다음과 같은 변수 유형인 상수를 선언합니다. 즉시 초기화되며 변경할 수 없습니다. 상수 식별자 let 및 var를 사용하여 선언된 변수와 동일한 규칙을 모두 따릅니다.

const myConstant = true;

myConstant
> true

상수를 선언하지 않으면 값을 즉시 할당하지 않습니다. 상수를 만든 후에는 다시 할당할 수 없으므로 초기화되지 않은 모든 상수는 상수는 undefined를 영원히 유지합니다. 상수를 선언하려고 하면 초기화하지 않으면 구문 오류가 발생합니다.

const myConstant;
Uncaught SyntaxError: missing = in const declaration

const로 선언된 변수의 값을 다음과 같이 변경하려고 함 let (또는 var)로 wit로 선언된 변수의 값을 변경하면 유형이 오류:

const myConstant = true;

myConstant = false;
> Uncaught TypeError: invalid assignment to const 'myConstant'

그러나 상수가 객체와 연결되는 경우 해당 속성의 속성은 객체가 변경될 수 있습니다.

const constantObject = { "firstvalue" : true };

constantObject
> Object { firstvalue: true }

constantObject.secondvalue = false;

constantObject
> Object { firstvalue: true, secondvalue: false }

객체를 포함하는 상수는 불변이다 변경 가능한 데이터 값 참조를 반환합니다. 상수 자체는 변경할 수 없지만 참조된 객체를 변경, 추가 또는 삭제할 수 있습니다.

const constantObject = { "firstvalue" : true };

constantObject = false
> Uncaught TypeError: invalid assignment to const 'constantObject'

변수가 다시 할당되지 않을 것으로 예상되는 경우 다시 할당하는 것이 좋습니다. 상수입니다. const를 사용하면 개발팀이나 향후 유지관리자에게 코드 가정이 깨지는 것을 방지하기 위해 해당 값을 변경하지 않는 프로젝트 사용되는 방식, 예를 들어 변수가 결국에는 예상되는 데이터 유형에 따라 평가됩니다.

변수 범위

변수의 범위는 해당 변수를 사용할 수 있는 스크립트의 부분입니다. 변수의 범위 외에는 식별자가 정의되지 않음 undefined 값을 포함하지만 선언되지 않은 것처럼 보입니다.

변수를 선언하는 데 사용하는 키워드와 변수를 정의하면 변수의 범위를 문 (block scope)로 지정할 수 있고 개별 함수 (함수 범위) 또는 전체 자바스크립트 애플리케이션 (전역 범위).

차단 범위

let 또는 const를 사용하여 선언하는 모든 변수는 가장 가까운 값으로 범위가 지정됩니다. 포함된 block 문 이는 해당 블록 내에서만 변수에 액세스할 수 있음을 의미합니다. 시도 중 포함하는 블록 외부의 블록 범위 변수에 액세스하면 존재하지 않는 변수에 액세스하려고 하면 오류가 발생합니다.

{
    let scopedVariable = true;
    console.log( scopedVariable );
}
> true

scopedVariable
> ReferenceError: scopedVariable is not defined

JavaScript에 관한 한, 블록 범위 변수는 존재하지 않습니다. 외부 IP 주소를 통해 전달됩니다 예를 들어 상수를 선언할 수 있습니다. 그런 다음 해당 블록 외부에서 동일한 식별자가 있습니다.

{
  const myConstant = false;
}
const myConstant = true;

scopedConstant;
> true

선언된 변수는 상위 블록으로 확장될 수 없지만 있습니다. 사용할 수 있습니다.

{
    let scopedVariable = true;
    {
    console.log( scopedVariable );
    }
}
> true

선언된 변수의 값은 하위 블록 내에서 변경할 수 있습니다.

{
    let scopedVariable = false;
    {
    scopedVariable = true;
    }
    console.log( scopedVariable );
}
> true

새 변수는 하위 요소 내에서 let 또는 const로 초기화할 수 있습니다. 블록의 변수와 동일한 식별자를 사용하더라도 오류 없이 상위 블록:

{
    let scopedVariable = false;
    {
    let scopedVariable = true;
    }
    console.log( scopedVariable );
}
> false

함수 범위

var를 사용하여 선언된 변수는 가장 가까운 포함 함수로 범위가 지정됩니다. (또는 클래스 내의 정적 초기화 블록)

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

함수가 호출된 후에도 마찬가지입니다. 그러나 변수는 함수가 실행되는 동안 초기화되지만, 해당 변수는 여전히 사용할 수 없습니다.

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

myFunction();
> true

scopedVariable;
> ReferenceError: scopedVariable is not defined

전역 범위

전역 변수는 전체 JavaScript 애플리케이션에서 사용할 수 있으므로 모든 블록과 함수 내부에 있는 페이지의 스크립트에

이는 바람직한 기본값처럼 보일 수 있지만, 불필요한 오버헤드를 추가하거나 또는 동일한 식별자를 가진 애플리케이션의 다른 위치에서 변수와 충돌할 수 있습니다 이는 페이지 렌더링과 관련된 모든 JavaScript에 적용됩니다. 여기에는 서드 파티 라이브러리, 사용자 분석 등이 포함됩니다. 따라서 가능하면 전역 범위 오염을 방지하는 것이 좋습니다.

상위 함수 외부에서 var를 사용하거나 let 또는 상위 블록 외부에 있는 const는 전역적입니다.

var functionGlobal = true; // Global
let blockGlobal = true; // Global

{
    console.log( blockGlobal );
    console.log( functionGlobal );
}
> true
> true

(function() {
    console.log( blockGlobal );
    console.log( functionGlobal );
}());
> true
> true

명시적으로 선언하지 않고 변수에 값을 할당 (즉, var, let 또는 const를 사용하여 생성하지 않음) 변수가 전역 범위 내에 있을 수 있습니다. 변수 '암시적 전역'이라고도 합니다.

function myFunction() {
    globalVariable = "global";

    return globalVariable
}

myFunction()\
> "global"

globalVariable\
> "global"

가변 호이스팅

변수 및 함수 선언은 범위 상단으로 호이스팅됩니다. 즉, 자바스크립트 인터프리터는 특정 시점에 선언된 모든 변수를 를 삽입하면 해당 스크립트의 첫 번째 줄로 이동할 수 있습니다. 범위를 지정해야 합니다. 즉, var는 변수가 선언되기 전에 참조될 수 있지만 오류:

hoistedVariable
> undefined

var hoistedVariable;

초기화가 아닌 변수 선언만 호스팅되기 때문에 var, let 또는 const를 사용하여 명시적으로 선언되지 않은 변수 호이스팅되지 않습니다.

unhoistedVariable;
> Uncaught ReferenceError: unhoistedVariable is not defined

unhoistedVariable = true;

앞서 언급했듯이 선언되었지만 초기화되지 않은 변수는 undefined의 값이 할당됩니다. 이 동작은 호이스팅된 변수에 적용됨 var를 사용하여 선언된 클래스에만 해당됩니다.

hoistedVariable
> undefined

var hoistedVariable = 2 + 2;

hoistedVariable\
> 4

이러한 직관적이지 않은 행동은 IT 지원 전문가들의 디자인 결정이 최신 버전의 자바스크립트이며 기존 사이트를 손상시킬 수 있습니다.

let 및 const는 변수가 생성되기 전에 액세스할 수 있습니다.

{
    hoistedVariable;

    let hoistedVariable;
}
> Uncaught ReferenceError: can't access lexical declaration 'hoistedVariable' before initialization

이 오류는 'hoistedVariable이 정의되지 않았습니다'와는 다릅니다. 오류 발생 를 예상할 수 있습니다. JavaScript가 변수를 끌어올렸다면 해당 변수가 할 수 있습니다. 그러나 이 변수를 선언을 undefined으로 설정하면 인터프리터에서 오류가 발생합니다. let 또는 const (또는 class)로 선언된 변수는 '일시적 사각지대' ('TDZ')를 인클로징 블록의 시작부터 변수가 선언되어 있는 코드 지점입니다.

시간적 사각지대는 let의 동작을 var보다 직관적으로 만듭니다. 있습니다. const의 설계에도 중요합니다. 상수는 상수가 범위 상단으로 호이스팅되고 암시적 값이 지정된 경우 의미 있는 값으로 undefined를 초기화할 수 없습니다.

이해도 확인

식별자를 시작할 수 있는 문자의 종류는 무엇인가요?

문자

밑줄

숫자

다음 중 값이 큰 변수를 선언할 때 선호되는 방법은 무엇인가요? 언제든지 변경할 수 있나요?

하자

const

변수