본문 바로가기

JavaScript 20

[자바스크립트] null 병합 연산자(nullish coalescing operator) ??에 대하여 Let's study nullish coalescing operator(??) 기억하기론 ECMA2015인가 추가됐고, TypeScript에서는 엄청 최근에 추가된 Null 병합 연산자 ?? 에 대해 알아보고자 한다. ?? 연산자는 여러 피연산자들 중에 그 값이 '확정되어 있는 변수'를 찾을 수 있다. 코드로 예시를 보자. let test = undefined ?? null ?? "apple"; console.log(test); // apple let test2 = undefined || null || "amazon"; console.log(test2); // amazon ??연산자 뿐만 아니라 || 연산자 또한 마지막에 있는 apple, amazon를 가져온다. 이것만 보면 굳이 필요할까 싶지만 내가 .. 2021. 2. 28.
[리액트] 브라우저 notification 구현해보기 이번 포스트에서는 브라우저에서 notification를 push 하는 간단한 방법에 대해 알아보려고 합니다. 완성된 모습은 아래와 같습니다. 코드는 크게 App 부분과 notification 부분으로 나뉘게 되고 함수로는 useNotification이 권한을 요청하는 기능, notificiation를 만들어서 push 주는 기능을 제공합니다. import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const useNotification = (title, options) => { if (!("Notification" in window)) { return; } const fireNotif = () => { /* 권.. 2021. 1. 5.
[자바스크립트]JS다운 코드 스타일 #4. 비구조화 할당 1. 템플릿 리터럴(Template Literal) 2020/10/07 - [개발/자바스크립트] - [자바스크립트] JS다운 코드 스타일 #1. 템플릿 리터럴 2. spread 연산자 2020/10/08 - [개발/자바스크립트] - [자바스크립트] JS다운 코드 스타일 #2. Spread 연산자 3. 배열, 함수형 프로그래밍 2020/10/15 - [개발/자바스크립트] - [자바스크립트]JS다운 코드 스타일 #3. 배열, 함수형 프로그래밍 4. 비구조화 할당 4. 비구조화 할당 비구조화 할당은 '구조 분해 할당 구문'이라고도 합니다. 간단히 설명하자면 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 javaScript 표현식입니다. 기본적인 예시를 보면서 설명을 이어나가겠습니다... 2020. 11. 20.
[자바스크립트] 배열 비교하는 3가지 방법 + 형님의 솔루션 배열을 비교하는 방법 코딩을 하다 보면 필연적으로 값을 비교하는 경우가 있습니다. 이번 글에서는 그중에 배열을 비교하는 방법에 대해 논해보고자 합니다. 제가 이때까지 한 코딩을 생각해보니 위의 2가지 방법을 주로 썼습니다. 반복문을 이용해 값을 하나씩 읽어와 비교하는 방법 Array.toString 를 이용하는 문자열로 바꿔 방법 JSON.stringify 를 이용하여 문자열로 바꿔 방법 일반적으로 값을 하나씩 비교하는 것은 아래 2가지 방법보다 시간이 오래 걸릴 테니 2,3번 방법의 속도를 비교해보도록 하겠습니다. == VS === 에 따른 이상한 배열 비교 일단 바꾸기 전에 잠깐 자바스크립트의 비교 문법에 대해 살펴보고 가겠습니다. 첫번째 : == 비교이기 때문에 같은 타입이라 형변환없이 비교합니다... 2020. 9. 27.