Language/JS

[Javascript] this 바인딩 규칙

이 글은 You Don't Know JS - this와 객체 프로토타입, 비동기와 성능 책을 읽고 정리한 내용입니다. 0. 서론 this는 기본적으로 호출부(함수가 어떻게 호출됐는가?)에서 함수를 호출할 때 바인딩 된다. 즉, 함수 호출이 이뤄지는 부분을 확인해야 '현재 context에서 this가 가리키는 것'이 무엇인지 확실하게 알 수 있는 것이다. 단순히 '함수를 호출한 지점'으로 돌아가면 호출부를 확인할 수 있다고 생각할 수 있지만, 코드의 복잡도에 따라 '진짜' 호출부를 찾는 것은 모호할 때가 많다. 따라서, 중요한 것은 호출 스택(현재 실행 지점에 오기까지 호출된 함수의 스택)을 생각해보는 것이다. 이 중 호출부는 현재 실행 중인 함수 '직전'의 호출 코드 '내부'에 있다. function f..

[Javascript] KeyboardEvent.key / 키보드 이벤트

☑️keyboardEvent.key KeyboardEvent는 Shift와 같은 수정자 키 상태 및 키보드 로케일 및 레이아웃을 고려하여 사용자가 누른 키의 값을 반환 key values: 눌린 키가 보여줄 수 있는 값을 가지고 있다면, Unicode character string을 반환한다.(ex. A, b, c, d, ㅇ, ㄷ…) 눌린 키가 컨트롤이나 스페셜한 캐릭터라면, pre-define된 키 값을 반환한다.(ex. Ctrl, alt, shift…) Dead 키가 입력되었다면, Dead라고 나타난다. 값을 알 수 없는 키라면, Unidentified 발생 keyboardEvent sequence: 키 입력시 keydown 이벤트 발생, 반복 입력시 keyboardEvent.repeat = true..

[Javascript] 자바스크립트 문자열 뒤집기

자바스크립트는 문자열을 뒤집는 내장함수가 존재하지 않고, 배열을 뒤집는 함수만 존재한다. 따라서, 문자열을 배열로 나눈 뒤 이것을 뒤집고, 다시 문자열로 합치는 것으로 해결할 수 있다. const str = "abcdefg" const reversed_str = str.split("").reverse().join(""); console.log("원래 문자열: "str); console.log("뒤집어진 문자열:" reversed_str); // 원래 문자열: abcdefg // 뒤집어진 문자열: gfedcba 다만 여기서 주의해야할 점은, join 함수를 사용하는데 있어서 다른 언어처럼 join의 매개변수를 비워놓고 사용하면 안된다는 것이다. join의 매개변수를 비워놓게 되면, 자동으로 ","가 중간에..

[Javascript] 디바운싱과 쓰로틀링 / 연속 이벤트 제어

디바운싱과 쓰로틀링은 모두 웹 페이지에서 발생하는 반복적인 이벤트를 제어해주는 방법이다. 반복적인 이벤트를 제어한다는 것은, 스크롤을 내리는 등의 수많은 반복 이벤트의 횟수를 현저하게 줄여주는 것을 의미한다. 1. 디바운싱: 맨 마지막에 발생한 이벤트만 처리! 2. 쓰로틀링: 이벤트가 한번 발생하면 일정 시간 락다운! 스크롤 이벤트를 예로 들어 디바운싱과 쓰로틀링 이벤트를 간단하게 구현할 수 있다. document.addEventListener("scroll", () => { const scrollValue = document.documentElement.scrollTop; console.log(scrollValue); }) 위의 코드는 기본적인 스크롤 이벤트를 발생시키는 코드이고, 사진은 그 결과이다...

[Javascript] Map 사용법

자바스크립트에서 map은 두 가지이다. 1. Array.prototype.map() : 특정 배열 내 모든 요소에 대해 각각 함수를 적용하고, 이 결과를 모아 새로운 배열 반환 2. Map: Java의 HashMap, Python의 dictionary와 같은 {key:value}로 이루어진 자료구조 이번 게시글에서는 2번 Map에 대하여 다룬다. 1. Map이란? Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다. 아무 값(객체와 원시 값)이라도 키와 값으로 사용할 수 있습니다. - MDN Web Docs - 맵은 쉽게 말해서 Java의 HashMap, Python의 Dictionary와 같은 자료구조이다. key: value의 형식으로 저장되며, key값을 사용하여 해당 k..

[Javascript] 일반 함수 vs 익명 함수

자바스크립트는 유연한 언어이다. 따라서 다른 일반적인 언어(Java, C)와 다르게, 함수를 선언하고 사용하는데 있어 굉장한 자유로움이 주어진다. 이는 능숙한 사람에게는 굉장한 이점으로 주어질 수 있지만, 미숙한 사람에게는 넘어야 할 허들이 되기도 한다. 자바스크립트에서 함수 선언 방식은 기본적으로 일반 함수와 익명 함수로 나눌 수 있다. 1. 일반 함수 일반적으로 다른 언어에서 사용하는 함수와 동일하다. 사용방식 또한 동일하며, 코드를 조금이라도 읽을 수 있는 사람이라면 매우 쉽게 이해할 수 있는 함수이다. 일반 함수는 다른 말로 함수 선언식이라고도 할 수 있다. function 함수명(){ 함수 로직 } // 예시 function SayHello(){ console.log("hello!"); } Sa..

[Javascript] for 반복문 종류 ( for / for-in / for-of )

1. for: 기본 반복문 2. for-in: 배열의 인덱스를 기준으로 반복 3. for-of: 배열의 요소를 기준으로 반복 1. for 반복문 const arr = ['a','b','c','d','e','f']; for(let i = 0; i < arr.length; i++){ console.log(" "+arr[i]); } // // a b c d e f 가장 기본적인 반복문의 형태로, 타 언어들의 반복문과 동일하다. 내부에 변수를 선언하여 사용하며, 원하는 만큼 반복횟수를 지정하여 반복한다. 2. for-in 반복문 const arr = ['a','b','c','d','e','f']; for(const i in arr){ console.log(" "+i); } // // 0 1 2 3 4 5 어떤 ..

[Javascript] var, let, const 차이 / 자바스크립트 변수 상수

👀 변수, 상수 속성 종류 (var, let, const) 👀 1. var(변수) : 재선언, 재할당 가능 2. let(변수) : 재할당 가능 3. const(상수) : 재선언, 재할당 불가 프로그래밍에서는 어떤 값을 생성할 때 변수와 상수로 나누어 사용하게끔 권장됩니다. Javascript는 es5까지는 var 하나만을 사용하여 따로 차이를 두지는 않았었지만, es6부터 let과 const가 나옴으로써 변수와 상수를 구분할 수 있게 되었습니다. 변수(variable)란 값이 변할 수 있는 statement를 의미하고, 상수(constant)란 한번 초기화된 값이 변할 수 없는 statement를 의미합니다. Javascript에서 사용할 수 있는 3가지 statement를 위의 변수 / 상수 개념으로 ..