js8 [JS] undefined의 의미 JS에서 undefined는 - 값이 할당되지 않고 초기화만 된 변수 - 명시적인 반환 값이 없는 함수 - 표현식의 결과가 없을 때 위 상황에서 사용됨. 값이 할당되지 않음을 정의함 그러하여 의도적으로 undefined를 변수에 할당하는 것은 undefined 타입의 의도에 어긋나게 사용하며 혼란을 가져올 수 있음 본인은 데이터의 로딩 상태를 나타내기 위해 데이터 상태를 관리할 때 data가 fetch되기 전 상태를 undefined로 두곤 했었는데, loading state를 따로 빼는게 바람직해 보임 2022. 2. 27. [JS] Optional chaining, Nullish coalescing operator 🛒 Optional chaining, Nullish coalescing operator를 사용하여 코드를 단순하고 명확하게 구성할 수 있습니다. 코드를 구성함에 있어 많은 변수를 참조하게 됩니다. 변수를 참조함에 있어 사용되어지는사용되는 구조 분해 할당 등의 표현식 정도는 대중적으로 편리하게 사용되는 표현식이라고 할 수 있습니다. 하지만 구조 분해 할당을 사용하여 변수를 참조하다 보면.. 구조 분해 대상이 Null, undefined 등의 객체가 아닌 데이터일 경우 아래와 같이 코드를 작성하게 됩니다. // Case. 1 const { name } = people ? people : {} // Case 2 let name = null if (people) { name = people.name } // ..... 2021. 8. 4. [JS] 브라우저에서 말 하기 👄 | SpeechSynthesis 브라우저에서 보이스웨어를 사용하기 위한 방법에는 SpeechSynthesis를 사용하는 방법이 있다. SpeechSynthesis는 말 하고싶은 단어나 문장을 사용자의 언어 환경에 맞추어 보이스웨어로 실행시킬 수 있다. const speech = new SpeechSynthesisUtterance('안녕하세요!') speechSynthesis.speak(speech) 하지만 아직 실험 기능인 것과, 브라우저의 정책에 막혀 실행할 수 없는 경우가 있다. 사용자의 인터렉션이 일어나지 않았을 경우에는 각 브라우저의 정책에 의해 SpechSynthesis가 동작하지 않는다. 왜냐하면 내가 아무것도 하지 않았는데 갑자기 브라우저에서 소리가 들린다면 그것은 조금 무서운 경험, 좋지 않은 경험이 될 것이기 때문이다... 2021. 7. 30. [JS] EventObject currentTarget, target | 이벤트 위임 | event delegation currentTarget은 EventListener가 등록된 대상이고 target은 Event가 원천적으로 일어난 대상입니다. 개발하며 EventListener를 등록한 후 이벤트를 trigging 하는 과정은 흔하게 사용됩니다. 이 때 Event 인터페이스를 구현한 객체가 argument로 들어오게 되는데요, 이때 우리는 currentTarget 혹은 target을 참조하여 이벤트가 발생한 대상 element를 참조하고 변경을 일으킬 수 있습니다. 이런 두 Property에 대한 차이를 알아보면 아래와 같습니다. currentTarget: EventListener가 등록되어 있는 element target: 원천적으로 Event가 발생한 대상 위의 설명으로는 감이 잘 안 오실 수 있습니다. 아래 예제를.. 2021. 7. 27. querySelector가 동작하지 않아요 :( | id started with number 개발 중 number로 indexing이 되어있는 element를 가져와야 했었습니다. 저는 querySelector 메서드를 선호하기 때문에 CSS3의 선택자를 사용하는 querySelector를 사용했습니다. (이유는 이 게시글을 참조해주세요!) > document.querySelector('#1') Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector. at :1:10 하지만 위와 같이 실행했을 때 에러가 발생하게 됩니다 왜 안 될까요? 앞서 querySelector는 CSS3의 선택자를 사용한다는 언급이 있었는데요 CSS3 선택자는 "숫자로 시작하는 id에 대해 selec.. 2021. 7. 26. 의도에 따른 코드 작성 방법론 내가 생각한 것을 코드로 구현하고 작성하면서 많은 고민을 하게 된다. 그 중 "나중에 이 코드를 읽게 되었을 때 의도파악이 쉽게 될 까?"에 대해 생각해보면 '결과물' 기준으로 코드를 작성하는 것이 아닌 '코드' 기준으로 '의도를 가진 코드'를 작성하는 것이 중요하다고 생각한다. 간단하게 DOM 구조를 통해 예를 들자면 Root element인 'Frame'이 있고 동일 선상(depth)에 'div#popup' element와 'div#content' element가 있다. 'div#content' element의 자식으로는 'div#chat-stack' element가 있다. 각 Elements들의 의도는 아래와 같다. - 'div#popup' element는 Top-down 방식으로 보여주기 위한 e.. 2021. 7. 21. [Study] 스코프 | Lexical scope, Scope chain, Global scope, Function scope JS는 lexical scope를 따릅니다. JS의 변수 스코프를 이해하기 위해 관련된 개념을 알아봅니다. Global scope 글로벌 스코프는 Global 객체인 Window 객체의 Scope를 말합니다. JS는 별 다른 Main 함수가 없기 때문에, JS를 처음 접하시는 분들은 Global scope에 변수를 선언하기 쉽습니다. Global scope에 변수를 선언하게 되면, 다른 변수와 변수명이 겹쳐 충돌할 가능성이 있습니다. let testWord = "Global scope hello world!" // Global scope const functionScope = () => { let testWord = "Local scope hello world!" // Function scope cons.. 2021. 4. 22. JS NodeSelector 살펴보기 평소에 사용하던 NodeSelector 들을 명확하게 정의하고자 합니다. NodeSelector 는 JavaScript 코드에서 DOM에 존재하는 하나이거나 여러개의 Node(Element)를 선택하기 위해 사용하는 method 입니다. NodeSelector 의 종류로는 - getElementsByClassName() - getElementById() - getElementsByName() - getElementsByTagName() - querySelector() - querySelectorAll() 등이 있습니다. getElementsByClassName() 파라미터로 넘긴 String을 전체 Elements의 class를 대상으로 탐색을 실행합니다. 반환값은 HTMLCollection 입니다. -.. 2021. 3. 7. 이전 1 다음
