nullish 병합 연산자 ?? ??을 사용하면 여러 피연산자 중 값이 '확정되어 있는' 변수를 찾을 수 있다. 예를 들어 x = a ?? b 라는 코드는 a가 null이나 undefined가 아니면 a 그 외에는 b 라는 의미를 나타낸다. 이는 아래 코드와 같다. x = (a !== null && a !== undefined) ? a : b; 값을 여러개 나열하여 정의된 값을 찾아낼 수도 있다. x = a ?? b ?? c 라면 null이나 undefined가 아닌 첫 번째 피연산자를 반환한다. ?? vs || ??는 or 연산자 ||과 비슷해 보이지만 차이점이 존재하는데 ||는 첫 번째 truthy 값을 return하는 반면, ??는 첫번쨰로 defined된 값을 return한다. 이는 0과 null..
let user = {}; console.log(user.id); 다음과 같은 코드가 있다고하자. user는 빈 객체이므로 console.log에서는 오류가 난다. 이를 오류 없이 해결할 수 있는 방법이 optional chaning이다. 옵셔널 체이닝 옵셔널 체이닝은 ?.로 사용하며 앞의 대상이 undefined거나 null이면 undefined를 return한다. 예를 들어 let user = {}; console.log(user?.name?.first); //undefined 위와 같이 작성하면 user에서 존재 여부를 확인하고 user는 존재하기 때문에 다음으로 넘어간다. name?에서는 user 객체 내에 name 속성이 존재하지 않기 때문에 멈추고 undefined를 return한다. 따라서 ..
노마더코더의 바닐라 JS로 크롬 앱 만들기 강의를 들으며 필요해보이는 것만 대충 적은 글입니다. filter 함수를 통해 특정 성분을 제외한 배열을 만들 수 있다. const arr = [1, 2, 3, 4, 5]; function myFilter(item){ if(item > 3) return false; } arr.filter(myFilter); filter는 myFilter 함수에 arr의 각 성분을 파라미터(item)로 던져주며 myFilter를 실행한다. (map 함수 역시 비슷하게 동작한다) myFilter는 리턴값으로 true, false를 보내는데 true이면 배열에 포함되고 false이면 배열에서 제외된다. (정확히는 false값이 return된 배열 값을 제외하고 새로운 배열을 만들어준..
노마더코더의 바닐라 JS로 크롬 앱 만들기 강의를 들으며 필요해보이는 것만 대충 적은 글입니다. Interval, Timeout function sayHello() { console.log("hello"); } setInterval(sayHello, 2000); setTimeout(sayHello, 5000); 2초마다 sayHello 함수를 실행(반복) 5초 후에 sayHello 함수를 실행(1회) padStart, padEnd String에 padding을 추가할 때 사용 padStart는 string의 처음에 padding을 추가 padEnd는 string의 끝에 padding을 추가 string.padStart(길이, "문자열"); string의 길이가 지정된 길이보다 작아면 "문자열"로 빈 칸을..
노마더코더의 바닐라 JS로 크롬 앱 만들기 강의를 들으며 필요해보이는 것만 대충 적은 글입니다. LocalStorage - MDN 유튜브에서 볼륨을 지정했거나 유저의 이름을 기억해야하는 등 (브라우저 단위로) 저장해두어야하는 값이 있다. 이런 값을 저장할 수 있는 저장소를 브라우저에서 기본 API로 제공해주는데 이를 로컬 스토리지(local storage)라고 한다. setItem getItem removeItem JSON.stringify local storage에는 text만 저장할 수 있고 배열은 저장할 수 없다. 예를 들어 ["a", "b", "c"]라는 배열을 local storage에 저장하면 a, b, c라는 text로 저장된다. 이를 해결하기 위해 JSON.stringify라는 함수를 사용..
노마더코더의 바닐라 JS로 크롬 앱 만들기 강의를 들으며 필요해보이는 것만 대충 적은 글입니다. const link = document.querySelector("a"); function handleLinkClick(event) { event.preventDefault(); console.log(event); } link.addEventListener("click", handleLinkClick); link에서 click 이벤트를 감시하는 EventListener를 붙여주면 click 이벤트가 발생시 handleLinkClick함수가 실행된다. handleLinkClick 함수가 실행 시 실행되는 event를 담은 객체를 handleLinkClick 함수의 파라미터로 주게 된다. +) array.forE..
