JavaScript
-
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로 평가되기 때문에 마지막 출력 결과는 모두 "값 지정 필요"가 나오게 된다...
[새로운 기능] null coalescing operatornull 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로 평가되기 때문에 마지막 출력 결과는 모두 "값 지정 필요"가 나오게 된다...
2023.05.02 -
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까지) 출력한다면 어떻..
[새로운 기능] Optional ChainingOptional 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까지) 출력한다면 어떻..
2023.05.02 -
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에 의해 좌우되는 ..
[javascript] this - 2arrow 함수와 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에 의해 좌우되는 ..
2023.03.09 -
javascript에서 key 이벤트를 처리하다보면 비슷한 상황에서 3가지 이벤트가 존재한다. 알듯 말듯 미묘한 차이를 보이는 이녀석들에 대해서 살펴보자. 이벤트 비교 아래와 같이 간단한 화면을 만들고 동작을 테스트 해보자. 이벤트들의 관심사항 이름 대로 keyup은 키가 올라갔을 때 keydown은 키가 내려갔을 때, keypress는 키가 눌렸을 때 발생한다. 그럼 keydown과 keypress는 같지 않을까? 같아 보이지만 이 둘은 관심 사항이 다르다. keydown(keyup 포함)은 물리적으로 어떤 키가 눌렸는지에 관심이 있다. 하지만 keypress는 실제로 어떤 값이 입력되는지에 대해 관심이 있다. 그래서 shift 키만 눌렀을 때 실제로 입력되는 내용이 없기 때문에 keypress는 동작..
[javascript]keypress, keydown, keyup 이벤트 차이javascript에서 key 이벤트를 처리하다보면 비슷한 상황에서 3가지 이벤트가 존재한다. 알듯 말듯 미묘한 차이를 보이는 이녀석들에 대해서 살펴보자. 이벤트 비교 아래와 같이 간단한 화면을 만들고 동작을 테스트 해보자. 이벤트들의 관심사항 이름 대로 keyup은 키가 올라갔을 때 keydown은 키가 내려갔을 때, keypress는 키가 눌렸을 때 발생한다. 그럼 keydown과 keypress는 같지 않을까? 같아 보이지만 이 둘은 관심 사항이 다르다. keydown(keyup 포함)은 물리적으로 어떤 키가 눌렸는지에 관심이 있다. 하지만 keypress는 실제로 어떤 값이 입력되는지에 대해 관심이 있다. 그래서 shift 키만 눌렀을 때 실제로 입력되는 내용이 없기 때문에 keypress는 동작..
2023.01.03 -
이번 포스트에서는 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; }); 하지만 만약 쉼표 연산자를 이용한다면 아래처럼 한 줄에 처리할 수가 있게 된다. 간결!..
[새로운 기능] comma operator(쉼표연산자)이번 포스트에서는 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; }); 하지만 만약 쉼표 연산자를 이용한다면 아래처럼 한 줄에 처리할 수가 있게 된다. 간결!..
2022.11.14 -
이번 포스트에서는 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 += `
[js] dispatchEvent이번 포스트에서는 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 += `
2022.09.29 -
이번 포스트에서는 fetch api에 대해서 살펴보자. fetch는 '가져오다'라는 뜻으로 Request나 Response와 같은 객체를 이용해서 HTTP 파이프라인을 구성하는 요소를 조작하고 원격지에서 정보를 가져오기 위해 사용한다. 원문에 설명된 내용을 쓰다보니 말이 어려워졌는데 가장 쉽게 이해할 수 있는 예로 AJAX를 들 수 있다. 기존에는 AJAX를 Vanilla script에서 사용하기 위해서는 XMLHttpRequest 객체를 이용했는데 너무 번거롭기 때문에 jQuery나 Axios 같은 추가 라이브러리를 활용 했었다. 하지만 fetch API를 사용하면 간단하게 ajax 작업의 처리가 가능하다. fetch api fetch API? fetch API는 Promise 를 기반으로 동작한다. ..
[새로운 기능] fetch API이번 포스트에서는 fetch api에 대해서 살펴보자. fetch는 '가져오다'라는 뜻으로 Request나 Response와 같은 객체를 이용해서 HTTP 파이프라인을 구성하는 요소를 조작하고 원격지에서 정보를 가져오기 위해 사용한다. 원문에 설명된 내용을 쓰다보니 말이 어려워졌는데 가장 쉽게 이해할 수 있는 예로 AJAX를 들 수 있다. 기존에는 AJAX를 Vanilla script에서 사용하기 위해서는 XMLHttpRequest 객체를 이용했는데 너무 번거롭기 때문에 jQuery나 Axios 같은 추가 라이브러리를 활용 했었다. 하지만 fetch API를 사용하면 간단하게 ajax 작업의 처리가 가능하다. fetch api fetch API? fetch API는 Promise 를 기반으로 동작한다. ..
2022.07.01 -
이번 포스트에서는 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..
[새로운 기능] Proxy이번 포스트에서는 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..
2022.06.02