본문 바로가기
반응형

📍 Front-End/🜸 JavaScript25

[자바스크립트] 호이스팅이 뭘까 ,, (Hoisting!!!!!!!) 처음 자바스크립트를 공부하면서 많이 들어본 개념이고 호이스팅 뭔지 어렴풋이 느낌적인 느낌으로는 알지만 말로 설명하라고 하면 못하겠다 (= 모르는 거) 작년에 면접 볼 때 호이스팅이 뭐냐는 질문에 그,, 그,, 변수 끌어올리는 겁니다!라고 대답한 흑역사가 있다..^^ 이번 기회에 호이스팅에 대해서 제대로 알아보자,,,,,, 🧐 호이스팅, 그것이 알고 싶다. 먼저 호이스팅의 사전적 개념을 들고 와 보면 끌어올리는 것이 맞긴 맞다.. ^^ 근데 무엇을 끌어올리느냐? 자바스크립트에서 호이스팅은 선언된 변수 및 함수를 코드의 최상단으로 끌어올리는 것이다. 단, 선언된 변수 및 함수의 유효 범위 내에서! 최상단으로 끌어올리는 것임을 알아야 된다. 또한 선언된 변수에 할당된 값까지 모두 끌어올리는 것이 아니라 선언 .. 2021. 7. 13.
[자바스크립트] append()와 appendChild()의 차이 특정 요소에 동적으로 element를 추가하는 코드를 구현하다가 append()와 appendChild()의 차이가 궁금해졌다 🧐 append()와 appendChild()의 공통점 두 메서드는 모두 부모 자식에 자식 노드를 추가하는 메서드이다 차이점이 있다면 자식 노드를 추가하는 방식이라는 점! 📍 appendChild() 먼저 appendChild는 오로지 node객체만 자식 요소로 추가할 수 있다 코드를 통해 상세히 알아보자 const divElem = document.createElement('div') const pElem = document.createElemment('p') divElem.appendChild(pElem)' // 결과 : 위와 같이 appendChild()는 노드에 하나의 노.. 2021. 7. 13.
[자바스크립트] DOMContentLoaded와 load의 차이 DOMContentLoaded와 load의 차이 먼저 아래와 같은 코드가 있다고 가정할 때 콘솔에 찍히는 순서는 어떻게 될까? 고민해보자 (고민 중) 결과 js -> DOMContentLoaded -> load 순으로 출력되는 것을 확인할 있다 근데 이건 너무 당연한 예제네요 이미지 리소스가 많은 경우면 결과가 달라졌을 수도? 🤔 Why? load는 모든 리소스(CSS, images..)가 다운로드된 다음에 이벤트 호출되고 DOMContentLoaded는 HTML document를 전부 읽고 DOM트리를 완성하는 즉시 이벤트가 호출된다. 그래서 load의 경우 이미지 리소스가 다 불러와진 후에 이벤트가 실행되기 때문에 리소스가 많을 경우 속도 저하가 발생! 그러나 이미지와 관련된 이벤트를 호출할 경우에는.. 2021. 7. 8.
[자바스크립트] 함수 (function) 자바스크립트에서 함수를 선언하고 정의하는데 다양한 방식이 있다 함수 선언형 vs 함수 표현식 함수 선언형은 호이스팅에 영향을 받지만 함수 표현식은 호이스팅에 영향을 받지 않는다 함수 선언형 printName('예리'); // 제 이름은 예리입니다 function printName(name){ console.log(`제 이름은 ${name}입니다`); } 함수 표현식 const testFunction = function(){ console.log('안녕하세요'); } testFunction(); 결과 : 안녕하세요 printName('예리'); let printName = function(name){ console.log(`제 이름은 ${name}입니다`); } 결과: Uncaught ReferenceEr.. 2021. 6. 23.
반응형

티스토리툴바