eadgnus

1. 맵(map)

- key, Value로 이루어진 데이터 집합의 자료구조

2. 예시 및 설명

이러한 함수가 있다고 했을 때

console.log(map) 에서는

이렇게 표현된다.

2-1 사이즈 확인 

맵 안의 요소의 갯수를 반환 해준다

2-2 키 존재 확인

has()를 이용하여 맵 안에 해당 키가 있는지 true, false로 확인할 수 있다. 

2-3 순회

map은 이터러블한 객체이므로 for문등을 통해서 순회도 가능하다.

forEach문을 통해서 map의 value와 key를 받아서 콘솔에 찍어준 모습. 

2-4 찾기

get('key')를 이용하여 사과와 바나나의 이모지를 반환했다.

orange는 없는데 undefined로 표현된 모습.

2-5 obj 객체에서 value에 접근하던 방법

2-6 map객체에서 value에 접근하는 방법

가운데 방법인 get을 이용해서만 가능하다.

2-7 요소추가

set을 이용하여 key 와 value를 추가 해줄수 있다.

2-8 요소삭제

delete는 선택한 요소만, clear는 전체가 삭제된다.

1. spread

- 전개구문

- 모든 Iterable은 Spread가 될수 있음

- 순회 가능한 데이터는 펼쳐질 수 있음

add라는 더하기 함수를 만들어서

add(요소1, 요소2, 요소3); 이렇게 하는방법도 있지만

const nums 처럼 Array 객체를 만들어 함수에 인덱싱을 하는방법,

...nums 처럼 넣는 방법도 있다.

2. 예시 및 설명

2-1

fruit1,2 배열을 만들어서

arr 변수에 concat으로 두개의 Array(배열)를 합쳐준다

2-2

...a, ...b 꼴로 배열에 집어넣어도 같은 결과가 나온다

2-3

배열 사이에 다른 요소를 추가하여도 문제가 없다.

2-4

apple에 딕셔너리 형태로 담고

apple_update 에서는 job 키와 프로그래머 라는 value를 추가

2-5

fruits 배열을 나눠서 변수로 지정하는 방법

바나나와 수박은 1, 2번에 담기고 나머지 요소들은 others에 담기게 됨(변수이름은 others가 아니어도 됨)

2-6

배열을 x,y에 나눠담고 z를 기본값으로 0을 설정해서 담을수도 있다.

2-7

위와 마찬가지 경우인데 함수에서 받는 리턴값을 담기

2-8

display 함수에서 name, age, job 키들을 매개변수로 받아 각 키의 value를 반환

component 딕셔너리에서 styles의 value 인 딕셔너리 안에서 키가 color인 black을 출력하는 함수

1. 제너레이터

- 실행을 멈췄다가 나중에 다시 접근할 수 있는 특이한 형태의 함수

- 나중에 닷 접근하기 위해 context(변수)를 저장된 상태로 남겨둠

- 이터레이터를 좀 더 유연하게 사용할 수 있음

2. 예제 및 설명

2 - 1. 전체

2 - 2. (Generator Function) 

try -> 오류가 실행되었을때 오류 처리 방법

catch -> 캐치로 에러를 받아서 콘솔에 출력

2 - 2 - 1. 

multiple => 제너레이터 함수를 변수에 담기

next => 다음 요소를 반환

이터러블

- 반복이 가능한 객체

- symbol.Iterator 메소드가 있어야 하며 Symbol.Iterator는 이터레이터 객체를 반환해야 함

- String, Array, Map, Set ..등등의 객체

- 반복문으로 반복이 가능하다.

이터레이터(Iterator)

- 반복처리가 가능한 객체

- 내부적으로 next() 메소드를 가지고 있음

- IterationResult 객체 value와 done이라는 프로퍼티를 가진 객체를 반환해야함

const arr에 어레이객체로 1~5를 담아주고

객체의 밸류, 엔트리, 키를 확인,

const iterator에 어레이의 밸류값을 담아주고

와일문으로 iterator의 값이 없어질때까지 밸류를 콘솔로 반환

포문도 위와 동일

위의 스크립트의 결과

목차

1.  이벤트(Event)
2.  이벤트 타입(Event type)
3.  이벤트 타겟(Event target)
4.  이벤트 리스너(Event Listener)
5.  이벤트 객체(Event Object)
6.  이벤트 전파(Event Propagation)

 1. 이벤트(Event)

- 웹브라우저 알려주는 HTML 요소에 대한 사건을 발생
- 웹페이지에서 사용된 자바스크립트는 발생한 이벤트에 반응 -> 특정동작을 수행
- 자바스크립트는 비동기식 이벤트 중심의 프로그래밍 모델

(비동기식은 읽어오다가 느린것이 있으면 로딩이 끝나길 기다려주지 않고 그 뒤에것들을 먼저 불러오는방식)

input type이 버튼인 태그 = <button> 태그와 같다.
onclick은 이벤트타입이 onclick(클릭하면 반응한다) 라는 뜻이다.
sendit()은 괄호까지 들어가야 하는데 오타이고 여기에선 이벤트를 수행하는 함수이다.

 2. 이벤트 타입(Event type) 

- 발생한 이벤트의 종류를 나타내는 문자열로 이벤트 명이라고도 함
- 키보드, 마우스, HTML DOM, window 객체 등을 처리하는 이벤트 제공

