VAR VS LET VS CONST: 차이점은 무엇입니까?

var vs let vs const: 차이점은 무엇입니까?

JavaScript에서 let, var 및 const 키워드의 차이점에 대해 혼란스러워하는 경우 이 게시물이 적합합니다.

당신이 자바스크립트 프로그래머 , 코드 전체에서 let, var 및 const와 같은 다양한 유형의 키워드가 사용되는 것을 보았을 것입니다. 그들과 어떤 것을 고를 것인지의 차이점을 알고 있습니까?

어디

몇 년 전 ES6(ES2015) 이전에는 JavaScript에서 변수와 상수를 선언하는 방법이 하나밖에 없었습니다. 어디 .

기능 범위

이해하다 어디 , 우리는 먼저 범위가 어떻게 지정되는지 배워야 합니다. 자세한 내용은 아래의 간단한 예를 살펴보겠습니다.

function begin () { for (var i=0; i<5; i++) { console.log(i) } // i is accessible outside the for loop console.log(i) }

이제 위의 코드 스니펫에 변수가 있습니다. NS for 루프 내부에 선언되어 있습니다. 이 코드에 대해 표시되는 콘솔 출력은 아래와 같습니다.

0 1 2 3 4 5

여기서 이상한 점은 비록 변수가 NS * for-loop 내부에서 선언되었지만 for-loop 범위 외부에서 여전히 액세스할 수 있습니다. 그 이유는 어디 *변수는 선언된 함수 범위 내에서 액세스할 수 있습니다.

이 예에서 변수 NS * 함수 내 어디에서나 액세스 가능 시작하다() . 이것은 JavaScript에 고유한 동작입니다. 어디 예어. 다른 많은 언어에서 예상되는 동작은 다음과 같습니다. NS *는 선언된 블록으로 제한됩니다.

글로벌 범위

이제 다른 예를 살펴보겠습니다.

폐쇄된 현금 앱 계정을 다시 여는 방법

var name = 'Adhithi';

이 예에서는 변수를 선언했습니다. 이름 사용 어디 , 함수 외부. 이제 JavaScript는 이것을 전역 변수로 취급하여 window 객체에 첨부합니다. window* *객체의 인스턴스가 하나만 있기 때문에 전역 변수를 window 객체에 연결하는 것은 좋지 않습니다. 전역 변수와 이름이 같은 변수가 있는 타사 라이브러리를 사용하는 경우 변수가 재정의될 위험이 있습니다.

어디 변수는 함수 범위를 가지며, 함수 내에서 선언되지 않은 경우 전역 범위를 갖습니다.
*var *는 블록 스코프를 제공하지 않고 윈도우 객체에 자신을 붙이기 때문에 전역 스코프의 경우 애플리케이션의 여러 문제와 예기치 않은 동작으로 이어집니다.

ES6/ES2015 이후 JavaScript는 ***let ***및 ***const **를 도입했습니다. 직면한 문제를 극복하기 위한 새로운 대안으로 어디 . *다음에 자세히 알아보겠습니다.

허락하다

일반적으로 우리는 변수가 코드 블록 내에서 범위가 지정되기를 원합니다. for-loop라고 하는 코드 블록 내에서 변수를 선언하면 해당 블록 내에 있고 외부에서 액세스할 수 없게 됩니다. 이 동작은 다음을 사용하여 JavaScript에서 달성할 수 있습니다. 허락하다 예어.

이전 예제로 돌아가서 어디 ~와 함께 허락하다 대신에.

모든 도커 컨테이너 나열

function begin () { for (let i=0; i<5; i++) { console.log(i) } // i is not defined and will return an error console.log(i) }

다음으로 교체한 후 이 예에서 볼 수 있는 출력 허락하다 이전 예제와 약간 다를 것입니다.

0 1 2 3 4 Uncaught reference error: i is not defined

for-loop 블록 외부에서 발생하는 콘솔 로그는 오류를 반환합니다. 그것은 무엇을 모른다 NS *** 이고 반환합니다. NS *** 정의되지 않았습니다. 이것은 우리가 다음을 사용하여 얻을 수 있는 바람직한 출력입니다. 허락하다 대신에 어디.

***let ***은 블록 범위이며 코드 블록 내에서 선언된 변수는 블록 외부에서 액세스할 수 없습니다.
이제 **var **와 허락하다 , 다음 키워드를 탐색할 수 있습니다. 상수

상수

***const ***는 ES6 자바스크립트 표준. ***let과 유사하며 ***여기서 블록 범위도 준수합니다. ***const ***와 ***let ***의 차이점은 아래의 간단한 예를 통해 이해할 수 있습니다.

const name = 'Adhithi'; let age = 25; // can reassign age age = 27;

위의 예에서 ***const ***와 *age를 사용하여 *name *을 지정했습니다. 사용 허락하다 . *여기서 다른 값을 할당할 수 있음을 알 수 있습니다. 나이 그리고 그것은 잘 작동할 것입니다.

같은 예에서 ***const ***에 다른 값을 할당할 수 없습니다. 이름.

const name = 'Adhithi'; let age = 25; age = 27; // cannot re-assign name. will throw error name = 'Adhithi Ravichandran';

위의 예는 ***name ***이 다음과 같을 때 오류를 발생시킵니다. TypeError: 상수 변수에 대한 할당.

여기서 주의할 점은 ***const ***를 사용하면 상수 변수에 값을 다시 할당할 수 없다는 것입니다. 반면 ***let ***을 사용하면 이미 값이 있는 변수에 값을 다시 할당할 수 있습니다(위의 예: 나이 ).

***const ***객체가 JavaScript에서 어떻게 작동하는지 살펴보겠습니다.

const user = {'name': 'Adhithi', 'age': 10} //Can manipulate object properties user.name = 'Josh'; //Cannot re-assign the entire object user = {'name': 'Josh', 'age': '12'} //Uncaught TypeError: Assignment to constant variable

이 예에서는 Object의 속성을 조작할 수 있습니다. 우리는 변경할 수 있습니다 이름 그리고 나이 속성 사용자 비록 개체 사용자 개체는 상수 .

그러나 전체 개체를 다시 할당할 수는 없습니다. 아이디어는 ***const ***Objects의 경우 개체의 개별 속성을 수정/재할당할 수 있지만 개체 자체를 완전히 변경할 수는 없다는 것입니다.

요약

좋아, 우리는 이 포스트의 끝에 도달했다. 제 생각에는 아직 사용하고 싶을 때가 있습니다. 어디 , 코드 블록 대신 함수 내에서 범위를 유지하려는 경우.

***let ***및 ***const ***는 더 예측 가능한 코드를 작성하기 위해 ES6 표준에 대한 훌륭한 추가 사항입니다.

금 지원 암호화 gsx

어디 – 재할당, 재정의 및 기능 범위를 가질 수 있습니다. 함수 외부에서 선언되면 전역 범위를 가지며 자신을 창 개체에 연결합니다.
***let ***– 재할당할 수 있습니다. 범위는 코드 블록 내에 있습니다.
***const ****– *재할당 또는 재정의할 수 없습니다. 범위는 코드 블록 내에 있습니다.

#자바스크립트 #웹개발

var vs let vs const: 차이점은 무엇입니까?