JS31 모던 자바스크립트 Deep Dive - let, const 키워드와 블록 레벨 스코프 15장 let, const 키워드와 블록 레벨 스코프 var 키워드로 선언한 변수의 문제점 1) 변수 중복 선언 허용 var는 중복 선언이 가능 예제 var x = 1; var y = 1; var x = 100; var y; // 초기화문이 없는 변수 선언문은 무시된다. console.log(x); // 100 console.log(y); // 1 2) 함수 레벨 스코프 var는 함수 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var로 선언한 변수는 모두 전역변수가 된다. 예제 var x = 1; if(true) { var x = 10; } console.log(x); // 10 예제 var i = 10; for(var i=0; i 2024. 1. 13. 모던 자바스크립트 Deep Dive - 전역 변수의 문제점 14장 전역 변수의 문제점 변수의 생명 주기 변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 언젠가는 소멸한다. 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 지역 변수의 생명주기 전역 변수의 생명 주기는 앱의 생명 주기와 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. ⇒ 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다. 예제 function foo() { var x = 'local'; console.log(x); return x; } foo(); console.log(x); // ReferenceError: x is not defined 예제에서 x는 foo()가 실행되는 시점에서 코드로 들어가기 전에 undefined로 초기.. 2024. 1. 13. 모던 자바스크립트 Deep Dive - 스코프 13장 스코프 스코프란? var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프는 다르게 동작한다. 스코프는 변수 그리고 함수와 깊은 관련이 있다. 함수에서 매개변수는 함수 몸체 내부에서만 참조할 수 있다. 매개변수의 스코프가 함수 몸체 내부로 한정되기 때문이다. function add(x, y) { console.log(x, y); //2, 5 return x + y; } add(2, 5); // 매개변수 x, y는 함수 몸체 내부에서만 참조할 수 있다. // 그래서 x, y를 쓰면 에러가 나는 것이다. console.log(x, y); // ReferenceError: x is not defined 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위.. 2024. 1. 8. 모던 자바스크립트 Deep Dive - 4.4장 4.4장 변수 선언의 실행 시점과 변수 호이스팅 console.log(score); var score; 위 예제를 보면 console.log가 실행되는 시점에는 아직 score 변수의 선언이 실행되지 않았으므로 참조에러가 발생할 것처럼 보인다. 하지만 그렇지 않고 undefined가 출력된다. 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다. 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기 전에 평가 과정을 거치면서 소스코드 실행 준비를 한다. 이러한 평가 과정에서 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 먼저 실행한다. 평가 과정이 끝나면 비로소 모든 선언문을 제외하고 소스코드를 한 줄.. 2024. 1. 7. 이벤트 리스너 달기(콜백함수) addEventListener 입력 const number = parseInt(prompt('몇 명이 참가하나요?'), 10); alert(number); const yesOrNo = confirm('맞나요?'); document.querySelector('input').addEventListener('input', function() { console.log('글자 입력'); }); document.querySelector('button').addEventListener('click', function() { console.log('버튼 클릭'); }); 글자를 입력하는 event 이름은 input이다. 이름없는 함수를 넣어주면 input에 (input = 입력) 입력 할때마다 함수부분이 계속 실행된다.. 2022. 7. 7. HTML 태그 선택하기(querySelector) document.querySelector('선택자') document는 브라우저에서 제공해주는 객체여서 따로 선언을 하지 않고도 사용 가능 querySelector라는 메소드 선택자는 html태그를 선택할 수 있는 특수한 문자열 const $input = document.querySelector('input'); input태그를 선택해서 $input안에 저장한다는 의미 $붙인것은 변수명앞에 $ _ 같은것붙일 수 있음 자신만의 규칙: 태그를 변수에 넣을 때는 변수명 앞에 $를 붙인다. -> 변수만 보고도 이게 자바스크립트 값이 아니라 태그를 선택한 것이구나 라는 것을 쉽게 알 수 있다. 태그가 여러개면 $$ 두개. 태그 여러개를 선택할때 querySelectorAll 입력 버튼2 버튼3 버튼 3개를 다 선.. 2022. 7. 7. 이전 1 2 3 4 5 6 다음
