AI교육과정 - JavaScript.6

• (this)는 태그 본인을 의미함

  <p onclick="changeText(this)">

• 비동기식: 중간에 오래걸리는 작업이 있으면 제껴두고 다른거부터 처리하는 방식

• 동기식: 한 번에 한줄씩 차례대로 실행

  https://blog.naver.com/dlgkstoa415/222735122877

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

  <input type="button" onclick="sendit()" value="확인">
  						 ------  -------  --------
  					이벤트타겟 이벤트타입 이벤트리스너

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

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

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

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

  // 이벤트 등록
  객체.addEventListner(이벤트타입, 이벤트리스너);
  // 이벤트 제거
  객체.removeEventListner(이벤트타입, 이벤트리스너);

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

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

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

• 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달됨

  function sendit(e){ // e는 이벤트 객체
  		console.log(e.target); // 이벤트 타겟(button)
  		console.log(e.type); // 이벤트 타입(onclick)
  }
  <input type="button" onclick="sendit()" value="완료">

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

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

  🥙 캡처링 전파방식

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

• 세번째 parameter에 true를 넣으면됨

  🍤 버블링 전파방식

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

  🍪 이벤트 전파를 막는 방법

  이벤트객체명.stopPropagation();

• 이터레이터(Iterator)
  • 반복 처리가 가능한 객체
  • 내부적으로 next() 메서드를 가지며 next() 메서드는 value와 done이라는 프로퍼티를 가진 객체를 반환해야함

  1. next()

     • 가장 가까운 yield를 만날 때까지 실행되고 데이터 객체를 반환

  2. return()

     • next()를 진행하다가 바로 함수를 끝내고 싶은 경우 사용
     • 바로 done에 true값이 리턴됨

  3. throw()

     • try/catch 문과 함께 작성 가능한 예외처리문
     • 조건에 충족하지 못하는 경우 실행하며, done값이 true로 리턴됨

     throw new Error(에러문);

• 이터러블(Iterable)
  • String, Array, TypedArray, Map, Set 객체들은 내장 Iterable
  • Iterable인 객체는 for/of 문법으로 반복이 가능
• 제너레이터(Generator)

  • 이터레이터를 좀 더 유연하게 사용할 수 있는 기능

  • 코드의 일시정지 가능, 코드가 실행된 상태가 유지가 되기 때문에 정지된 상태부터 다시 시작할 수 있음

    function* 제너레이터명(){
    		~
    		yield 리턴값;
    }

  1. 제너레이터가 호출되면 이터레이터가 반환되고 이터레이터에서 next() 메서드가 호출되면 정의한 함수의 코드가 실행
  2. yield 키워드 까지 실행이 되며, yield를 통해서 값이 반환
  3. 더 이상 yield가 없고 실행할 코드도 없다면 IteratorResult의 value는 undefined done은 true로 값이 반환됨

• 모든 iterable은 spread가 될 수 있음

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

  func(...iterable)
  [..iterable]
  {...obj}
  /==========
  function add(num1, num2, num3){
  		return num1,num2,num3;
  }
  add(10,20,30); //일반적인 값
  const nums=[10,20,30];
  add(nums[0], nums[1],num[2];
  add(...nums);

arr1.concat(arr2)
// arr1에 arr2추가

• const [값1, 값2, ...others] = 배열명
  - 값1, 값2가 객체로 생성되어 배열명.값 호출이 아닌 따로 값으로 호출 가능

  const fruits = [ '🍟', '🥠', '🍎', '🍒'];
  const [fruit1, fruit2, ...others] = fruits;
  // fruit1: 🍟 / fruit2: 🥠 / others: '🍎', '🍒'
  
  const point = [1,2];
  const [x,y,z=0] = point;
  // x: 1 / y: 2 / z: 0

const 배열명 ={
    name: ~,
    style: {color: 'black'}};
function 함수명({style:{color},name}){}
// color: black / name: ~

• job을 hobby로 변경

  const {name, age, pet = '루시', job:hobby} = apple_update;
  // pet 프로퍼티 값 추가

• Set 순서가 없고 값이 중복될 수 없음
  • set 선언

    const set = new Set(값1,값2,값3,..])

  1. .size: set사이즈 확인

  2. .has(값): set의 값에 동일한 값이 존재하는지 확인

  3. .add(값): 값 추가

  4. .delete(값): 값 삭제

  5. .clear(): 전부 삭제

  6. .forEach(()=>{}): 순회하여 배열값을 순서대로 출력

     • 아래와 동일함

     for(let value of 배열명.values()){}

  7. 오브젝트 세트

     • new 로 생성한 오브젝트 세트에는 중복된 값을 추가할 수 없으나, 객체로 생성한 오브젝트 세트에는 중복값 삽입이 가능함

     const obj1 = {name: '사과', emoji: '🍎', price: 1000};
     const obj2 = {name: '바나나', emoji: '🍌', price: 2000};
     const set2 = new Set([obj1, obj2]);
     //Set(2) {
     //  { name: '사과', emoji: '🍎', price: 1000 },
     //  { name: '바나나', emoji: '🍌', price: 2000 }
     //}

  8. 중복 제거

     • 기존에 있던 arr 배열을 set으로 선언하여 중복된 값 자동제거

     function 함수명(arr){
         return [...new Set(arr)];
     }

  9. 중복값만 담고있는 세트 생성

     • filter를 통해 set2가 가진 item 값을 item에 대입

     new Set([...set1].filter((item)=> set2.has(item)))

• Map 프로퍼티를 모아둘 수 있는 세트
  • set 선언

    const map = new Map([
        ['key1', '🍎'],
        ['key2', '🍌']
    ])

  1. .size: set사이즈 확인 [key와 value가 한 쌍]

  2. .has(key값): 동일한 key값이 존재하는지 확인 [boolean 값]

  3. get(key값): 동일한 key값이 존재하는지 확인 후 value값 출력

  4. .set(key값,value값): 필드 추가

  5. .delete(key값): 값 삭제

  6. .clear(): 전부 삭제

  7. .forEach(()=>{}): 순회하여 배열값을 순서대로 출력

     • 매개변수에서 value와 key값의 순서가 바껴있음

     map.forEach((value, key) => console.log(key, value));

• 값이 없는 경우, undefined인 경우 false

1. &&

   둘 다 true면 뒤에 항목을 실행

   let result = obj1 && obj2; // 둘 다 true면 obj2를 result에 삽입

2. ||

   • 둘 중 하나가 true면 true인 항목을 실행
   • 둘 다 true일 경우 앞에 항목을 실행

   result = obj1 || obj2; // 둘 다 true일 경우 obj1을 result에 삽입

• ECMA Script 11
• null 또는 undefined를 확인할 때

1. ?.

   • &&와 동일한 역할을 함
   • 0, -0, null, ''은 해결안됨

   ex) obj && lover && lover.name == obj?.lover?.name

2. ??

   • null, undefined에 대해서만 처리