본문 바로가기
  • 개발공부 및 일상적인 내용을 작성하는 블로그 입니다.

JAVASCRIPT39

자바스크립트 - let, const 와 템플릿 리터럴 var 이 있는데 굳이 let, const 가 나온 이유? * var 이 가진 문제점 1. var 의 첫번째 문제점 var 의 첫번째 문제점은 바로 함수 스코프이다. 기본적으로 자바스크립트에서는 블록 스코프라는 개념이 없었다. 때문에 블록 내부에서 var 로 선언된 변수들은 모두 전역 변수 취급을 받았기 때문에 프로그램 상에 전역 변수가 너무 많아지는 문제가 발생했다. 예를 들어 아래와 같은 코드가 있다고 가정하자. if(true){ var num = 10; // if 문 안에서만 쓰기 위한 변수 console.log(num); } console.log(num); // 10 console.log(window.num); // 10 위와 같이 작성한 코드에서 num 변수는 전역 변수처럼 취급되어, if 문 .. 2022. 2. 5.
자바스크립트 - DOM 객체(2), 그리고 callback 함수 HTML element 다중 접근 지금까지는 특정한 방법을 통해 하나의 element에 접근하는 방법을 익혔다. 그런데 하나의 element 에만 접근하는 것이 아니라, 한번에 여러개의 element 에 접근하는 방법도 존재한다.(다중 element 접근) - 하나의 element 에만 접근하는 함수와 여러개의 element 에 접근하는 함수의 차이는 getElement, getElements 와 같이 s 를 붙여 여러개의 대상을 명시하느냐, s 없이 단일 대상을 명시하느냐 로 구분할 수 있다. * document.getElementsByName() : 이름 속성을 기준으로 다중 접근 * document.getElementsByClassName() : 클래스 이름 속성을 기준으로 다중 접근 * docum.. 2022. 2. 4.
자바스크립트 - DOM 객체(1) DOM 객체 - 자바스크립트를 통한 html 문서 접근 자바스크립트로 html 에 접근할 때 무엇을 기준으로 접근하는지에 따라 접근하는 방법이 달라질 수 있다. 같은 element 에 접근하더라도 id 속성을 기준으로 접근할 수도 있고 태그 이름, 클래스 이름, name 속성 등을 기준으로도 접근할 수 있다. 우선 id 속성을 기준으로 접근해보자. - index.html Hello, JS! site link - style.css .title{ font-weight: bold; font-size: 30px; } - test.js var var1 = document.getElementById("root"); console.log(var1); 위와 같이 코드를 작성한 후 Visual Studio Code 의 .. 2022. 2. 4.
자바스크립트 - 변수 스코프와 바인딩, 그리고 this 스코프(Scope) 스코프란 어떤 변수의 유효 범위를 뜻한다. 보통 다른 언어 에서의 전역 변수, 지역 변수 개념과 동일하다. 지역 스코프(지역 변수)는 다시 블록 스코프와 함수 스코프로 나뉜다. - 블록 : 중괄호를 통해 표시된 범위 -> 중괄호 내부에서 선언된 변수는 중괄호 내부에서만 유효하다. (블록 스코프는 ES6 에서 추가된 개념이다. let, const 키워드를 활용하여 블록 내부에서만 유효한 지역 변수를 만들 수 있다.) - 함수 스코프 : 함수 내에서 선언된 변수는 함수 밖에서는 사용 불가능하다. * 블록 스코프의 예시 var name = "minchul"; console.log(name); // minchul { const name = "youngsu"; console.log(name);.. 2022. 2. 2.