> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트는 변수를 선언할 때 어떤 키워드를 사용하나요?

자바스크립트는 변수를 선언할 때 어떤 키워드를 사용하나요?

醉折花枝作酒筹
풀어 주다: 2023-01-06 11:17:05
원래의
4811명이 탐색했습니다.

js에서는 var, let 및 const 키워드 선언을 사용할 수 있습니다. var로 선언된 변수는 모든 유형의 값을 저장하는 데 사용할 수 있으며 범위는 함수 범위입니다. let으로 선언된 변수는 {}에서 사용되며 변수의 범위는 블록 수준 도메인으로 제한됩니다. 상수를 수정하고 선언 위치는 제한되지 않습니다.

자바스크립트는 변수를 선언할 때 어떤 키워드를 사용하나요?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

변수 키워드 선언 var, let 및 const

ECMAScript 변수는 느슨한 유형입니다. 즉, 변수는 모든 유형의 데이터를 저장하는 데 사용할 수 있으며 각 변수는 값을 저장하는 데 사용되는 명명된 자리 표시자에 지나지 않습니다.

1.var 키워드

var로 선언된 변수는 모든 유형의 값을 저장하는 데 사용할 수 있습니다. (초기화되지 않은 경우 특수 값 undefed가 저장됩니다.) JavaScript에서도 변수를 동시에 정의할 수 있습니다. 할당된 값을 보유하는 변수로 정의되는 값이 할당됩니다. JavaScript는 동적 언어이므로 변수가 초기화될 때 할당된 데이터 유형으로 식별되지 않으며 단순한 할당일 뿐입니다. 그러면 저장된 값뿐만 아니라 값의 유형도 변경할 수 있습니다:

var message = "hi";
	message = 100;
로그인 후 복사

1.1.var 선언 범위

var 연산자를 사용하여 정의된 변수는 해당 변수를 포함하는 함수의 로컬 변수가 됩니다. 예를 들어 var를 사용하여 함수 내에서 변수를 정의한다는 것은 함수가 종료될 때 변수가 소멸된다는 것을 의미합니다. 이것이 바로 가비지 수집이라고 생각합니다.

function test( ) {
		vart message = "hi";	//局部变量
	}
test( );
console.log(message);	//报错!
로그인 후 복사

변수는 함수가 호출된 후 무작위로 소멸되므로 마지막 줄은 오류를 보고합니다. 하지만 함수에서 변수를 정의할 때 var 연산자를 생략하면 전역 변수를 생성할 수 있습니다.

function test( )  {
	message = "hi";	//全局变量
}
test( );
console.log(message);	//"hi"
로그인 후 복사

test() 함수가 한 번 호출되면 전역 변수 메시지가 정의되고 함수 외부에서 액세스할 수 있습니다. . 그러나 로컬 범위에 정의된 전역 변수는 유지 관리가 어렵기 때문에 일반적으로 권장되지 않습니다.

1.2.Var 선언 호이스팅

var 키워드를 사용하여 선언된 변수는 자동으로 함수 범위의 최상위로 호이스트됩니다. 이를 "호이스트"라고 합니다. 즉, 모든 변수 선언이 함수 범위의 최상위로 끌어옵니다. 함수 범위:

function fool( ) {
	console.log(age);
	var age = 28;
}
fool( );	//undefined
로그인 후 복사

여기에는 오류가 보고되지 않지만 정의되지 않음이 표시됩니다. ECMAScript가 실행되면 다음 코드와 동일한 것으로 간주됩니다.

function fool( ) {
	var age;
	console.log(age);
	age = 28;
}
fool( );	//undefined
로그인 후 복사

2.let 문

Let에는 다음과 유사한 기능이 있습니다. var이지만 매우 중요한 차이점이 있습니다. 가장 분명한 차이점은 let 선언의 범위는 블록 범위이고 var 선언의 범위는 함수 범위라는 것입니다.

if (true) {
	let age = 26;
	console.log(age);	//26
}
console.log(age);	//ReferceError:age没有定义
로그인 후 복사

