모던 자바스크립트

javaScript(산술,할당 연산자)

javaScript(비교,논리 연산자)

javaScript(삼항 연산자)

javaScript(If, Else, Switch)

javaScript(반복문 For)

javaScript(화살표 함수)

javaScript(즉시 실행 함수, IIFE, Immediately-invoked function expression)

javaScript(호이스팅-Hoisting)

javaScript(타이머함수-setTimeout, setInterval, clearTimeout, clearInterval)

javaScript(생성자 함수-prototype)

javaScript(this) - 일반(Normal) 함수와 화살표(Arrow) 함수에서 this차이

javaScript(ES6 Classes, 상속)

javaScript(parseInt, parseFloat)

javaScript(Math) - abs, min, max, ceil, floor, round, random

javaScript(구조 분해 할당-Destructuring assignment)

javaScript(전개 연산자-Spread Operator)

javaScript(데이터 불변성-Immutability)

javaScript(얕은 복사, 깊은 복사)

javaScript(가져오기 - import, 내보내기 - export)

javaScript(Lodash 사용법) - _.uniqBy, _.unionBy 메서드 사용예제 / _.find, _.findIndex, _.remove 메서드 사용예제

javaScript(JSON) - JSON.stringify(), JSON.parse() 활용한 예제

javaScript(OMDb API-The Open Movie Database)

javaScript(정규표현식)

배열과 유사한 객체 ex) HTMLCollection, NodeList, DOMTokenList, ...숫자 형태의 indexing이 가능하다.length 프로퍼티가 있다.배열의 기본 메소드를 사용할 수 없다.Array.isArray(유사배열)의 리턴값은 false다.

window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체입니다.자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, 영어로는 Global Object라고 부릅니다.어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체

이벤트엔 버블링 이외에도 ‘캡처링(capturing)’ 이라는 흐름이 존재합니다. 실제 코드에서 자주 쓰이진 않지만, 상황에 따라 필요할 수도 있으니 간단하게 살펴봅시다.먼저, 표준 DOM 이벤트에서 정의한 이벤트 흐름에는 3가지 단계가 있습니다.캡처링 단계: 이벤트가

HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에 Element.addEventListener('type', 'handler')를 통해서 이벤트 핸들러를 등록할 수 있습니다.addEventListener 메소드를 활용해서 이벤트 핸들러를 등록했다

MouseEvent.button0:마우스 왼쪽 버튼1:마우스 휠2:마우스 오른쪽 버튼MouseEvent.typeclick: 마우스 왼쪽 버튼 눌렀을 때contextmenu: 마우스 오른쪽 버튼 눌렀을 때dblclick: 동일한 위치에서 빠르게 두번 click할 때mou

KeyboardEvent.typekeydown: 키보드 버튼을 누른 순간keypress: 키보드 버튼을 누른 순간keyup: 키보드 버튼을 눌렀다 뗀 순간KeyboardEvent.key이벤트가 발생한 버튼의 값KeyboardEvent.code이벤트가 발생한 버튼의 키보

scroll 이벤트는 보통 window 객체에 이벤트 핸들러를 등록하고 window 객체의 프로퍼티와 함께 자주 활용되는데요.특히 scrollY 프로퍼티를 활용하면 스크롤된 특정한 위치를 기준으로 이벤트 핸들러가 동작하게 하거나 혹은 스크롤 방향(위로 스크롤 중인지/아

파라미터 value로 전달되는 값이 10보다 작으면서 0보다는 크고, 그러면서도 3은 아닐 때 '정답입니다!' 라는 문자열을 콘솔에 출력하는 함수를 정의했는데요. 코드를 작성하다 보면 다양한 상황을 고려하기 위해서 이렇게 AND나 OR 연산자를 여러 번 사용해야 할 수

ES2020에서 새롭게 추가된 null 병합 연산자에 대해 살펴보겠습니다. 영어로는 'Nullish coalescing operator' 라고 하는데요.물음표 두 개(??)를 사용해서 null 혹은 undefined 값을 가려내는 연산자 입니다.아래 코드를 보세요.ex

자바스크립트에는 8가지 데이터 타입이 있습니다.numberstringbooleanundefinednullobjectsymbolbigintif, for, while 등 불린 타입의 값이 요구되는 맥락에서는 조건식이나 불린 타입의 값 뿐만아니라 다른 타입의 값도 불린 값처

함수 표현식으로 함수를 만들 때는 선언하는 함수에 이름을 붙여줄 수도 있는데요.이름이 있는 함수 표현식, 즉 기명 함수 표현식이라고 부릅니다.함수 표현식으로 함수가 할당된 변수에는 자동으로 name이라는 프로퍼티를 가지게 되는데요.이렇게 이름이 없는 함수를 변수에 할당

자바스크립트에서 함수는 다양한 방식으로 선언할 수 있습니다.가장 일반적인 방법은 function 키워드를 통해 함수를 선언하는 방식인데요.이렇게 작성하는 방식을 함수 선언(function declaration)이라고 합니다.바스크립트에서 함수는 값으로 취급되는데요. 이

문장과 표현식에 대한 개념인데요. 영어로는 각각 statements와 expressions라고 부릅니다. 문장 (statements) 우리가 작성하는 모든 자바스크립트 코드는 모두 문장과 표현식으로 구성되어 있습니다. 먼저, 자바스크립트에서 문장은 어떤 동작이 일어나도

삼항 연산자 (Ternary operator)라고도 불리는 이 연산자는 자바스크립트에서 세 개의 피연산자를 가지는 유일한 연산자 입니다.if문과 같은 원리로 조건에 따라 값을 결정할 때 활용되는데요.간단한 조건식의 경우에는 if문 보다 훨씬 더 간결하게 표현할 수 있는