자바스크립트 기초 2

var vs let vs const (호이스팅)

자바스크립트의 변수(상수 포함)에 대해서 알아보자. var는 한번 선언된 변수를 다시 선언할 수 있다. 반면 let은 아래처럼 불가능하다.

또한 var는 아래처럼 선언하기 전에 사용할 수 있다. 그 이유는 var로 선언한 모든 변수는 코드가 실제로 이동하지 않지만, 최상위권으로 끌어온 것처럼 동작한다. 이를 호이스팅이라고 한다. 하지만 콘솔에는 undefined가 뜨는데 그 이유는 선언은 호이스팅이 되지만, 할당은 호이스팅이 되지 않기 때문이다.

let은 그게 불가능하덴 실제로 let도 호이스팅은 되지만, let과 const 같은 경우, Temporal Dead Zone에 영향을 받기 때문이다. Temporal Dead Zone에 속하는 변수는 할당을 하기 전에는 사용할 수 없다. 이는 코드를 예측가능하게 만들고 잠재적인 버그를 줄이게 한다.

호이스팅: 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동

변수의 생성과정은 3단계로 나눠진다.
1. 선언 단계
2. 초기화 단계
3. 할당 단계

var는 선언과 초기화가 동시에 된다. => 할당

let은 1 -> 2 -> 3

const는 선언과 초기화와 할당이 동시에 되야 한다.

var는 함수 스코프이고 let, const는 블록 스코프이다. 무슨 말이냐고 하면, var는 아래처럼 if문 안에서 선언되어도 바깥에서 쓸 수 있다. 반면 let과 const는 {} (블록) 안에서 선언되었으면, 거기 바깥을 벗어날 수 없다.

함수 스코프란 말은 var도 함수 안에서 선언되었으면 그 함수 바깥에서 사용을 못한다는 뜻이다.

참 자유분방한 언어인 것 같다 ㅎㅎ 왠만하면 변수는 let과 const를 쓰고 그 중에서도 const를 앵간하면 쓰자.

벡틱 사용법

백틱(`) 을 사용하여 '+' 보다 훨씬 간편하게 자바스크립트 변수를 표현해낼 수 있다.

        function sayHello(name, age) {
            //console.log("hello" + name + "you are" + age);
            console.log(`hello ${name} you are ${age}`)
        }

        sayHello("kang", 28);

        const greet = sayHello("kang", 0) //return을 안 하니 비워있다.
        console.log(greet);

간단한 함수를 가진 객체만들기

        const calculator = { //calulator 객체 만들기
            plus: function (a, b) {
                return a + b;
            }
        }

        const plus = calculator.plus(5, 5);

        console.log(plus);

자바스크립트로 Html Dom 다루기

<h1 id="title">Hello World!</h1>
----생략------

        //document.getElementsByClassName, document.getElementsByTagName
	const title = document.getElementById("title");
        console.log(title);

        //DOM 다큐멘트 오브젝트 모델
        //자바스크린트는 html의 모든 태그를 가져와서 그걸 객체로 바꿔줄 수 있음
        //console 은 하나의 객체
        title.innerHTML = "Hi im update";


        console.dir(title); //전체 정보 제공
        title.style.color = 'red';
        document.title = "I own you";

위 방식보다 querySelector를 추천

 const title2 = document.querySelector("#title");   //.title  = class명으로 찾기 
        //노드의 첫번째 자식을 반환

이벤트 헨들링

자바스크립트는 위의 사용법처럼 단지 html, css를 변경하기 위해 만들어진 게 아니고 이벤트에 반응하기 위해 만들어졌다. 이벤트를 조작하려면 이벤트리스너를 사용하면 되는디, 리스너와 함수의 차이점은 리스너는 운영체제의 콜백형태이다. 예를 들어

$("p").click(function(){ //제이쿼리
리스너--감시자

p태그에 직접 onclick을 하면 p가 직접 반응해서 함수를 호출하지만, 지금 방식은 이 스크립트가 감시하다가 p가 건드리는 걸 보면 반응함

이벤트 핸들링을 하고자 하는 객체에 addEventListener() 를 추가한 후, 핸들링하고자 하는 이벤트 종류와 리스너를 파라미터로 추가한다.

//window.addEventListener("resize", handlerResize()); //바로 호출
       window.addEventListener("resize", handlerResize); //내가 원하는 타이밍에 호출
       //이벤트리스너 = 이벤트를 중간에 가로챌 수 있음. 리스너는 이벤트를 받길 기다림, 앞에 이벤트 키값을 적어주면 됨

       function handlerResize() {
           console.log("resize 됨");
       }

이벤트 키값은 래퍼런스를 참고하거나, https://developer.mozilla.org/ko/docs/Web/Events

  // function handlerResize(event){
        //     console.log(event);  //event 키 값을 확인할 때 유용
        // }

if-else로 Dom 조작

 title.addEventListener("click", handlerClick)

        function handlerClick() {
            //console.log("클릭됨");
            const currentColor = title.style.color;
            if (currentColor === BASE_COLOR) {
                title.style.color = OTHER_COLOR;
            } else {
                title.style.color = BASE_COLOR;
            }

        }

        const BASE_COLOR = "rgb(52, 73, 94)";
        const OTHER_COLOR = "#7f8c8d";

        function init() {
            title.style.color = BASE_COLOR;
            title.addEventListener("click", handlerClick)
        }

        init();

클래스 추가 및 삭제

       const title = document.querySelector("#title");

        const CLICKED_CLASS = "clicked";

        function handleClick(){
           
            const hasClass = title.classList.contains(CLICKED_CLASS);            

            if(hasClass){
                title.classList.remove(CLICKED_CLASS);
            }else{
                title.classList.add(CLICKED_CLASS);
            }

            // const currentClass = title.className;

            // if(currentClass !== CLICKED_CLASS){
                 //title.className = CLICKED_CLASS; 이전 클래스네임 다 지워지고 이걸로 대체됨
            // }else{
            //     title.className = "";
            // }
        }


        function init(){
            title.addEventListener("click",handleClick2);
        }

        init();

Toggle로 간단하게 구현

        function handleClick(){
            title.classList.toggle(CLICKED_CLASS);
        }