[드림코딩 by 엘리] 자바스크립트 기초 강의_정리

 

---

Youtube_드림코딩 by 엘리 자바스크립트 기초 강의

---

▶ 0

알아둬야할 원리와 지식들을 아낌없이 알려주시는 것 같다.

Normard Coder 강의를 수강하고 와서 이해하기 수월하였고,

추가로 더 깊고 알아야만 하는 지식을 아낌없이 가르쳐주신 느낌이 든다.

 

 

▶ 1

• NetScape에서 만든 LiveScript → Javascript / Microsoft에서 만든 JScript
  • 다양한 호환성때문에 표준화하여 만든 표준안 : ECMAScript
• Babel (Javascript transcompiler)
  • 개발할 땐 최신 ECMAScript 사용
  • 배포할 땐 최신 ECMAScript를 ECMAScript 5, 6으로 변환하여 사용하게 끔 만들어 주는 것
    

 

 

▶ 2

• Web API
  • 브라우저가 제공하고, 이해할 수 있는 기능(함수)

 

• 'user strict'
  • 선언하지 않은 변수를 사용하는 현상을 방지하고자
    해당 Javascript 가장 맨 위에 작성한다.
    (ECMAScript 5)

 

 

▶ 3

• let
  • mutable
  • var의 문제점1 → hoisting
    • 어디에 선언했는 지 상관없이 항상 제일 위로 끌어올려주는 것
  • var의 문제점2 → block scope 무시
• const
  • immutable
  • 사용 이유
    • 보안
    • thread 안전
    • 인간이 하는 실수
      (변하지 말아야 할 상수에 값을 변경하게 되는 경우)
• function
  • first-class function 특징을 가졌다.
    • 변수에 함수 할당/인자/전달 가능
• boolean
  • false
    • 0
    • null
    • undefined
    • NaN
    • ''
• symbol
  • 유일한 객체로 식별함
  • const symbol1 = Symbol( 'id' )
    const symbol2 = Symbol( 'id' )
    console.log( Symbol1 === Symbol2 )  // false

 

 

▶ 4

• OR
  • 연산자는 앞에서부터 피연산자 확인할 때
    true가 나오면 멈춘다.
    즉, true를 얻게되면 뒤에 있는 피연산자(함수, 값, 등)는 확인하지 않는다.
• 삼항 연산자
• 조건문 / 반복문
  • switch
  • while
  • do-while
  • for

 

 

▶ 5

• function
• Default Parameters (added in ES 6)
  • function showMessage( message, from = 'unknown' ) {
      console.log( `${ message } by ${ from }` );
    }
• Rest Parameters (added in ES 6)
  • // 배열로 바꿔서 전달
    funtion printAll( ...arr ) {
      for( let i=0 ; i<arr.length ; i++ )
        console.log( arr[ i ] );
    }
    printAll( 'dream' , 'coding' , 'ellie' );
• return 의 기본은 undefined
• 함수 표현식
  • const print = function ( ) { ... }
    // 익명 함수
    // Hoisting 되어짐
• Callback 함수
  • function randomQuiz ( answer, printYES, printNO ) {
      if( answer == 'answer' )
        printYES( );
      else
        printNO( );
    }
• 화살표 함수 
  • 항상 익명 함수
  • const print = ( ) => { console.log( 'arrow function' ); }
• Immediately Invoked Function Expression
  • ( function hello( ) {
        console.log( 'hello' );
      })( );
    // 선언과 동시에 실행

 

 

▶ 6

• Class
  • 틀
• Object
  • 틀에 의해 만들어진 것
• private / public / static
  • 너무 최신이고 미지원하는 브라우저 다수
• 상속(extends), 다양성(overriding)

 

 

▶ 7

• object
  • object literal
    • const obj1 = { };
  • object constructor
    • const obj2 = new Object( );
• 객체 접근
  • 객체의 Key를 알고 있는 경우
    • person.name
  • 객체의 Key를 모르고 있는 경우
    • person['name']
• Constructor Function
• in operator
  • Object 안에 Key가 존재하는 지 확인
  • 'name' in person
    // 'name' 자리는 꼭 string 이어야 함
    // boolean 으로 반환
• for ( Key in Object )
• for ( Value of Array )
• cloning  
  • const user1 = { };
    const user2 = user1;
    // user2 변경하면 user1도 변경됨
    // 즉, 같은 주소를 가리킴
