시베리안 허숙희의 자바스크립트 비기닝 13 ( var let const)

자바스크립트

by e7e 2023. 6. 12. 15:41

콜백(Callback)함수 까지 이해하고, 만들 수 있다면 당신은 이미 훌륭하당!

(지금은 잠시 미루공,나중에 콜백을 잔뜩 맹글어 보장!)

여기서 자바스크립트 원래 변수 선언 키워드인 var와 나중에 추가된 let, const

의 차이, 그리고 이상하게 많은 사람이 모르는 "use strict" 의 의미를 알아보장.

let과 const가 나중에 나와 최신이고, var는 구닥다리니 사용하지 말라는 말은

어디에도 없으니, 오해없이 이해를 바탕으로 필요에 의해 사용해야 한당!

단지 다른 언어의 변수범위와 일치하는 것은 let과 const당!

자바스크립트에서는 변수 선언시 그냥 변수 이름만 써도 동작 한당!

하지만 이것은 아주 나쁜 습관으로, 습관이 되면 전체 코드의 가독성을 현저히

어지럽혀 의지를 꺽는당, 의도적으로 짧은 코드에서도 사용하지 않길 바란당!

당신이 항상 20줄 이하의 짧은 코드만 짠다면 써도 괜찮당!

만약 이미 var, let, const 없이 그냥 변수 명만 쓰는 습관이 들었다면

아래 코드처럼 script태그 아래 "use strict"를 써 놓고 작업하랑!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
"use strict" // 엄격모드 적용하란 의미

var merong = "메롱";
alert("체킁: " + merong);

anmerong = "안메롱";  // var,let,const 키워드없이 변수 선언
alert("체킁2: " + anmerong); // 실행 안됨에 아주 주목!

</script>

실행 해 보면, 첫번 째 alert만 뜨고 두번 째 alert는 뜨지 않는당!

(무자게 중요한 내용이당!! ---> 왜 그럴까 한번 추측 찍기라도 해보장!!

마지막에 한번 더 이야기 하장! 힌토:디버깅에 유용하게 쓸 수 있당 )

console.log를 확인해 보면 아래와 같은 메세지가 보일 것이당

Uncaught ReferenceError: anmerong is not defined

당신의 나쁜 습관은 이제 저절로 점점 고쳐지게 될 것이당!(고치장!)

var와 let의 차이

varVSlet.html을 아래 내용으로 맹글어 결과에 앗 하고 느낌받자!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>

for(var i=1; i<=10; i++){};
alert("아이 체킁: " + i); //?

for(let j=1; j<=10; j++){};
alert("제이 체킁: " + j) //?

</script>

그렇당 var의 범위(보통 scope라 함)가 let 보다 넓다는 느낌이 온당!

let은 {}(중괄호)으로 범위가 한정된당!, 그렇다면 var는

var는 function 키워드에 의해 범위가 한정된당 곧 function 안에서 선언되었나?

밖에서 선언되었나로 접근 범위가 한정된당!

아래 코드로 설명으론 조금 애매할 수 있는 부분을 느낌으로 채우장!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>

var merong = "메롱"; // 전역(Global) 변수

function varCheck(){
    var merong = "안메롱"; // 지역(Local) 변수
    merong = "안안메롱";

    alert("체킁2: " + merong);
}

varCheck();
alert("체킁: " + merong);

</script>

let은 중괄호 안 밖, var는 function 안 밖으로 담장이 둘러쳐 진다라고 외우장!

const는 말 그대로 상수를 선언할 때 사용하는 데 여기에도 오해가 많당!

원시타입(primiive)이냐 객체(object) 타입이냐 따라 인식이 달라야 한당!

아래 코드를 실행하고(주석을 풀었다 막았다하면서) 결과 누느로 면밀체킁!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>

const primStr = "로제"; // 문자열(원시타입) 상수 선언
//primStr = "제니";       // 주석풀면 당연 에러, 못 바꿈!
alert("디버깅 요기요 1");

const myNumber = 272;   // 넘버(원시타입) 상수 선언
//myNumber = 337          // 주석풀면 당연 에러, 못 바꿈!
alert("디버깅 요기요 2");


const myStar = {       // 객체(Object) 상수 선언
    name:"제니",
    song:"솔로"
};

myStar.name = "로제";   // 안 에러
myStar.song = "Gone";   // 안 에러
alert("디버깅 요기요 3");

console.log("체킁: ",myStar); // 결과 눈으로 화긴


myStar = {};         // 주석 풀면 에러        
alert("디버깅 요기요 4");

</script>

차분하게 보았다면 느낌이 왔을 것이당!, 원시타입일 땐 그냥 못 바꾼당!

오해의 소지는 객체(object)타입인데, 객체의 속성은 바꿀 수 있공, 객체 자체는 못 바꾼당!

요걸 요렇게 기억하장, 객체는 여러가지 속성을 가질 수 있으니 컨테이너당(박스)

컨테이너가 const로 선언 되었을 때는 컨테이너 곧 박스는 아래 본드칠을 해 놓아서

못 바꾸고, 박스 안의 내용물만 바꿀 수 있다공!!

그리고 유용한 디버그팁 한가지

코드에 여러개의 alert를 일부러 넣어 놓았는데 디버깅에 활용하면 아주 유용하당,

브라우져 자바스크립트는 문제가 되는 코드가 있을 때도 그 다음이 실행되는 경우와

실행되지 않는 경우가 있당! 이럴 때 어디까지 실행되었는지를 alert를 활용하면 좋당!

코드 중간 중간에 alert를 집어넣고, 실행해 본 다음에

특정 alert가 실행되지 않았다면 그 alert 이전 코드에 문제가 있는 것이다!.

애매한 경우 이방법을 이용하면 문제라인을 빠르게 찾을 수 있당!

한 사람을 온전히 이해하려면, 그 사람의 과거 와 성장환경, 한가지 더 한다면,

프라이빗한 내면성향까지 꽤나 많이 알아야 한당!

우린 보통 이런 수고를 하지 않는당!, 하지만 이런 수고를 받고는 싶당!(그래서 성공!)

때론 오해가 있더라도 너무 무리한 수고는 관두장

https://www.youtube.com/watch?v=GTrF4CgCmQU

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 15 (즉각실행함수) (0)	2023.06.13
시베리안 허숙희의 자바스크립트 비기닝 14 (재귀호출 & 화살표함수) (4)	2023.06.13
시베리안 허숙희의 자바스크립트 비기닝 12 (콜백함수 callback) (0)	2023.06.09
시베리안 허숙희의 자바스크립트 비기닝 11 (JSON) (0)	2023.06.08
시베리안 허숙희의 자바스크립트 비기닝 10 (배열 Array) (7)	2023.06.07