반응형 IT/JavaScript9 즉시 실행 함수(IIFE) 즉시 실행 함수 자바스크립트에는 특이한 함수 형태들이 존재하는 데, 그중 하나가 즉시 실행 함수라는 것이다. 자바스크립트의 다양한 함수 형태 중 즉시 실행 함수라는 것이 존재한다. 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 의미 그대로 정의와 함께 즉시 실행되는 자바스크립트 함수를 의미한다. 📌 즉시 실행 함수의 특징 즉시 실행 함수는 단 한 번만 호출되어 다시 호출할 수 없다. // 익명 즉시 실행 함수 (function () { statements }()); 즉시 실행 함수는 보통 함수 이름이 없는 익명 함수를 사용하는 것이 일반적이다. 함수 이름이 있는 기명 즉시 실행 함수 또한 존재하지만, 그룹 연산자 (...) 내의 기명 함수는 함수 .. 2022. 4. 24. argument vs parameter 누군가는 매개변수, 누군가는 인자, 나 역시도 가끔은 혼재해서 사용하는 경향이 있는 것 같아 매개변수와 인자에 대해 정리해보고자 한다. 📌 argument vs parameter arguments와 parameter에 어떤 차이가 있을까? MDN에서는 argument와 parameter의 차이에 대해 아래와 같이 작성해 두었다. Parameter - MDN Web Docs Glossary: Definitions of Web-related terms | MDN Note the difference between parameters and arguments: Function parameters are the names listed in the function's definition. Function argum.. 2022. 4. 8. requestAnimationFrame vs setTimeout 이벤트 루프의 동작 T : task queue rAF : requestAnimationFrame S : Style (렌더 트리 생성) L : Layout P : Paint requestAnimationFrame vs setTimeout rAF와 setTimeout의 가장 큰 차이점은 1프레임 당 호출이 보장되느냐 되지 않느냐의 차이 흔히 웹에서 애니메이션을 보여주기 위해 setTimeout 대신 rAF 사용을 권장 그 이유는 애니메이션을 위해 setTimeout을 16ms마다 동작하도록 코드를 작성하여도, 다른 task에 의해서 지연될 가능성이 있어 1프레임 당 1번의 호출이 보장되지 않기 때문 그림을 보면 setTimeout은 task queue에 올라가 동작하고, rAF는 렌더링 파이프라인과 붙어 동.. 2022. 4. 8. DOMContentLoaded 이벤트 핸들링 📌 Events HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여한다. DOMContentLoaded : 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생 이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않는다. load : HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생 beforeunload/unload : 사용자가 페이지를 떠날 때 발생 이벤트 활용 예시 DOMContentLoaded: DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때 load : 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후이기 때문에 스타일이 적용.. 2022. 4. 1. 배열의 요소를 무작위로 섞기 📌 배열의 요소를 무작위로 섞기 로또 프로젝트를 진행하면서 테스트 코드를 구현하기 위해 배열의 요소를 랜덤으로 입력받는 코드를 구현하고자 했다. 하지만 자바스크립트는 파이썬의 random 모듈과 같은 배열의 요소를 랜덤 한 방법으로 바꾸는 기능을 제공하지 않으므로 배열의 요소를 섞기 위해서는 기능을 직접 구현해서 사용해야 한다는 것을 알게 되었다. 이를 직접 구현해보도록 하자! ✏️ 자바스크립트로 배열의 요소를 무작위로 섞어보자 자바스크립트에서 배열을 무작위로 섞는 방법은 sort() 메서드와 Math.random() 메서드를 이용하여 구현할 수 있다. function shuffle(array) { array.sort(() => Math.random() - 0.5); } let arr = [1, 2, 3.. 2022. 4. 1. 문자열 치환 (replace, RexExp, match) 문자열 치환 (replace, RexExp, match) 일치하는 문자열을 강조하기 검색어와 일치하는 단어 강조표시 하기 String.prototype.replace() - JavaScript | MDN RegExp - JavaScript | MDN replace 메서드와 RegExp 사용하기 RegExp RegExp 생성자는 패턴을 사용해 텍스트를 판별할 때 사용 replace() 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환 패턴은 문자열 또는 정규식(RegExp)이 될 수 있다. 변수와 일치하는 단어 강조하기 RegExp 생성자와 replace의 조합으로 검색어와 일치하는 단어를 강조할 수 있다. input element에 값을 입력하고 해당 단어가 포함된 단어들을 서버에.. 2022. 3. 13. TypeScript vs PropTypes https://blog.logrocket.com/comparing-typescript-and-proptypes-in-react-applications/ Comparing TypeScript and PropTypes in React applications - LogRocket Blog Compare TypeScript and PropTypes, tools for type checking, to determine which one best suits your project's needs. blog.logrocket.com "Comparing TypeScript and PropTypes in React applications"을 번역한 내용입니다. PropTypes 와 TypeScript는 목적이 비슷하지만,.. 2022. 3. 9. [JavaScript] null과 undefined null과 undefined 나는 아무런 생각이 '없다' JavsScript 뿐만 아니라 다른 언어를 배울때도 느꼈지만 null과 undefined에 대한 차이가 무엇인지 추상적으로만 생각하고 넘겼었다. 그냥 쉽게 생각해서 둘다 '없음'을 나타내는 것이지 차이가 있겠냐라고 생각하고 더 이상 자세히 찾아보지 않으려고 했었다.(너무 찾아볼게 많았기에...) 최근에 '클린코드 자바스크립트'라는 강의를 통해 JavaScript에 대해 공부하던 중 'null과 undefined'에 대한 수업이 있어서 해당 내용을 정리하며 null과 undefined의 차이에 대해 알아보고자 한다. null과 undefined는 무엇이 다른가? Google에 null과 undefined 차이에 대해 찾아보니 이런 이미지가 제일 먼.. 2022. 1. 19. 렉시컬 스코프(Lexical Scope) 재찬님께서 디코방에 올려주신 설명을 보다 렉시컬 스코프에 대해 정확히 인지를 하지 못하고 있다는 것을 깨닫고 렉시컬 스코프에 대해 알아보았습니다. (참고자료: https://poiemaweb.com/js-scope) Scope | PoiemaWeb 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙으로 자바스크립트는 이 규칙대로 식별자를 찾는다. poiemaweb.com 스코프에 대한 개념은 JavaScript를 이미 많이 접하셨기 때문에 자세한 내용은 언급하지 않도록 하겠습니다. 렉시컬 스코프에 대해 알아보기 전에, 예시 코드를 보겠습니다. var x = 1; function foo() { var x =.. 2021. 9. 17. 이전 1 다음 728x90 반응형