• object.assign( dest, src )
  
  • 복사
  • const user2 = { };
    object.assign( user2, user1 );
  • // 또는
    const user2 = object.assign( { }, user1 );
    object.assign( dest, src1, src2, src3, .. );
    // 뒤에서 앞으로 덮어쓰기

 

 

▶ 8

• array
  • const arr1 = new Array( );
  • const arr2 = [ ];
• forEach( callbackFunction( value, index, arr ), [선택] ) { }
• (맨 앞) 추가
  • arr.push( 원소 1개 이상 )
• (맨 뒤) 삭제
  • arr.pop( )
• (맨 앞) 추가
  • arr.unshift( 원소 1개 이상)
• (맨 앞) 삭제
  • arr.shift( );
• 지정된 곳의 삭제
  • arr.splice( 시작 index, [선택]삭제할 갯수 )
    • 삭제할 갯수의 기본값은 배열 끝까지
  • arr.splice( index, cnt, 그자리에 추가할 것, 원소 1개 이상 )
    • 해당 원소를 삭제하고 그자리에 추가
• 배열 이어 만들기
  • array.concat( arr2 )
    • arr 다음 arr2 붙여짐
• 찾고자하는 원소의 index
  • arr.indexOf( 찾고자 하는 원소 )
    • 맨 앞 부터 검사
  • arr.lastIndexOf( 찾고자 하는 원소 )
    • 맨 뒤 부터 검사
• 배열 내 포함 여부
  • arr.includes( 찾고자 하는 원소 )
    • return boolean값

 

 

▶ 9

• 배열 API
  • arr.join
    • 배열 → 문자열
    • 구분자까지 조절 가능
  • arr.split
    • 문자열 → 배열
  • arr.splice
    • 원조 배열도 변형됨
    • 부분 배열 반환
  • arr.slice
    • 원조 배열 변형X
    • 부분 배열 반환
  • arr.find
    • 배열의 모든 원소에 대하여 callback 함수 실행
    • true인 원소에서 멈추며 해당 원소 return
  • arr.filter
    • 조건에 맞는 원소만 모아서 반환
  • arr.map
    • 배열을 callback 함수에 의해 업데이트됨
  • arr.some
    • 배열의 원소 중 1개라도 callback 함수 반환값이 true 인 게 있는 지 없는 지 확인
    • boolean 반환
  • arr.every
    • 배열의 모든 원소가 callback 함수 반환값이 true 인 게 있는 지 없는 지 확인
    • boolean 반환
  • arr.reduce
    • 배열의 원소값을 누적하여 더한다.

 

 

▶ 10

• client → server
  • request
• client ← server
  • response
• AJAX 기술
  • ex) XHR 의 X = XML → 요즘은 JSON 객체 형태
• object → string
  • serialize
  • JSON.stringify( 객체배열뭐든but함수X )
    // 반환값 string
• object ← string
  
  • deserialize
  • JSON.parse( string )
    // 반환값 object

 

 

▶ 11

• callback → promise → async, await
• Javascript is synchronous.
  • 자바스크립트는 동기적이다.
  • hoisting 이후 작성된 순서대로 실행
    • var, function 선언이 제일 위로 올라감

 

 

▶ 12

• promise
  • Javascript에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 Object
  • 실행 성공시 성공메시지 + data 전달
    실행 실패시 실패메시지 + data 전달
  • callback 함수를 쓰지 않고 promise를 이용해서 비동기 처리하기
    1. state
       • process 상태
       • pending : 수행중
       • fulfuilled : 성공
       • rejected : 실패
    2. Producer VS Consumer
       • const promise = new Promise( ( resolve, reject ) => { } );
       • resolve라는 executor 함수가 생성되자마자 자동적으로 실행
       • promise.then( ( ) => { } )
           .catch( ( ) => { } )
           .finally( ( ) => { } )

 

 

▶ 13

• async
  • 자동으로 Promise 로 변환
  • async function fetchUser( ) {
      return '***';
    }
  • Promise.all( [ 메소드들, ... , .. ] )
      .then( ( ) => { } )
    • 모든 메소드들을 실행한 후 Promise 실행
  • Promise.race( [ 메소드들, ... , .. } )
      .then( ( ) => { } )
    • 가장 빨리 받아온 1개만 반환 후 실행

 

---