슬기형의 자바스크립트 기초강의

슬기형의 자바스크립트 기초강의 - 변수 var, let, const 07

이전 강의

2023.01.07 - [Web Front 개발공부/HTML과 JAVASCRIPT] - 슬기형의 자바스크립트 기초강의 - 모달창 만들어보기 06

슬기형의 자바스크립트 기초강의 - 모달창 만들어보기 06

슬기형의 자바스크립트 기초강의 - 모달창 만들어보기 06 이번 포스팅은 모달 창 구현이다. 모달, 팝업 골이 타분하게 구분하지는 않겠다. 개념도 다들 제각각이다. 누군가는 모달을 부모 - 자식

ecolumbus.tistory.com

자바스크립트는 ECMAScript의 명세를 따른다. ES1을 시작으로 현재는 ES2021 버전까지 나온 상태다.

자바스크립트는 다른 언어와는 다르게 느슨한 타입을 가진 언어이므로 자유도 (타입추론) 데이터 타입을 명시하지 않고 변수를 선언할 수 있다. 그러므로 은근히 변수를 잘못사용하면 많은 버그를 생산할 수 있는 단점도 있다.

자바스크립트에서는 아래 세 가지 키워드를 사용해 변수를 선언한다.

var
let
const

var 소스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    var a =1;
    let b;
    const c=0;
    
    if(isStudent()){
        var a=20;
    }

    console.log(a);

    function isStudent() {
        return true;
    }
</script>
<body>
<div id="container">
    <h1>슬기형과 함께하는 자바스크립트 - 변수에 대해 알아보자</h1>
    <p>a 변수 : if 절에 a 변수를 스코프 내에 동일하게 만들어 할당하면 변수에 값을 재할당한다. <p>
</div>
</body>
</html>

실행

최초에 var a = 1; 값을 선언했었는데 두 번째 var a=20; 으로 재정의한 값 20을 출력했다.

vat로 선언을 하면 전역 변수가 된다.

만약 var a= 1; 를 없애고 특정 함수 내에 선언을 하면, 변수를 선언한 함수 내에서만 해당 변수에 접근할 수 있다. 이렇게 되면 변수가 함수 스코프를 가졌다고 표현한다.

a변수는 getTest() 함수내의 스코프에 선언되었기에 console.log(a)는 에러가 발생하게 된다.

    function getTest(){
        var a=500;
        return a+1;
    }

    console.log(getTest());
    console.log(a);

a변수는 getTest() 함수내의 스코프에 선언되었기에 console.log(a)는 에러가 발생했다.

let과 const는 ES2015에서 등장했다.

let과 const는 var와 달리 재선언을 허용하지 않고, 함수 스코프가 아닌 블록 스코프를 갖는다.

즉 위에서 설명한 var와는 다르게 아래 주석처럼 에러가 발생하게 된다.

    let a=1;
    let a=100; //Uncaught SyntaxError: Identifier 'a' has already been declared

    const b=1;
    const b=100; //Uncaught SyntaxError: Identifier 'b' has already been declared

블록 스코프라는 것은 { 요 안 } 블록 안에서만 해당 변수에 접근할 수 있다는 뜻이다.

아래 예제를 실행해보면 { 안의 console.log('1.' + a); } 는 안녕하세요를 정상출력하지만,

console.log('2.' + a) 은 에러가 난다.

{
    let a = '안녕하세요';
    console.log('1.' + a );
}
console.log('2.' + a );  //Uncaught ReferenceError: a is not defined

let과 const의 차이는 무엇일까?

const는 let과 달리 값의 변경을 허용하지 않는다. 최초 할당한 값을 변경하려고 재할당하면 TypeError 발생한다. 상수처럼 사용한다.

var를 주로 선언해서 사용하면 여러 문제가 발생할 수 있다.

요즘 추세 즉, ES2015 명세가 나온 후 부터는 let과 const를 적절히 사용하길 권장하는 편이다.

저작자표시 비영리 변경금지

'Web Front 개발공부 > HTML과 JAVASCRIPT' 카테고리의 다른 글

자바스크립트 for-in 과 for-of 문 (0)	2023.07.16
자바스크립트 서버 통신 Ajax, fetch, axios, XMLHttpRequest (0)	2023.07.09
슬기형의 자바스크립트 기초강의 - 문자열 공백처리 04-2 (0)	2023.01.08
슬기형의 자바스크립트 기초강의 - 모달창 만들어보기 06 (0)	2023.01.07
슬기형의 자바스크립트 기초강의 - JSON 문자열 객체로 변환하기 05 (0)	2023.01.07

슬기로운 개발자 생활

슬기형의 자바스크립트 기초강의 - 변수 var, let, const 07