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(값)를 가진 ..