본문 바로가기

☁️ 구름 X kakao DeepDive/☁️ HTML CSS JS32

[JavaScript] 자바스크립트 classList 클래스를 제어할 수 있는 classList에 대해 알아보겠다.여기서 클래스란class="">여기 이 클래스를 말한다.Element.classList엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다. 메서드1. 지정한 클래스 값 추가.add( String [, String [, ...]] )  만약 추가하려는 클래스가 class 속성에 이미 존재한다면 무시한다. 2. 지정한 클래스 값 제거remove( String [, String [, ...]] )  존재하지 않는 클래스를 제거해도 에러가 발생하지 않음! 사용법const elementClasses = element.classList; 만약에 아래처럼 코드를 작성했다면,const itemEl = documen.. 2025. 1. 13.
[JavaScript] undefined 과 null 의 차이점 ✔️ 공통점둘다 원시 자료형 (primitive)undefined 타입은 undefined 타입이 유일, null 값은 null 값이 유일✔️ 차이점개발자의 의도가 있느냐, 없느냐의 차이이다!✔️ undefined (개발자의 의도 X): “아무 값도 할당받지 않은 상태”를 의미var 키워드로 선언한 변수는 호이스팅으로 올라간 후 undefined로 초기화됨.그 이후 인터프레터가 해당 소스에 도달했을 때 할당한 값이 들어가게 됨.console.log(a); //undefinedvar a = 5;변수를 선언한 이후 값을 할당하지 않은 변수를 출력하면 undefined가 반환된다.let hello;console.log(hello); //undefined이렇게 undefined는 개발자가 의도적으로 할당하기 위.. 2025. 1. 12.
[JavaScript] Map, Filter, Reduce 메소드 🦋목차🦋1. Map 메소드2. Filter 메소드3. Reduce 메소드✔️ Map 메소드: 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.const array1 = [1, 4, 9, 16];// pass a function to mapconst map1 = array1.map(x => x * 2);console.log(map1);// expected output: Array [2, 8, 18, 32] 위의 코드는 x에 2를 곱해서 두배수의 배열을 만들어 반환하는 코드이다. 📍 기본형arr.map(callback(currentValue[,index[,array]]), [,thisArg]) 첫번째 매개변수로 콜백함수, 그 다음에 thisArg부분. 📍 .. 2025. 1. 12.
[JavaScript] Event Loop (setTimeout, 동기와 비동기) 🦋목차🦋1. setTimeout()2. 동기와 비동기3. JavaScript는 동기 언어이다.4. 내부에서 어떻게 진행되는지 살펴볼까요5. setTimeout의 지연 시간이 0이라면?setTimeout()전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정한다.두 번째 매개변수로 들어간 밀리초 단위가 지난 후, 첫 번째 매개변수인 콜백 함수가 호출이 된다.console.log('1');setTimeout(()=> { console.log('2');}, 3000);console.log('3');>> 3초 이후에 console.log(2)를 호출.동기와 비동기동기 (Synchronous, 시간을 맞춤)비동기 (Asynchronous, 시간을 맞추지 않음)대학생.. 2025. 1. 12.
[JavaScript] Closure Closure: 다른 함수 내부에 정의된 함수(innerFunction)가 있는 경우에외부 함수(outerFunction)가 실행을 완료하고 → 해당 변수가 해당 함수 외부에서 더이상 액세스 할 수 없는 경우에도→ 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스 할 수 있다! 외부함수가 완료했는데 내부 함수는 난 계속 할수이떠!!이러는거.. 라고 생각했다.  1. outerFunction('outside')은 변수 "newFunction" 에 할당되는 즉시 호출된다.2. 호출되면 outerFunction은 변수 "newFunction"을 outerFunction(outerVariable) 대신 innerFunction(innerVariable)을 반환한다. >> newFuntion에는 innerFu.. 2025. 1. 11.
[JavaScript] Iterator(반복기) & Generator(생성기) 1. IteratorIterator 함수를 임의로 생성해보자function makeIterator(numbers) { let nextIndex = 0; return { next: function () { return nextIndex  결과Iterator는 value랑 done 속성을 가지는 객체를 반환한다.[Symbol.iterator]() - 기본 이터레이터 반환 메소드[Symbol.iterator]()을 사용하면 반복 가능한 값을 반복기로 생성 가능.const numbersArray = [1,2,3];const numbersIterator = numbersArray[Symbol.iterator]()console.log(numbersIterator.next(.. 2025. 1. 9.

티스토리툴바