본문 바로가기

분류 전체보기48

Hoisting 호이스팅이란? 코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것을 말한다. 물리적으로 코드를 끌어올리는 것은 아니다. JS엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다. JS엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, let, function 등)을 스코프에 등록한다. 호이스팅으로 인해 이미 변수선언/함수선언을 한 것으로 취급되어 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. var, let, const의 호이스팅 var로 선언한 변수는 선언문보다 먼저 참조해도 에러가 나지 않는 반면 let과 const는 참조에러(Reference Error)가 발생한다. 이는 let, const로 선언한 변수는 스.. 2021. 12. 27.
Scope, Lexical Scope(정적 스코프) var vscope = 'global'; function fscope(){ console.log(vscope); } fscope(); //결과: global 함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수(global scope)는 애플리케이션 어디에서든 접근이 가능한 변수이다. var vscope = 'global'; function fscope(){ var vscope = 'local'; console.log('함수안 '+vscope); } fscope(); console.log('함수밖 '+vscope); //결과: 함수안 local 함수밖 global 지역변수의 유효범위는 함수 내부이다. var vscope = 'global'; function fscope(){ vscope = .. 2021. 12. 27.
Craousel 아이디어 1) 뼈대를 HTML로 작성 2) 화살표를 누르면 이미지 바뀌도록 JS 작성 2-1) button.addEventListner("click", function ButtonClick(){}) 를 사용해서 화살표를 누르면 다음 이미지로 넘어가도록 작성, 배열에 이미지를 넣어서 배열에 담긴 이미지를 순차적으로 보이도록 해보자. 2-2) 좌우 화살표와 아래 라디오버튼 동기화. -> 3-1)에서 선언한 $input 변수를 이용해서 $input[].checked = "checked";로 라디오버튼을 체크하였다. 3) 아래 버튼에 해당하는 상호작용 JS작성 3-1)버튼을 누를 때마다 배열의 인덱스를 재설정, JS의 number를 index로 지정. 정리할 것 Array() 생성자->배열 리터럴과 비교해서 정.. 2021. 12. 24.
Background Changer 아이디어 1) 해당 웹페이지와 같은 형태를 HTML과 CSS로 작성 2) 랜덤한 Hex color code를 생성하는 함수 작성 2-1)math.random()과 math.floor()를 사용을 사용 2-2)for를 이용해서 6개의 문자열을 합치자 2-3)for문을 돌리고 해당 값을 hex_color에 넘겨 준 후에는 hex_color를 초기화시켜준다. 3) 해당 함수를 적용하여 버튼 클릭 시 랜덤한 Hex color code를 생성하여 페이지의 배경 색깔과 Hex color code수정 정리할 것: Math. 함수, Hex color code, HTML과 JS연결방법, 문자열에 변수 넣기 CLICK ME! const hex = "01233456789ABCDEF"; var hex_color = ""; c.. 2021. 12. 24.
appendChild()와 node참조 두 코드의 차이는? const something = document.createElement("p"); for (let i = 0; i < 5; i++) { something.textContent = i; document.body.appendChild(something); } //결과 : 4 for (let i = 0; i < 5; i++) { const something = document.createElement("p"); something.textContent = i; document.body.appendChild(something); } //결과 : //0 //1 //2 //3 //4 위의 코드는 createElement를 통해 p태그를 만들고 이후에는 반복문이 실행되면서 바뀐값이 appendCh.. 2021. 12. 24.
크롬 콘솔모드에서 let변수만 재선언이 되는 이유 비주얼 스튜디오 코드를 이용해서 코드를 작성하는 중에 내가 제대로 작성하고 있나 확인할 겸 크롬 콘솔모드에서 코드를 확인하곤 한다. 분명 let으로 선언한 변수는 재선언이 안된다고 했는데 에러메세지없이 그대로 재할당이 되었다! 왜 이러는지 구글링 한 결과 아래와 같은 답을 얻을 수 있었다. 일반 스크립트 실행과 콘솔 모드에는 약간의 문법 차이가 있다. 전자에서는 표준 JS문법을 따르기 때문에 let을 재선언하려고 하면 오류를 출력한다. 후자는 예외적으로 콘솔모드의 interactive한 특징 때문에 재선언을 허용한다. > let a; let a; // 한 줄에 재선언하는 경우는 재선언 불가 < Uncaught SyntaxError: Identifier 'a' has already been declared.. 2021. 12. 24.

티스토리툴바