이벤트 타입에 대한 자세한 설명: https://developer.mozilla.org/ko/docs/Web/API/Event

HTML의 바디부분

2-1 window.onload 부분의 설명

window.onload => html이 다 로딩된 후에 실행한다는 의미를 가지고 있다.

const text => 텍스트라는 변수명으로 상수를 만들어준다.

document.getElementById('text') => 요소의 아이디가 text인 객체에 접근한다

text.innerHTML = ' <b style='color..... 부분은 텍스트라는 변수에 아이디가 text인 요소를 접근하게 해놓고 innerHTML속성을 통해서 = '' 따옴표 안에 있는 HTML구문을 생성하게 한다.

2-2 function changeText(el) 설명

이름이 changeText인 함수에 el 을 요소로 받아서 innerHTML 해준다(2-1 과동일)

2-3 결과

3. 이벤트 타겟(Event target)

- 이벤트가 일어날 객체를 의미함

 4. 이벤트 리스너(Event Listener)

- 이벤트가 발생 했을 때 그 처리를 담당하는 함수

- 이벤트 핸들러라고도 부름

- 지정된 타입의 이벤트가 특정 요소에서 발생하면 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행 하게 

4-1 예시와 설명

window.onload html문서가 다 불러와지면 함수를 실행시킨다.

const btn -> eventBtn의 아이디를가진 요소에 접근해서

그 요소에다가 이벤트 리스너들을 추가한다.

click -> 클릭했을때 반응한다  // clickBtn 함수명이 들어가는 자리

mouseover -> 마우스를 올려놓았을때

mouseout -> 마우스올린것을 다시 떼어냈을때

text라는 아이디를 가진 요소에 접근하여 = ' ' 안의 내용을 입력시켜준다.

위와 설명은 동일

 5. 이벤트 객체(Event Object)

- 특정 타입의 이벤트와 관련이 있는 객체

- 이벤트 객체는 해당 타입의 이벤트에 대한 상세정보를 저장하고 있음

- 모든 이벤트 객체는 이벤트 타입을 나타내는 type 프로퍼티와 이벤트 대상을 나타내는 target 프로퍼티를 가지고 있음

- 이벤트 객체를 이벤트 리스너가 호출할때 인수로 전달

sendit()함수는 e를 매개변수로 받고,

이벤트의 타겟은 버튼, 이벤트 타입은 클릭이 된다.

5-1 예시 및 설명

e.target => 이벤트 타겟: 버튼태그

e.target.id => 버튼의 아이디인 btn

e.target.value => 버튼태그의 밸류값 '확인'

e.type => 이벤트 타입이 뭔지 => click

버튼을 클릭하여 console로 반응한모습

5-2

버튼 1,2,3의 요소를 각각 btn123에 변수로 담아주고

addeventlistener를 통해서 클릭했을때 함수가 실행되게 해준다

switch문을 이용하여 이벤트 타겟의 아이디가 Btn1이면 버튼1이 눌렸다고,

Btn2 이면 버튼2가 눌렸다고 콘솔창에 출력하게 만들어주었다.

html의 모습

 6. 이벤트 전파(Event Propagation)

- 이벤트가 발생 했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정

- document 객체나 html 무서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기 위해 이벤트 전파가 일어남

6-1 버블링 전파방식

- 자식에서 부모로 이벤트를 전파

6-2 캡처링 전파방식

- 부모에서 자식으로 이벤트를 전파

6-3 이벤트 전파를 막는 방법

이벤트객체명.stopPropagation()

6-4 예시 및 설명

// 버블링 전파방식

divBox를 아이디로 가진 요소에 클릭하면 함수를  실행하게 적용

pBox를 아이디로 가진 요소에 클릭하면 함수를  실행하게 적용

spanBox를 아이디로 가진 요소에 클릭하면 함수를  실행하게 적용

// 캡처링 전파방식

버블링 전파방식에 3번째 요소로 true값을 넣어주면 됨

클릭하면 html을 inplace연산으로 계속 추가하게 해줌

p를 클릭하여도 div 까지 같이 실행이 된다. ( 버블링 전파방식 )

span에는 stopPropagation()을 사용하여 전파가 되지 않도록 막아 span의 이벤트만 실행 됨

Primitive Types

- string, number, bigint, boolean, undefined, symbol, null
- 기본타입은 객체가 아님
- 원시타입은 프로퍼티와 메소드를 정의할수 없다.
- new 키워드를 사용하여 원시 타입을 래퍼 객체로 생성할수 있지만, 주로 사용하는 방법은 아님

    let a = 'apple'; => string -> 기본함수들은 사용가능하지만 String객체의 기능을 이용할수는없다. 
    그래서 String과는 다르다.
    let a = new String('apple'); => String
   

    string -> String()
    number -> Number()
    bigint -> BigInt()
    boolean -> Boolean() 
    symbol -> Symbol() 

URL(Uniform Resource Location), URI(Uniform Resource Identifier)

- 아스키 문자로만 구성되야 함
- 한글이나 특수문자는 이스케이프 처리    

    const URL = 'https://대한민국.com'
    const encoded = encodeURI(URL) // 이스케이프 처리
    const decoded = decodeURI(encoded) // 돌려놓기