javascript, node8 [javaScript] Nullish coalescing operator(??) 사용하기 자바스크립트를 사용하면서 존재조차 몰랐던 Nullish coalescing operator에 대해서 알아보자. Nullish coalescing operator는 ?? 를 사용하여 해당하는 값을 가져온다. ?? 왼쪽에 있는 코드의 값이 있다면 그 값을 출력하게 되고, null이나 undefined일 경우 ??의 오른쪽 값이 출력된다. 코드를 보면 쉽게 이해가 된다. const sendMessage = (text) => { const message = text ?? "메시지가 없습니다."; return message; }; console.log(sendMessage("하이")); // "하이" console.log(sendMessage(undefined)); // "메시지가 없습니다." console.lo.. 2022. 2. 19. 키 자판으로 이벤트 주기(onKeyPress) 보통은 Input창에서 '확인'버튼을 눌렀을 경우 어떠한 이벤트를 발생시킨다. '확인' 버튼 뿐만 아니라 ',' 나 'enter' 등 특정 키를 클릭하였을 경우에 이벤트를 발생시키고 싶었다. 실제로 velog에서도 태그 추가시 사용되는 기능이다. 이외에도 많이 사용되어 구글링을 해보니 input태그의 onKeyPress속성을 통해서 이벤트를 발생시킬 수 있었다. import React from "react"; const testComponent = () => { const test = ({ code }) => console.log(">>>", code); return ; }; 여기서 code는 원래 e.code이지만, 구조분해할당을 통해서 {cod.. 2022. 1. 13. 스코프(scope)란? 실행컨텍스트를 공부하면서 자연스럽게 스코프에 대해서 공부하게 되었다. 자바스크립트 코드를 작성해보기 전에 배웠던 개념이라 와닿지 않았는데, 지금은 어느정도 이해가 된다. 다른 사람들은 모르겠지만, 나는 우선 코드를 작성해보고 나중에 개념을 봐야 이해가 잘 되는 것 같다. 스코프란? 자바스크립트에서만 쓰이는 개념이 아니고, 모든 언어에서 쓰이는 개념이고 가장 기본적이고 중요한 개념이다. 다른 코드가 참조할 수 있는 범위이다. 변수 이름, 함수 이름, 클래스 이름 같은 식별자가 선언된 위치에 따라 다른 코드에 참조 될 수 있을지 없을지가 결정 된다. 전역에서 선언되면 전역스코프를 갖게 되고, 지역에서 선언된다면 지역스코프를 갖게 된다. 스코프체인이란? 함수의 중첩으로 계층적인 구조를 가질 때, 상위스코프의 .. 2022. 1. 4. 실행 컨텍스트(Execution Context) - Outer 👉Outer와 스코프체이닝 💡 Outer : 이전 렉시컬 환경을 가리키기 때문에 타고타고 내려갈 수 있다. 정식 명칭 : Outer Enviroment Reference(외부 환경 참조) 💡 Scope Chaining : 상위 스코프와 연결되어 있어 참조할 수 있는 것 Outer를 통해 Scope Chaining을 할 수 있게 된다. Outer는 현재 렉시컬 환경에서 참조할 식별자가 없다면, 이전의 렉시컬 환경으로 가서 식별자를 찾는다. 이렇게 찾을 때까지 찾아 내려가고, 식별자를 발견한다면 그 식별자의 값을 출력하고 더 이상 이전 렉시컬 환경으로 내려가지 않기 때문에 콜스택 공간안에 동일한 식별자가 여럿이어도 값을 결정할 수 있다. 이것을 식별자 결정이라고 한다. 예시를 통해 알아보자. let food.. 2022. 1. 2. 실행 컨텍스트(Execution Context) - Record 자바스크립트를 사용하면서 실행 컨텍스트에 대해서 전혀 모르고 있었다. scope, hoisting, closure개념도 자바스크립트를 사용하면서 감각적으로 알고 있는게 전부였다. 그러던 도중에! 우아한 테크톡의 하루님의 실행컨텍스트 발표를 들으면서 실행 컨텍스트를 왜 알아야 하는지 알게 되었고 자바스크립트의 원리에 대해서 좀 더 알 수 있었다. 이전에 공부했던 이벤트 루프와 관련되어 있어서 같이 공부하면 이해하는데 더 도움이 될 것 같다. 👉 실행 컨텍스트란? 코드를 실행하는데 필요한 환경을 제공하는 객체 코드를 실행하는데 필요한 조건이나 상태를 모아둔 객체 식별자 결정을 더욱 효율적으로 하기 위한 수단 scope, hoisting, closure의 동작원리를 담고 있는 자바스크립트의 핵심 원리 실행 컨.. 2021. 12. 28. javascript ++연산자 리액트, node만 사용하다보니 html, css, js의 기초적인 부분이 미흡하여 간단하게 다시 익히기 위해 프로젝트를 따라하면서 배우는 중이다. 여기서 ++ 연산자에 대해서 몰랐던 부분을 알게 되었다. answerButton.addEventListener( "click", () => { const children = document.querySelectorAll(".answerButton"); for (let i = 0; i < children.length; i++) { children[i].disabled = true; // 버튼 비활성화 children[i].style.display = "none"; } goNext(qnaIdx++); }, false ); 우선 문제의 코드는 위와 같다. 코드 내.. 2021. 11. 27. 이전 1 2 다음
