null coalescing operator ??javaScript에서는 boolean으로 평가 시 false로 간주되는 녀석들이 있는데 빈문자열, 0, false, null, undefined가 그 녀석들이다. 이 성질과 || short circuit 연산자가 합쳐지면 재밋는 결과를 얻을 수 있다. (|| 연산자는 마지막 평가 값을 반환한다.)let falsy = ["", false, undefined, null, 0];falsy.forEach((item) => { console.log(item, item ? true : false, item || "값지정 필요");});실행 결과 falsy의 내용은 모두가 false로 평가되기 때문에 마지막 출력 결과는 모두 "값 지정 필요"가..

Optional Chaining Optional Chaining이란 값이 있을 경우에만 chaining 하는 방법이다. 예를 들어 REST 요청을 통해서 전달받은 객체가 있는데 그 데이터의 속성이 있을 때와 없을 때가 있다면 값을 처리하기가 귀찮은 경우가 많다. 예를 들어 다음과 같은 users 배열을 생각해보자. let users = [ {name: "hong gil dong", email: {id: "hong", domain: "def.net"}}, {name: "jang gil san"} ]; users의 첫 번째 객체는 name과 email 정보가 있고 두 번째 객체에는 name만 존재한다. 만약 반복문을 이용해 user 객체의 내용을 상세하게(email의 id, domain까지) 출력한다면 어떻..

arrow 함수와 this앞선 포스트에서 꾸역 꾸역 execution context와 this에 대해서 알아갈 무렵 ECMA6가 발표되면서 arrow 함수라는 것이 발표되고 또다시 this는 혼돈에 빠지게 된다.https://goodteacher.tistory.com/438 [javascript] this -1이번 포스트에서는 알쏭 달쏭 헤깔리는 javascript에서의 this에 대해서 살펴보자. javascript에서의 this javascript에서의 this가 어려운 이유는 그때 그때 달라지기 때문이다. 다른 언어에서의 this와 그goodteacher.tistory.com arrow 함수에서의 this일반 함수에서 this가 실행환경 즉 execution context에 의해 좌우되는 반면 ar..

javascript에서 key 이벤트를 처리하다보면 비슷한 상황에서 3가지 이벤트가 존재한다. 알듯 말듯 미묘한 차이를 보이는 이녀석들에 대해서 살펴보자. 이벤트 비교 아래와 같이 간단한 화면을 만들고 동작을 테스트 해보자. 이벤트들의 관심사항 이름 대로 keyup은 키가 올라갔을 때 keydown은 키가 내려갔을 때, keypress는 키가 눌렸을 때 발생한다. 그럼 keydown과 keypress는 같지 않을까? 같아 보이지만 이 둘은 관심 사항이 다르다. keydown(keyup 포함)은 물리적으로 어떤 키가 눌렸는지에 관심이 있다. 하지만 keypress는 실제로 어떤 값이 입력되는지에 대해 관심이 있다. 그래서 shift 키만 눌렀을 때 실제로 입력되는 내용이 없기 때문에 keypress는 동작..

이번 포스트에서는 comma operator 즉 쉼표 연산자라는 것에 대해 살펴보자. 쉼표 연산자 사실 쉼표 연산자는 평소에 반복문을 쓰면서 사용해 봤던 녀석이다. 단지 이것을 연산자라고 인식하지 못한 경우가 많을 것이다. 다음은 주어진 문장 str이 회문(Palindrome)인지 판단하는 코드이다. const str = "소주만병만주소" let isPalindrome = true; for(let i=0, j=str.length-1; i { javaSum += item.java; cSum += item.c; jsSum += item.js; item.sum = item.java + item.c + item.js; }); 하지만 만약 쉼표 연산자를 이용한다면 아래처럼 한 줄에 처리할 수가 있게 된다. 간결!..

이번 포스트에서는 javascript에서 프로그래밍적으로 event를 발생시키기 위해서 사용하는 dispatchEvent에 대해서 살펴보자. dispatchEvent 초기 화면 다음과 같은 구구단 계산기를 만들어보자. * = 이 두 개의 select에는 change event를 등록하여 select 값이 변경되면 result에 구구단 결과를 입력한다. let selects = document.querySelectorAll("select"); selects.forEach((element) => { for (let i = 1; i < 10; i++) { element.innerHTML += `

이번 포스트에서는 Vue.js 등 프론트엔드 프레임워크 들에서 반응성을 위해 사용하는 Proxy에 대해서 살펴보자. 반응성이란? 반응성(Reactivity)반응성이란 선언적인 방식으로 어떤 값에 대한 변경에 대한 제어를 수행하는 프로그래밍 방식을 말한다.예를 들어 다음과 같은 엑셀을 생각해보자.A와 B에는 각각 10, 20이 할당되어 있다. Sum에는 이들의 합을 저장하도록 선언되어있으므로 30이 저장된다. 이 상황에서 A의 값을 20으로 변경하면 Sum은 자동으로 계산 결과를 수정해서 40으로 변경된다. 이것이 바로 반응성이다. JavaScript의 반응성하지만 우리의 일반적인 프로그램은 반응성을 갖지 못한다.const nums = { A: 10, B: 20 };let sum = nums.A + num..

비동기 작업을 처리할 때 async와 await 키워드를 이용할 수도 있다. async와 await는 ECMAScript 2017에 추가되어 Promise 보다도 더 따끈따끈하다.기존 Promise의 답답함앞서 살펴봤던 Promise는 잘 동작하지만 연계 동작을 처리하기 위해서는 then() then() 식으로 계속 chaining 해주는 과정이 필요하다.function thenHell(init) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(init * 10); }, 1000); });}let result = thenHell(4) .then((val) => { return new Promise..