age 변수의 범위는 블록 내부로 제한되므로 if 블록 외부에서 참조되어야 합니다. 블록 범위는 함수 범위의 하위 집합이므로 var에 적용되는 동일한 범위 제한이 let에도 적용됩니다.

Let은 동일한 범위에서 중복 선언을 허용하지 않습니다(var 가능):

var name;
var name;
let age;
let age;	//SyntaxError;标识符age已经声明过了
로그인 후 복사

또한 중복 선언 오류는 var와 let을 혼합해도 영향을 받지 않습니다. 이 두 키워드는 서로 다른 유형의 변수를 선언하지 않으며 단지 관련 범위에 변수가 존재하는 방식을 나타냅니다.

2.1. 임시 데드 존

let과 var의 또 다른 중요한 차이점은 let으로 선언된 변수가 범위 내에서 승격되지 않는다는 것입니다.

//name会提升
console.log(name);	//undefined
var name = 'matt';

//name不会提升
console.log(name);	//ReferenceError:name没有定义
let name = 'matt';
로그인 후 복사

2.2 전역 선언

var와 달리 let을 사용하면 전역적으로 작동합니다. 도메인은 창 개체의 속성이 되지 않습니다(var로 선언된 변수):

var name = 'matt';
console.log(window.name);	//'matt'

let name = 'matt';
console.log(window.name);	//undefined
로그인 후 복사

그러나 선언은 전역 범위에서 계속 발생하고 해당 변수는 페이지의 선언 주기 내에서 유지됩니다.

2.3.조건부 선언

let의 범위는 블록이므로 이전에 let을 사용하여 같은 이름의 변수가 선언되었는지 확인할 수 없으며, 선언하지 않고 선언하는 것도 불가능합니다. 조건부 블록의 let 선언 범위가 해당 블록으로 제한되기 때문에 try/catch 또는 typeof 연산자를 사용하면 이 문제를 해결할 수 없습니다. 이러한 이유로 새로운 ES6 선언 키워드 let은 조건부 선언 패턴에 의존할 수 없습니다.

2.4. for 루프에 문 넣기

var를 사용할 때 가장 일반적인 문제는 반복 변수의 이상한 선언 및 수정입니다.

for(var i = 0; i < 5; ++i) {
	setTimeout( () => console.log(i) ,0)
}
//你可能以为会输出0、1、2、3、4
//实际上输出的是5、5、5、5、5
로그인 후 복사

루프를 종료할 때 반복 변수는 루프를 종료하게 만든 값을 저장합니다. :5. 나중에 setTimeout 타임아웃 로직이 실행될 때 i는 동일한 변수이므로 최종 출력은 동일한 값이 됩니다.

let을 사용하여 반복 변수를 선언하면 JavaScript 엔진은 백그라운드에서 각 반복 루프에 대해 새 반복 변수를 선언합니다. 각 setTimeout은 다른 변수 인스턴스를 참조합니다.

for(let i = 0; i < 5; ++i) {
	setTimeout( () => console.log(i) ,0)
}
//会输出0、1、2、3、4
로그인 후 복사

3. const 선언

const 동작입니다. 기본적으로 let과 동일합니다. 유일한 중요한 차이점은 변수를 선언할 때 변수를 동시에 초기화해야 하며 const로 선언된 변수를 수정하려고 하면 런타임 오류가 발생한다는 것입니다.

const声明的限制只适用于它指向的变量的引用。如果const变量引用的是一个对象,那么修改这个对象内部的属性并不违反const的限制:

const person = { };
person.name = &#39;matt&#39;;
로그인 후 복사

4.使用建议

let和const是ES6中新增的,从客观上为JavaScript更精确地声明作用域和语义提供更好的支持。

4.1.不使用var

    限制自己只使用let和const有助于提升代码质量,因为变量有了明确的作用域、声明位置,以及不变的值。

4.2.const优先,let次之

    使用const声明可以让浏览器运行时强制保持变量不变,也可以让静态代码分析工具提前发现不合法的赋值操作。因此,我们应该优先使用const来声明变量,只有在提前知道未来会有修改时再使用let。

【推荐学习:javascript高级教程

위 내용은 자바스크립트는 변수를 선언할 때 어떤 키워드를 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