피리부는 사나이 (pied piper)

이벤트 핸들러 : 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수. 1. 이벤트 핸들러 어트리뷰트 방식 : HTML 요소의 어트리뷰트 중에 이벤트에 대응하는 핸들러 어트리뷰트 값으로 함수 호출문 등의 statement를 할당하면 핸들러 등록 됨 CLick me! 하지만 HTML과 JS는 관심사가 다르므로 혼재하는 것보다 분리하는 것이 좋음. 그러므로 이 1번 방식은 사용하지 않는 것이 더 좋음 2.이벤트 핸들러 프로퍼티 방식 : window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 핸들러 프로퍼티를 가지고 있음. 프로퍼티에 함수를 바인딩하면 이벤트 핸들러 등록 됨 const $button = document.querySelector('button');..

자바스크립트 언어내에서 비동기를 가능케하는 대표적 3가지 방법 콜백 : 자바스크립트에서는 함수의 인자 값으로 함수를 이용할 수 있다. 인자를 통해서 바깥에 있는 함수를 내부에서 실행시키는 것이다. 그러므로 콜백이라는 것은 다른 함수에 불러오는 함수다. 그리고 그것은 두 번째 함수를 실행 시킬 것이다. 콜백함수의 예시를 보자 function printString(){ console.log("Tom"); setTimeout(function() { console.log("Jacob"); }, 300); console.log("Mark") } printString(); 만약 이 코드가 일반적으로 동기적 코드라면 아래 순서대로 나와야할 것이다 Tom => Jacob => Mark (동기적 순서) 그러나 setTi..

배열의 비 구조화 할당 변수에 배열 요소 (인덱스)를 하나하나 할당하는 것을 간단화 시킬 수 있음 let arr = ["one", "two", "three"]; //1. 기존의 방식 let one = arr[0]; let two = arr[1]; let three = arr[2]; console.log(one, two, three); //2. 더 나은 방식 let [one, two, three] = arr; //배열안에 변수 할당 후 오른 쪽에 배열 할당하면 인덱스 순서대로 부여 //대괄호를 이용해서 배열을 변수에 할당하는 것은 비 구조화 할당이라고 함 객체의 비 구조화 할당 객체 프로퍼티 요소를 변수에 하나하나 ‘표기법'으로 할당하는 것을 간단화 시킬 수 있음 //기존 방식 let object = { ..

falsy, truthy 값을 활용해서 유용하게 조건문 처리하기 null과 undefined 예외 처리 간결하게 하는 방법 ⚠️ 1. 일반적인 방법 : 논리 연산자 이용하는 방법 ❗ 2. 더욱 유용한 방법 (Truthy & Falsy) "" false, NaN, undefined, null, 0 총 6가지 기본 데이터 타입는 false로 boolean 타입으로 변환해준다. 그 외에는 모두 true로 변환 thus, undefiend와 null을 걸러내는 예외처리를 조건문으로 구현하고자 할 때 ‘!’만 붙여주면 falsy 타입이 들어오면 NOT과 만나서 true로 반환되기 때문에 매우 유용하다. 삼항 연산자 삼항 연산자 중첩해서 사용하기 let score = 66; score >= 90 ? console...

자바 스크립트에서 정말 중요하고 많이 쓰이는 ‘배열' 그 배열을 다룰 때 사용할 때 매우 유용한 내장 함수들을 알아두는 것은 정말 정말 중요하다. 배열 내장함수를 왜 써야하는가? 안 써도 되잖아? 맞는 말이다. 하지만 더 빠르고 간편한 방식이 있는데 그걸 모르는 것은 비효율적이라고 생각한다. 간단히 예시를 들어보자 (예시) 배열 내장함수 없이 배열 순회하는 방법 for문과 length 프로퍼티를 이용하여 순회하기 for arr = [1, 2, 3, 4]; for (i = 0; i < arr.length; i++) { console.log(arr[i]); //1, 2, 3, 4 차례로 배출 나 역시 이 방법으로 배열을 순회해왔다. 하지만 배열 함수라는 것을 접하고 부터는 잘 안쓰게 되었다. 내장함수를 이용..

기본적 예제 : 변수 (전역변수)가 밖에 선언 var vscope ='global' function fscope() { alert (vscope); } fscope(); //여기서 fscope라는 함수를 선언하 globa이라는 텍스트가 경고창에 출력 //함수안에 있는 alert이 함수 밖에 '변수'에 접근할 수 있다는게 취지 변수가 밖에 선언되고, 함수안에도 선언됨과 동시에 ‘local’이라는 문자열을 새로 갖게 되었을 때 결과는 어떻게 될까? var vscope ='global' //전역변수 function fscope() { var vscope = 'local';//지역변수 alert (vscope); } fscope(); 정답 ‘local’을 출력하게 됨 vscope는 가까운 함수를 찾게 됨, 만약..

자바스크립트 : 지역변수와 전역변수 예문을 통한 정리 참고 강의 : https://www.youtube.com/watch?v=ud7DL6W32FI 기본예제 기본적 예제 : 변수 (전역변수)가 밖에 선언 변수가 밖에 선언되고, 함수안에도 선언됨과 동시에 ‘local’이라는 문자열을 새로 갖게 되었을 때 결과는 어떻게 될까? var vscope ='global' //전역변수 function fscope() { var vscope = 'local';//지역변수 alert (vscope); } fscope(); 정답 : ‘local’을 출력하게 됨 vscope는 가까운 함수를 찾게 됨, 만약 같은 함수안에 정의된게 없으면 함수 바깥에 있는 변수를 찾는다. 전역변수가 선언되었고, 함수안에 지역변수 vscope가 ..