Javascript- intermediate3

1. 클래스 :

const User = function (name, age) {
	this.name = name;
    this.age = age;
    this.showName = function(){
    	console.log(this.name);
        }
     };
     
//객체 내부에 showName이 있고
     
const mike = new User("mike", 30);

class User2{
	constructor(name, age){
    	this.name = name;
        this.age =age;
       }
    showName(){
    	console.log(this.name)
       }
    }
const tom = new User2("tom", 30);

//prototype 내부에 showname이 있다.


//클래스에서의 상속
extends

class Car(color){
	this.color = color;
    this.wheels = 4;
    }
    dirve(){
    	console.log("dirve..");
        }
    stop(){
    	console.log("STOP!");
        }
      }
class Bmw extends Car{
	park(){
    	console.log("PARK");
        }
    //여기에 stop추가하면 오버라이딩 된다. 
   	stop(){
    	//메소드 오버라이딩
        //만약 이렇게 하면 부모의 것을 확장시켜서 사용하는 것이다. 
        super.stop();
    	console.log("OFF")
     }
const z4 = new Bmw("blue");

//클래스 내부에서 선언한 메서드는 프로토타입 밑으로 들어간다. 

//생성자 오버라이딩

class Bmw extends Car{
	constructor(){
    	//부모의 생성자 먼저 호출해야 한다. 아래처럼 super()로
    	super();
        this.navigagion = 1;
       }
        park(){
        	console.log("PARK");
            }
       }

 

2. Promise

const pr = new Promise((resolve, reject) => {

 

  // code

});

 

resolve : 성공했을 때

reject : 실패했을 때

 

new Promise 생성자는 

state : pending(대기)과 

result : undefined를 프로퍼티로 받는다. 

1) resolve일 경우

resolve(value)
	state : fulfilled(이행됨)
    result : value
 
 2) reject(error)
 	state : rejected(거부됨)
    result : error
    
 
 const pr = new Promise((resolve, reject) =>{
 	setTimeout(() => {
    	resolve('OK')
        }, 3000)
      });
    pr.then(
    	function(result){} - 이행 되었을 때 실행
        fuction(err){} - 거부 되었을 때 실행
     );
    //아래와 같이 바꿀 수도 있다. 이게 가독성에 더 좋다. 
    pr.then(
    		function(result){}
        ).catch(
        	function(err){}
        )

2-1. promise all

 

//세 작업이 모두 완료 되어야 then 부분이 작동한다. 

//셋 중 하나라도 오류가 나면 then으로 가지 않는다. 

Promise.all([f1(), f2(), f3()]).then((res) => {
	console.log(res);
    });

//Promise.race
하나라도 일등으로 완료되면 끝낸다.

 

3. async, await

promise의 then 메소드를 chain형식으로 호출하는 것 보다 가독성이 좋아진다.

 

1) async

함수 앞에 async를 붙이면 항상 promise를 반환한다. 

async function getName(){
	return "Mike";
    }

console.log(getName());

//따라서 then을 사용할 수 있다. 
getName().then((name) => {
 	console.log(name);
    });

2) await : async 함수 내부에서만 사용할 수 있다. 

async function showNam(){
	const result = await getName('Mike');
    }
//await 옆에는 Promise를 반환하고 Promise가 반환될 때까지 기다린다. 

async function order(){
	try{
	const result1 = await fl();
    const result2 = await f2(result1);
    const result3 = await f3(result2);
    console.log(resutl3);
    } catch(e){
    console.log(e);
}
order();

//async await함수에서는 try-catch로 감싸주면 된다. 
// Promise는 then(), catch()로 하면 된다.

 

4. generator : 함수의 실행을 중간에 멈췄다가 제기할 수 있는 기능

제너레이터는 다른 작업을 하다가 다시 돌아와서 next()해주면 진행이 멈췄던 부분부터 이어서 실행한다.

 

fucntion * fn() {
	console.log(1);
	yield 1;
    console.log(2);
    yield 2;
    console.log(3);
    console.log(4);
    yield 3;
    return "finish";
    }
    
 const a = fn(); // 이것만 실행하면 generator 객체만 반환되고 함수 본문은 실행되지 않는다. 
 a.next();  //가장 가까운 yield문 만날 때까지 실행되고 데이터 객체 반환(value : yield 오른 쪽에 있는 값, done:전체 함수가 끝났는지 여부)
 
 generator는 next(), return(), throw() 세 가지 메소드를 갖고 있다.

generator는 

 1) iterable

 - Symbol.iterator 메서드가 있다.

 - Symbol.iterator는 iterator를 반환해야 한다. 

 

 2) iterator

 - next 메서드를 가진다. 

 - next 메서드는 value와 done 속성을 가진 객체를 반환한다. 

 - 작업이 끝나면 done은 true가 된다. 

 

배열은 반복가능한 객체이다. prototype에 Symbol.iterator메서드 있다. 

const arr = [1,2,3,4,5];

 

5. 2021 추가된 내용

//1. replaceAll

console.clear();

const str1 = "Hello World";
console.log(str1.replaceAll("l", "~")); // H~~o Wor~d

//2.Promise.any // 프로미스 중에 가장 먼저 이행된 객체 반환

Promise.race: //프로미스 중에 가장 먼저 완료된 결과값으로 이행or거부 반환한다. 

//3. 논리 연산자
function add(num1, num2){
	num1 = num1||0; // undefined면 0을 할당하게 끔 한다. 아래는 축약형 
    num2 ||=0;
    console.log(num1+num2);
  }
  
||: 앞의 값이 falsy이면 뒤의 값
??: 앞의 값이 null이나 undefined이면 뒤의 값

javascript는 숫자에 , 넣는 것 허용하지 않음 따라서
let billion = 1_000_000_000 //10억 이렇게 사용함.