Web/JavaScript

옵셔널 체이닝 연산자 ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝(optional chaning) 연산자 ?. 는 좌항의 피연산자가 null 또는 undefined 인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. 예제는 다음과 같다. var elem = null; var value = elem?.value; console.log(value); // undefined 옵셔널 체이닝 연산자가 등장하기 전에는 논리 연산자 && 를 활용해 단축 평가를 했었으나, 옵셔널 체이닝 연산자를 활용하면 좀 더 깨끗한 코드를 작성할 수 있다. 하지만 논리 연산자 && 를 활용하는 것과 옵셔널 체이닝 연산자 ?. 를 활용하는 것에는 분명한 차이가 있는데, 다음과 같다..

변수 호이스팅 console.log(number); var number; 위의 코드를 실행해보면 console.log(number); 는 어떤 값이 출력될까? 자바스크립트를 처음 접한다면 ‘당연히 에러가 발생하지 않을까?’ 라고 생각할 수 있다. 하지만 undefined 가 출력된다. 분명 자바스크립트의 소스코드도 여느 프로그래밍 언어와 마찬가지로 한줄씩 차례대로 실행되는데 어떻게 이게 가능한걸까? 바로 자바스크립트의 호이스팅에 의해 그렇다. 호이스팅에 대해 알아보고자 한다. 호이스팅(Hoisting)은 변수 또는 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다. 따라서 위의 코드를 살펴볼 때, 실제 동작 순서는 number 변수가 선언되고 나서 콘솔 코드가 실행되게..

리액트에는 Hook이라는 개념을 통해 기존에 강세이던 클래스 문법에서 벗어나 함수형 문법을 이용하는 계기가 되었다. Hook에는 무엇이 있고, 각각을 간략하게 정리하고자 한다. (꾸준히 수정 예정) 1. useState() 컴포넌트의 상태를 관리하기 용이하다. 상황에 따라 다른 값을 저장하거나, 다른 화면을 출력할 때 사용한다. 2. useEffect() 최초 렌더링 이후 (컴포넌트가 업데이트 되는 경우 포함) 실행할 코드를 작성한다. 뿐만 아니라, 기존 클래스 문법의 생명주기를 두번째 인자에 따라 나타낼 수 있다. 3.useContext() 컴포넌트의 인접한 부모-자식이 아닌 관계에 대해 값을 주고받기 용이하며, Redux와 어느정도 유사한 개념이라고 볼 수 있다. 4. useReducer() 상태관리..

흔히 알고 있는 자료형인 Boolean에는 True와 False라는 두 가지 값이 있다. 그런데 특이하게도 자바스크립트에는 일반적인 언어와 달리 Truthy와 Falsy라는 개념이 있다. Truthy와 Falsy truthy는 true는 아니지만 true로 여겨지는 값이다. true { } (empty object) [ ] (empty array) 13 (number, not zero) "0", "false", "js" (string, not empty) Falsy Falsy는 Truthy와 반대의 개념으로 false는 아니지만 false로 여겨지는 값이다. false 0, -0 (zero, minus zero) 0n (BigInt zero) ' ', " ", ` ` (empty string) null ..