[JS] 고차 함수
2022. 5. 2. 12:10
프로그래밍/JavaScript
고차 함수 함수를 호출할 때마다 반환 함수를 생성하는 함수를 고차함수라고 한다. 고차함수를 이용하면 코드의 중복을 제거하는 것이 용이하다. const func = () => { return () => { console.log('hello'); }; }; 반환된 함수는 다른 변수에 저장할 수 있고, 그 변수에 저장된 함수를 다시 호출할 수 있다. const innerFunc = func(); innerFunc(); // hello 반환하는 값을 바꾸고 싶을 때는 매개변수를 사용한다. const func = (msg) => { return () => { console.log(msg); }; }; 화살표 함수 문법에 따라 함수의 본문에서 바로 반환되는 값이 있으면 {와 return을 생략할 수 있다. cons..
[JS] 태그 선택, 이벤트 달기
2022. 4. 29. 17:52
프로그래밍/JavaScript
querySelector 자바스크립트에서는 HTML 태그를 가져오는 것을 선택한다고 표현한다. querySelector는 선택하기 위해 사용하는 함수이고, 사용 방법은 다음과 같다. document.querySelector('선택자') 선택자는 HTML 태그를 선택할 수 있게 도와주는 문자열을 의미한다. 태그가 여러 개 있는 경우에 모두 선택하고 싶을 경우 querySelectorAll 함수를 사용한다. 1번째 참가자 제시어: 입력 버튼2 버튼3 버튼이 세 개 이므로 콘솔 창에 세 개의 태그가 동시에 표시된다. 여러 개를 한 번에 표시하려고 배열을 사용한 것처럼 보이지만, 실제로는 배열이 아니라 NodeList라는 특수한 객체이다. 세 개의 버튼 중 두 번째와 세 번째 버튼을 동시에 선택하고 싶을 경우 ..
[JS] 이벤트 버블링 / 이벤트 위임
2022. 4. 11. 01:50
프로그래밍/JavaScript
window 브라우저 전체를 담고 있는 객체 document는 웹 페이지 전체를 의미 요소를 가져오는 방법 중 가장 대표적으로 쓰이는 것 document.querySelector()의 첫 번째 인자 안에는 css 선택자들을 넣어줌 이벤트를 감지하려면 리스너를 달아줌 addEventListener('click', () => {}) 첫 번째 인자는 어떤 이벤트가 발생했는지를 문자열로 두 번째 인자는 콜백 함수 요소 생성 document.createElement("button") 첫 번째 인자는 생성하고자 하는 태그의 이름을 문자열로 span.innerText = "X"; li.appendChild(span) button.addEventListner()도 가능 button.onclick = () => {} l..
[JS] 코딩앙마 자바스크립트 중급 강좌 정리
2021. 9. 28. 10:44
프로그래밍/JavaScript
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로 선언한 모든 변수는 코드가 실제로 이동하지는 않지만 최상위로 끌어올..
[JS] 호이스팅, TDZ, 동기·비동기, 콜 스택 동작
2021. 9. 23. 02:11
프로그래밍/JavaScript
호이스팅 함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효 스코프의 최상단에 선언 하는 것 var, let, const 모두 호이스팅 됨 TDZ (Temporal Dead Zone) '임시로 죽어있는 공간' 선언 전에 변수를 사용하는 것을 비허용하는 개념상의 공간 let과 const로 선언한 변수는 초기화가 되기전까지 TDZ라는 곳에 머물러 초기화가 될 때까지 잠시 '죽어있는 상태'이기 때문에 선언 전에 참조가 불가능한 것 자바스크립에서 동기와 비동기 자바스크립에서 동기와 비동기 자바스크립트에서 동기와 비동기에 대해서 알아본다. callback, Promise, async/await 코드도 함께. velog.io 자바스크립트 호출 스택(Call Stack) 동작 예제 자바스크립트 호출 스택(Ca..