프로그래머스 데브코스 프론트엔드 📝 1일차 공부 내용 정리 노션 TIL 작성 후 클로저에 대한 추가적인 공부가 필요한 것 같아 정리하였습니다. 클로저(Closure)란? MDN 문서에 따르면 함수와 함수가 선언된 어휘적 환경(lexical environment)의 조합이다. 무슨 말인지 이해가 안 될 것이다. 조금 단순하고 가볍게 이해를 시작해보자. 자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있는데 이를 내부 함수라고 한다. function outer() { function inner(){ var title = 'coding everybody'; alert(title); } inner(); } outer(); } 위 코드에서 함수 outer의 내부에는 함수 inner가 정의되어 있다. 함수 i..

실행 컨텍스트(Execution Context) 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 이게 무슨 소리인가 싶을텐데 글을 좀 더 읽어보면 이해할 수 있으니까 뒤로가지 말자. 실행 컨텍스트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 객체를 구성하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고 외부 환경 정보를 구성하고, this 값을 설정하는 등의 ..

고차 함수 함수를 호출할 때마다 반환 함수를 생성하는 함수를 고차함수라고 한다. 고차함수를 이용하면 코드의 중복을 제거하는 것이 용이하다. const func = () => { return () => { console.log('hello'); }; }; 반환된 함수는 다른 변수에 저장할 수 있고, 그 변수에 저장된 함수를 다시 호출할 수 있다. const innerFunc = func(); innerFunc(); // hello 반환하는 값을 바꾸고 싶을 때는 매개변수를 사용한다. const func = (msg) => { return () => { console.log(msg); }; }; 화살표 함수 문법에 따라 함수의 본문에서 바로 반환되는 값이 있으면 {와 return을 생략할 수 있다. cons..

querySelector 자바스크립트에서는 HTML 태그를 가져오는 것을 선택한다고 표현한다. querySelector는 선택하기 위해 사용하는 함수이고, 사용 방법은 다음과 같다. document.querySelector('선택자') 선택자는 HTML 태그를 선택할 수 있게 도와주는 문자열을 의미한다. 태그가 여러 개 있는 경우에 모두 선택하고 싶을 경우 querySelectorAll 함수를 사용한다. 1번째 참가자 제시어: 입력 버튼2 버튼3 버튼이 세 개 이므로 콘솔 창에 세 개의 태그가 동시에 표시된다. 여러 개를 한 번에 표시하려고 배열을 사용한 것처럼 보이지만, 실제로는 배열이 아니라 NodeList라는 특수한 객체이다. 세 개의 버튼 중 두 번째와 세 번째 버튼을 동시에 선택하고 싶을 경우 ..

window 브라우저 전체를 담고 있는 객체 document는 웹 페이지 전체를 의미 요소를 가져오는 방법 중 가장 대표적으로 쓰이는 것 document.querySelector()의 첫 번째 인자 안에는 css 선택자들을 넣어줌 이벤트를 감지하려면 리스너를 달아줌 addEventListener('click', () => {}) 첫 번째 인자는 어떤 이벤트가 발생했는지를 문자열로 두 번째 인자는 콜백 함수 요소 생성 document.createElement("button") 첫 번째 인자는 생성하고자 하는 태그의 이름을 문자열로 span.innerText = "X"; li.appendChild(span) button.addEventListner()도 가능 button.onclick = () => {} l..

lecture1 // 변수, 호이스팅, TDZ // var는 한번 선언된 변수를 다시 선언 가능 var name = 'Mike'; console.log(name); // Mike var name = 'Jane' console.log(name); // Jane // 같은 상황에서 let은 에러 let name = 'Mike'; console.log(name); // Mike let name = 'Jane' // error! console.log(name); // var는 선언하기 전에 사용 가능 console.log(name); // undefined var name = 'Mike'; // 왜? var는 이렇게 동작하기 때문 /* var로 선언한 모든 변수는 코드가 실제로 이동하지는 않지만 최상위로 끌어올..

호이스팅 함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효 스코프의 최상단에 선언 하는 것 var, let, const 모두 호이스팅 됨 TDZ (Temporal Dead Zone) '임시로 죽어있는 공간' 선언 전에 변수를 사용하는 것을 비허용하는 개념상의 공간 let과 const로 선언한 변수는 초기화가 되기전까지 TDZ라는 곳에 머물러 초기화가 될 때까지 잠시 '죽어있는 상태'이기 때문에 선언 전에 참조가 불가능한 것 자바스크립에서 동기와 비동기 자바스크립에서 동기와 비동기 자바스크립트에서 동기와 비동기에 대해서 알아본다. callback, Promise, async/await 코드도 함께. velog.io 자바스크립트 호출 스택(Call Stack) 동작 예제 자바스크립트 호출 스택(Ca..