본문 바로가기
Web/JavaScript

02. 변수(let), 상수(const)

by 사라리24 2024. 4. 16.

 

1. 변수 (let)

데이터를 저장할 수 있는 메모리 공간

  • 값이 변경될 수 있음
  • 자바스크립트의 변수는 타입이 없음
  • let 키워드 사용하여 변수를 선언
     
언어별 변수 선언

파이썬

   name = '김시과'   

자바스크립트

    let name = '김사과' ;  
​
아주 엣날 엣적 변수 선언

   var name = '감사과' ;   

 

 

  • var 
       
            console.log(num); //undefined
            var num=10;
           
         { console.log(num); //전역변수 num=10
            var num=20; 
            console.log(num); //지역변수 num=20, 
           }

            console.log(num) //전역변수 num=20, 세상에! { }밖에 나가면 10이 찍힘
  • 유연한 변수 선언 방식
  • 지역 변수, 전역 변수와의 구별이 없습니다
  • 같은 이름의 변수를 선언할 수 있습니다

 

  • let
  • 지역 변수, 전역 변수의 구별이 확실합니다
  • 같은 이름의 변수를 선언할 수 없습니다

 

 

  • 트랜스 컴파일러
    • 과거 브라우저 및 특정 브라우저 버전등을 모두 사용할 수 있도록 해석해주는 라이버러리
    • BABEL 등

 



         <body>

                 <h2>변수</h2>

                  <script>   

                          var num;
                          console.log(num);
                          console.log(name);

                  </script>     

        </body>

* 변수에 값을 넣지 않았다면,
: print 를 찍어도 undefind로 출력됩니다.

 


      
         <body>

                 <h2>변수</h2>

                  <script>   

                       str='안녕하세요'; // 변수 타입 선언 X
                       console.log(str); // 안녕하세요 출력

                       var str='반갑습니다';  // 변수 타입  선언 O
                       console.log(str); // 반갑습니다 출력

                  </script>     
        </body>

* 변수 타입을 선언하든 하지 않든 값은 동일하게 출력됩니다.

 


      
         <body>

                 <h2>변수</h2>
 
                  <script>    

                      var num;
                      num=10;
                      console.log(num); // 10 출력

                      {                   
                      console.log(num); // 10 출력
                      var num=20;
                      console.log(num); // 20 출력
                      }

                       console.log(num); // 20 출력

                     // let
                     // let num = 10;  
                     // console.log(num);  
                     // 에러: num이 이미  선언되어 있음


                     let val1=10;
                     console.log(val1); // 전역변수 =10

                     { 
                         let val1=20; 
                         console.log(val1); // 지역변수 =20
                     }
 
                     console.log(val1);    // 전역변수 =10


                     </script>     
        </body>

* var은 지역변수, 전역변수 구별이 없습니다
* let은 동일한 변수명을 중복해서 사용할 수 없습니다
* let은 지역변수, 전역변수 구별이 있습니다

 

 

 

2. 상수(constant)

  • 한번 선언된 상수는 다시 재정의 할 수 없음
  • 값을 재할당 할 수 없음

 

 

  • 상수선언

*변수의 경우
let name; // 변수선언
name = '김사과' ; // 리터럴 할당

let name = '김사과 // 변수의 선언 + 리터럴 할당

*상수의 경우
const name;
name = '김사과' (x)

const name = '김사과' (o)
: 변수선언과 동시에 값이 할당되어야 함!
@자바스크립트에서 상수를 권장하는 이유
  • 개발자 실수를 방지하기 위해
  • 해킹을 방지 하기 위해
* 변수에 값을 할당하고 바꾸는 경우가 많지 않습니다.
*  바꾸지 않을 경우 상수에다 넣고 계속 사용하게 됩니다.
*  명확하게 하기 위해서 사용합니다.

 

 

  • 상수선언
     
         <body>

                 <h2> 상수 </h2>
 
                  <script>    

                    let str1; //변수선언
                    console.log(str1); // 'undefined' 출력
                    str1='김사과';  //값할당
                    console.log(str1); // '김사과' 출력 

                    // const str2;
                    // console.log(str2) // '에러' : 값할당X

                    const str2='김사과';   // 변수 선언 + 값 할당
                    console.log(str2); // '김사과' 출력 
                   
                   //st2 = '반하나';  // '에러' : 값 재할당 불가
                   
 
                    </script>     
        </body>
* let으로 선언하든, const로 선언하든 결과는 동일합니다.

 

  • 상수객체 선언
     
         <body>

                 <h2> 상수객체 </h2>
 
                  <script>    
 
                    const obj = { id : 'apple' , name : '김사과' , gender : 'female' } ;  
                    // 객체라는 자료구조(object)
                    // key : value 형태로 저장

                    console.log(obj.id); // apple 출력
                    console.log(obj.name) // '김사과' 출력 
                    console.log(obj.gender); // female 출력
                   // 자바스크립트에서 상수라는 개념이 let이 아닌 const로 만들어졌기 때문에 메모리 주소는 바꿀 수 없다.
                   // 그러나 value의 값은 바뀔 수 있다.
                   // obj 값 전체를 바꾸는 건 불가능하나(메모리 주소값을 못 바꾸기 때문), value값은 바꿈
 
                    obj.id='banana' ; 
                    obj.name='반하나' ;
                    obj.gender='male' ; 
                    console.log(obj.id);   // banana 출력
                    console.log(obj.name ); // 반하나 출력 
                    console.log(obj. gender); // male 출력
 
                    </script>     
        </body>

* 객체의 값은 변경 가능합니다. (주소는 변경 불가능)

 

 

'Web > JavaScript' 카테고리의 다른 글

06. 함수(Function)  (0) 2024.04.16
05. 배열(Array)  (0) 2024.04.16
04. 연산자, 제어문, 반복문  (0) 2024.04.16
03. 데이터타입, 대화상자  (0) 2024.04.16
01. 자바스크립트(JavaScript)  (0) 2024.04.12

관련글

티스토리툴바