Frontend/JavaScript
[JavaScript] 일반 함수 vs 화살표 함수
일반 함수와 화살표 함수의 차이점1. this 객체 바인딩일반 함수실행 주체에 따른 this가 동적으로 바인딩1) 함수 실행 시 전역(window)객체로 바인딩2. 메소드 실행 시 메소드를 소유하고 있는 객체를 바인딩3. 생성자 실행 시에는 새롭게 만들어진 객체를 바인딩-> 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정화살표 함수ES6부터 새로 추가된 익명 함수즉시 실행이 필요할 경우에 사용항상 상위 스코프의 this를 바인딩 (정적 바인딩)또한, call, apply, bind 메소드를 사용하여 this를 변경할 수 없음2. 생성자 함수로 사용 가능 여부일반 함수는 생성자 함수로 사용 가능화살표 함수는 생성자 함수로 사용 불가 -> prototype 프로퍼티 존..
$(document).ready() 와 window.onload 의 차이점
두 구문을 사용하는 이유는 다음과 같다. 자바스크립트는 인터프리터 언어이므로 DOM이 그려지기 전에자바스크립트로 특정 HTML태그(DOM)를 참조할 경우 스크립트 오류가 뜰 수 있다. 이를 해결 하기 위해 두 개의 구문이 등장하게 되었다. 둘의 차이점을 알아보자. (참고로 window.onload 는 페이지당 한번만 사용 가능하기 때문에,window.addEventListener를 사용하면 이러한 문제점을 해결할 수 있다.) $(document).ready()1. 호출 시점- DOM 트리가 로드될 때 호출2. 특징- DOM만 로드되면 바로 실행(이미지 및 외부 리소스와 무관)- 중복 사용해도 순서대로 모두 실행 window.onload1. 호출 시점- 페이지의 모든 요소들이 로드된 이후에 호출2. 특징-..
자바스크립트의 동작 원리
자바스크립트 동작 방식 자바스크립트는 단일 스레드 방식으로 한 번에 하나의 작업만 처리 가능 자바스크립트 엔진 V8 구조 Memory Heap 메모리 할당이 일어나는 곳 Call Stack 코드 실행에 따라 스택이 쌓이는 곳(후입 선출 LIFO) 자바스크립트 동작환경(Runtime) Web APIs DOM, AJAX, Timer 등 브라우저에서 제공하는 API Callback Queue 콜백 함수들이 대기하는 곳(선입 선출 FIFO) 호출 스택(Call Stack) 웹 브라우저의 자바스크립트 인터프리터 역할 현재 함수의 동작 및 다음 함수 호출 부분 등을 제어 Event Loop Call Stack이 비워질 때마다 Collback Queue에 대기중인 콜백함수가 있을 경우..
[JavaScript] 디바운싱과 쓰로틀링
디바운싱 - 연속적으로 호출되는 함수들 중에서 처음 or 마지막에 호출되는 함수만 실행하는 방식(함수는 한 번만 실행) - 주로 이벤트 핸들러에 적용 // #1 타이머 예제 let timer; document.querySelector('#input').addEventListener('input', function(e) { if(timer) { clearTimeout(timer); } timer = setTimeout(function() { // 실행할 코드 내용 }, 200); }); // #2 텍스트 입력 예제 function debounce(func, delay) { let timeoutId; return function() { const context = this; const args = argum..
window 객체의 opener 사용하기
window.opener - window.open() 함수로 연 팝업창(자식창)을 의미 - opener를 통해 부모창을 제어 가능 - window.open([페이지 URL], [타겟], [옵션]) 옵션 width : 팝업창 가로길이 height : 팝업창 세로길이 toolbar=no : 단축도구창(툴바) 표시 안함 menubar=no : 메뉴창(메뉴바) 표시 안함 location=no : 주소창 표시 안함 scrollbars=no : 스크롤바 표시 안함 status=no : 아래 상태바 창 표시 안함 resizable=no : 창 변형 하지 않음 fullscreen=no : 전체 화면 하지 않음 channelmode=yes : F11 키 기능이랑 동일 left=0 : 왼쪽에 창을 고정 top=0 : 위쪽..
자바스크립트 null, undefined, NaN의 차이
null - 다른 참조 변수에 대한 주소 값이 없는 것 - 객체의 속성 값이 존재하지 않거나, 함수의 매개변수를 초기화할 때 사용 - undefined에 비해 메모리 용량 많이 차지 undefined - 값이 할당되지 않은 상태 - null에 비해 메모리 용량 적게 차지 NaN - Number 타입 - Not a Number의 약자로 숫자가 아닌 값을 의미 - 숫자가 아닌 문자열 값을 숫자로 변환하여 계산할 때 일종의 오류 값으로 사용 null, undefined, NaN의 공통점 자바스크립트 조건식에서 false 값으로 평가
크롬 브라우저에서 자바스크립트 디버깅 하는 법
F12 버튼을 눌러 크롬 개발자 도구에 진입합니다. 소스 탭 메뉴를 누른 후에 디버깅하고 싶은 자바스크립트 파일을 찾습니다. 해당 파일을 클릭 후에 함수 왼쪽을 클릭하여 브레이크 포인트를 지정합니다. 지정한 자바스크립트 함수가 실행될 수 있도록 이벤트를 발생시킵니다. 브레이크 포인트가 걸렸으면 디버깅 모드를 이용할 수 있습니다. 디버깅 모드 다음 함수 호출(Step Over) - 한 줄씩 순차 실행 다음 함수 호출(Step Into) - 해당 시점에 함수 안에 들어가 내부 함수를 탐색합니다. 현재 함수에서 벗어나기 - 현재 함수에서 상위 함수로 빠져나옵니다.
자바스크립트(3) - 객체 생성
1. 객체 이니셜라이저(객체 리터널)를 이용하여 객체 생성 // 객체 생성 var obj = {name: '홍길동', age: 20}; // var obj = { 'name':'홍길동', 'age':20 } Key에 ' '를 붙여도 가능하다. // 객체 타입 확인 console.log( typeof obj ); // "object" // 객체 필드 접근 console.log( obj.name ); // 홍길동 // 속성값 변경 obj.name = '김길동'; console.log( obj.name ); // 김길동 // 동적으로 속성 추가 obj.hobby = 'baseball'; // 객체 안에 hobby라는 Key가 존재하지 않지만 초기화를 함으로써 // baseball이라는 value(값)를 가진 ..