본문 바로가기
728x90
반응형
SMALL

Web/JavaScript43

[JavaScript] 세트(Set) - add(), has(), delete(), clear() 1. 세트(set) set 객체는 중복되지 않은 유일한 값들의 집합 요소 순서에 의미가 없음 인덱스로 요소에 접근할 수 없음 교집합, 합집합, 차집합, 여집합 등을 구현 const 세트명 = new Set([요소1, 요소2, ...]) 2. 메서드 및 프로퍼티 2-1. add() 새로운 요소를 추가 중복된 요소는 추가되지 않음 세트 2-2. has() 특정 요소가 Set에 있는지 확인 세트 2-3. delete() 특정 요소를 삭제 세트 2-4. clear() 모든 요소를 삭제 세트 2-5. size set에 포함된 요소 개수 확인 세트 3. 반복문 세트 ✅ 다음과 같은 배열에서 중복된 이모지를 제거해보자. ['🍎','🍌','🍎','🍋','🍑','🍉','🍑','🍈','🥝','🍈'] 세트 MDN: set .. 2023. 4. 20.
[JavaScript] Spread 연산자( ... ) 1. 스프레드(Spread) 연산자 '...' 로 표현하며, 배열이나 객체와 같은 iterable을 확장하여 개별 요소로 분리할 수 있도록 모든 Iterable은 Spread가 될 수 있음 순회가능한 데이터는 펼쳐질 수 있음 function 함수명(...Iterable) [...Iterable] {...obj} 1-1. 객체를 복사하거나 새로운 프로퍼티를 추가 const obj1 = { a: 1, b: 2, c: 3 }; const obj2 = { ...obj1 }; // obj1을 복사하여 새로운 객체를 생성 const obj3 = { ...obj1, d: 4, e: 5 }; // obj1의 프로퍼티와 새로운 프로퍼티 d, e를 추가하여 새로운 객체를 생성 console.log(obj2); // { a.. 2023. 4. 20.
[JavaScript] 제네레이터(Generator) 1. 제네레이터(Generator) function* 제네레이터명(){ yield 값; } 실행을 멈췄다가 나중에 다시 접근할 수 있는 특이한 형태의 함수 나중에 다시 접근하기 위해 context(변수)를 저장된 상태로 남겨둠 이터레이터(iterator)를 생성하는 함수, 이터레이터는 반복 가능한(iterable) 객체를 만드는데 사용 제네레이터 함수는 function* 키워드로 정의하며, yield 키워드를 사용하여 값을 반환 이터레이터란? ⬇️⬇️⬇️ 더보기 https://coding-yesung.tistory.com/139 [JavaScript] 이터레이터(Iterator) & 이터러블(Iterable) 1. 이터레이터(Iterator) 반복 처리가 가능한 객체 내부적으로 next() 메서드를 가지.. 2023. 4. 19.
[JavaScript] 이터레이터(Iterator) & 이터러블(Iterable) 1. 이터레이터(Iterator) 반복 처리가 가능한 객체 내부적으로 next() 메서드를 가지며 next()메서드는 IteratorResult 객체 value와 done이라는 프로퍼티를 가진 객체를 반환함 2. 이터러블(Iterable) 반복이 가능한 객체 Symbol.Iterator 메서드가 있어야 하며 Symbol.Iterator는 이터레이터 객체를 반환해야 함 String, Array, Map, Set...등 객체 for 문법으로 반복이 가능 이터러블 이터러블2 MDN: Itreation https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols Iteration protocols - JavaScript | .. 2023. 4. 19.
[JavaScript] 이벤트 전파(Event Propagation) - 방식, 전파 막는 방법 이벤트에 대해 자세히 알고싶다면? ⬇️⬇️⬇️ 더보기 https://coding-yesung.tistory.com/137 [JavaScript] 이벤트(Event) - 이벤트 타입(Event Type), 이벤트 타겟(Event Target), 이벤트 리스너(Event Listener 1. 이벤트(Event) 웹 브라우저가 알려주는 HTML 요소에 대한 사건이 발생 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음 자바스크립트는 비동기식 이벤 coding-yesung.tistory.com 1. 이벤트 전파(Event Propagation) 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정 document 객체나 html 문서의 요소에서.. 2023. 4. 19.
[JavaScript] 이벤트(Event) - 이벤트 타입(Event Type), 이벤트 타겟(Event Target), 이벤트 리스너(Event Listener), 이벤트 객체(Event Object) 1. 이벤트(Event) 웹 브라우저가 알려주는 HTML 요소에 대한 사건이 발생 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음 자바스크립트는 비동기식 이벤트 중심의 프로그래밍 모델 이벤트 등록 객체.addEvenetListener(이벤트타입, 이벤트리스너) 이벤트 제거 객체.removeEventListener(이벤트타입, 이벤트리스너) function sendit(e){ // e.target(button), e.type(click) } 2. 이벤트객체(Event Object) 특정 타입의 이벤트와 관련이 있는 객체 이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있음 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트 대상을 나.. 2023. 4. 19.
[JavaScript] URL & URI - 정의, 차이점, URL의 이스케이프 처리와 디코딩 1. URL(Uniform Resource Locator) ✔️ 웹 사이트 주소 + 컴퓨터 네트워크 상의 자원 네트워크상에서 리소스의 위치를 나타내기 위한 규약 자원 식별자와 위치를 나타냄 특정 웹사이트의 주소에 접속하기 위해서는 웹사이트의 주소뿐만 아니라 프로토콜(https, http, sftp, smp 등)을 함께 알아야 접속이 가능한데, 이들을 모두 나타내는 것이 URL임 2. URI (Uniform Resource Identifier) URI는 인터넷상의 리소스 자원 자체를 식별하는 고유한 문자열 시퀀스 3. URL과 URI의 차이점 URI= 식별자, URL=식별자+위치 3-1. URL은 일종의 URI이다. google.co.kr은 URI, 리소스의 이름만 나타내기 때문 https://google.. 2023. 4. 19.
[JavaScript] wrapper class 1. wrapper class 란❓ 기본 타입에 해당하는 데이터를 객체로 포장해 주는 클래스 1-1. Primitive Tpyes(기본타입, 원시타입) string, number, bigint, boolean, undefined, symbol, null (8개) 기본 타입은 객체가 아니며, 메서드와 프로퍼티가 존재하지 않는 데이터 기본 타입은 프로퍼티와 메서드를 정의할 수 없음 new 키워드를 사용하여 원시 타입을 래퍼 객체로 생성할 수 있지만, 주로 사용하는 방법은 아님 let a = 'apple' // 리터럴 표기 let b = new String('apple') // 객체형 표기 a === b //false 기본타입(원시타입) 래퍼 클래스 string String number Number bigin.. 2023. 4. 19.
728x90
반응형
LIST

티스토리툴바