Frontend/JavaScript25 [JavaScript] null 체크하는 법, 널 병합 연산자 (Nullish Coalescing Operator ??) Nullish Coalescing Operator (널 병합 연산자 ) 변수에 falshy한 값(0, -0, '')을 할당하는 경우 || 연산자 사용하게 되면, 변수를 false로 받아들이는 오류가 발생하는 것을 방지해주는 연산자 사용 예시 : let num = 0; console.log(num || '-1'); //-1 console.log(num ?? '-1'); //0 참고 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing Nullish coalescing operator - JavaScript | MDN 널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefin.. 2023. 1. 20. [JavaScript] 스코프 (Scope) / 가비지 컬렉터 (Garbage Collector) 스코프 (Scope) 블럭 안의 변수는 블럭 안에서만 유효함 변수, 함수, 클래스가 어디까지 유효한지 나타내는 범위 영역 식별자간 이름충돌 방지 메모리 절약 참고 문서 : https://developer.mozilla.org/en-US/docs/Glossary/Scope Scope - MDN Web Docs Glossary: Definitions of Web-related terms | MDN The scope is the current context of execution in which values and expressions are "visible" or can be referenced. If a variable or expression is not in the current scope, it wi.. 2023. 1. 20. [JavaScript] 클릭시 특정 태그 위치로 이동 scrollIntoView https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView Element.scrollIntoView() - Web APIs | MDN The Element interface's scrollIntoView() method scrolls the element's ancestor containers such that the element on which scrollIntoView() is called is visible to the user. developer.mozilla.org 사용 예시 : // navbar 메뉴 클릭시 해당 메뉴로 이동 const navbarMenu = document.querySelector('.navbar__men.. 2023. 1. 19. [JavaScript] Intersection Observer Intersection Oberserver 원하는 요소가 특정 영역에 들어왔을 때 콜백 함수를 호출해주는 관찰자로, 웹 API에서 제공해주는 클래스 콜백함수를 인자로 전달 받으며, 콜백함수 기본 인자로로 entries, observer를 전달해줌 let callback = (entries, observer) => { } entries : 윈도우 화면에 들어온 요소의 객체 정보가 나열된 배열 ㄴ entries.target의 isIntersecting : true 인 경우 화면에 해당 요소가 들어와 있는 것 observer : 클래스이기 때문에 오브젝트를 생성할 때 아래와 같이 생성해줘야함 let observer = new IntersectionObserver(callback, options); 사용 예시 .. 2023. 1. 18. [JavaScript] 이터레이션 프로토콜 (Iteration Protocol) / 이터러블 (Iterable) 이터레이션 프로토콜 for...of 루프, spread 연산자와 같은 기능들을 사용하여 순회를 가능하게 하는 규격, 인터페이스 ㄴ 이터레이션 프로토콜을 따르면 이터러블(Iterable)함 : 순회 가능 ㄴ 이터러블한 자료 구조 : Array, String, Map, Set 공식 문서 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols Iteration protocols - JavaScript | MDN Iteration protocols aren't new built-ins or syntax, but protocols. These protocols can be implemented by any obj.. 2023. 1. 14. [JavaScript] 접근자 프로퍼티 (Accessor Property) : 게터, 세터 접근자 프로퍼티 게터 원하는 함수 앞에 get을 붙여서 일반 속성처럼 함수 호출 가능하게 함 함수지만, 고정된 값이 아니라 호출하는 시점에 데이터를 만들어서 값을 불러와서 리턴해줌 세터 값 할당을 할 때에 함수 호출 해줌 사용 예시 : class Student { constructor(first, last) { this.first = first; this.last = last; } get fullName() { return `${this.first} ${this.last}`; } set fullName(value) { console.log('set', value); } } const student = new Student('민두', '민'); console.log(student); console.log(.. 2023. 1. 13. 이전 1 2 3 4 5 다음