728x90

async/await ?

async/await 은 자바스크립트에서 Promise 객체를 통해 처리하던 비동기 처리를 더 쉽고, 편하게 처리/사용할 수 있도록 나온 ECMAScript 2017 문법이다.

 

async/await 기본문법

async function 함수명() {
	await 비동기처리메서드명();
}

비동기 처리메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 작동한다.

promise 앞에 await keyword를 붙이면, javascript는 promise가 처리될 때 까지 대기하고, 처리가 완료되면 조건에 따라 동작한다.

1. 에러발생 => 예외 생성

2. 에러 미발생 => 프로미스 객체의 result 반환

 

async/await 예외처리

async function 함수명(){
	try{
    	...
    }
    catch(err){
    	console.log(err);
    }
}

try/catch 로 예외처리

 


[ + ] 나중에 내용 더 추가할 예정

'Language > Javascript' 카테고리의 다른 글

[ Javascript ] setTimeout, setInterval  (0) 2022.07.27
[ Javascript ] Array.prototype Methods  (0) 2022.03.08
[ Javascript ] Promise  (0) 2022.03.06
[ Javascript ] Class { ES6 (ES2015) }  (0) 2022.02.20
[ Javascript ] Set Object  (0) 2022.01.11
728x90

Asynchronous ( 비동기 )적 처리는 작업을 요청하지만 결과는 그 자리에서 꼭 받지 않아도 되는 데이터 처리 방식

Synchronous ( 동기 )적 처리는 작업을 요청함과 동시에 작업의 결과를 그 자리에서 받을 수 있는 데이터 처리 방식


Promise

Javascript Engine은 Single Thread로 동시에 두가지 작업을 할 수 없다. 이러한 Javascript가 비동기 처리를 할 수 있게 나온 것이 Promise이다.

 

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. 

► 코드의 실행 흐름에서 비동기처리를 유연하게 처리하기 위한 API

 

Promise 객체 상태

1. 대기 ( pendding ) : 이행하지도, 거부하지도 않은 초기 상태.

2. 이행 ( fulfilled ) : 연산이 성공으로 완료됨.

3. 거부 ( rejected ) : 연산이 실패함.

 

Promise.prototype.then() 및 Promise.prototype.catch() 메서드의 반환 값은 새로운 Promise로서 서로 연결할 수 있다. 



 

Promise 객체는 return 값으로 새로운 Promisse를 만들며 이는 서로 연결할 수 있다. 

 

Pendding  대기

new Promise() 메서드를 호출했을 때 pendding ( 대기 ) 상태이다.

Promise 메서드의 인자는 콜백함수이며, 콜백함수의 인자는 resolve, reject 이다.

new Promise(function(resolve, reject) {
	...
});

 

Fulfilled 이행

new Promis() 메서드의 콜백함수에서 resolve()를 수행하면 Fulfilled 이행 상태가 된다.

new Promise(function(resolve, reject) {
	resolve(); // 수행한 경우 fulfilled state
});

이행이 되면 .then() 메서드를 통해서 return 값을 받을 수 있다.

 

Rejected 실패

new Promise() 메서드의 콜백함수에서 reject()를 호출하면 Rejected 실패 상태가 된다.

new Promise(function(resolve, reject) {
	reject(); // rejceted state가 된다.
});

reject 반환값은 .then.catch(error)를 통해서 받을 수 있다.

 

 

참고 :

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

'Language > Javascript' 카테고리의 다른 글

[ Javascript ] Array.prototype Methods  (0) 2022.03.08
[ Javascript ] async/await  (0) 2022.03.07
[ Javascript ] Class { ES6 (ES2015) }  (0) 2022.02.20
[ Javascript ] Set Object  (0) 2022.01.11
[ Javascript ] Map Object  (0) 2022.01.11
728x90

Class

Javascript ES6 이전까지는 비슷한 종류의 객체를 많이 만들어내기 위해 생성자를 사용해 왔으나, ES6 이후에서 Class라는 개념이 도입되면서 Class가 생성자의 기능을 대체하게 된다. 

객체지향언어 ( ex : JAVA, C++ ... 등 ) 을 공부했던 사람들이라면 바로 이해하고 익힐 수 있을 것이라고 생각한다. 

 

Class를 사용하는 가장 큰 이유는 재사용성이다.

예시로 여러 동물들에 대한 정보를 저장해야 한다고 가정할 때 동물들은 기본적으로 "name", "age"라는 속성을 갖고, "walk"라는 method를 갖는다고 가정을 한다면 동물마다 하나하나 해당 속성을 정의하게 되면 동물의 수가 적을 경우에는 간단할 수 있지만 100마리, 1000마리, 10000마리 ... 를 정의한다고 가정하면 매우 시간이 많이 들고 코드의 수가 길어지며 가독성이 떨어질 수 있다.

이렇게 속성이 중복되는 경우 하나의 Class로 해당 속성들을 정의하면 코드가 훨씬 짧아질 뿐만아니라, 가독성 또한 상승된다. 

아래 코드가 그 예시이다.

class Animal {
	constructor(name, age) {
    	this.name = name;
        this.age = age;
        this.position = 0;
    }
	
    Walk() {
    	this.position += 1;
    }
}

const Rabbit = new Animal("토끼",3);
const Dog = new Animal("개",2);

console.log(Rabbit);
Rabbit.Walk();
console.log(Rabbit.position);

console.log(Dog);

 

console.log 출력 값


Class 기본 문법

Class 생성하기

class 생성하는 것은 간단하다. class 다음에 만들고자 하는 class 이름을 입력한 후 중괄호로 닫아주면 된다.

class "className" {

}

let classTest = new "className"();

console.log(classTest);

// console.log 결과 "className" {}

 

Class 초깃값 설정

class의 초깃값은 constructor라는 생성자를 이용하여 설정할 수 있다. class 내부에는 한 개의 constructor만 존재할 수 있으며, 2개 이상 선언 시 아래와 같은 Syntax Error가 발생한다.

Uncaught SyntaxError: A class may only have one constructor

class Animal {
	constructor( name , age , position ) {
    	this.name = name;
        this.age = age;
        this.position = position;
    }
}

const Rabbit = new Animal("rabbit",2,5);

console.log(Rabbit);
// Animal { name : "rabbit", age : 2, position : 5 }

 

Class method 생성/사용

class의 method는 function 형식으로 만들어 준다. 해당 메서드를 사용할 경우 " 객체가 담긴 변수명.메소드() " ( Rabbit.Walk() ) 형식으로 호출 가능하다. 

class Animal {
	constructor( name , age , position ) {
    	this.name = name;
        this.age = age;
        this.position = position;
    }
    
    Walk(){
    	this.position += 1;
    }
}

const Rabbit = new Animal("rabbit",2,5);

console.log(Rabbit);
// Animal { name : "rabbit", age : 2, position : 5 }

Rabbit.Walk();
Rabbit.Walk();

console.log(Rabbit);
// Animal { name : "rabbit", age : 2, position : 7 }

 

class내부에서 메소드를 정의하는 것이 아닌 class 외부에서도 메소드 정의가 가능하다. 그러나 class 자체에 추가하는 것이 아닌 class 객체를 담고 있는 변수에서 추가하는 것이기 때문에 해당 변수외의 또 다른 Animal class 객체를 담고 있는 변수의 경우 외부에서 정의한 메소드 사용이 불가능하다. 

아래 코드를 참고하여 보자.

class Animal {
    constructor( name , age , position ) {
        this.name = name;
        this.age = age;
        this.position = position;
    }

    Walk(){
        this.position += 1;
    }
}

const Rabbit = new Animal("rabbit",2,5);
Rabbit.Jump = function(){
    return `${this.name} jump`
}

console.log(Rabbit);
// Animal { name : "rabbit", age : 2, position : 5 }

Rabbit.Walk();
console.log(Rabbit.Jump()); // rabbit jump

console.log(Rabbit);
// Animal { name : "rabbit", age : 2, position : 6 }

 

extends 상속

class에는 상속이라는 개념을 사용할 수 있다. 예제를 보면 더 쉽고 빠르게 이해할 수 있을 것이다. 

상속받은 class의 속성, method를 모두 사용할 수 있다. 

class Animal {
    constructor( name , age , position ) {
        this.name = name;
        this.age = age;
        this.position = position;
    }

    Walk(){
        this.position += 1;
    }
}

class Rabbit extends Animal {
	Jump(){
    	console.log("Rabbit Jump");
    }
}

class Dog extends Animal {
	Bark(){
    	console.log("Wang Wang!");
    }
}

const dog = new Dog("meonzy",3,10);
const rabbit = new Rabbit("tosun",2,9);

dog.Bark();
dog.Walk();
rabbit.Jump();
rabbit.Walk();

 

super 키워드

super 키워드를 사용하여 자식 class에서 부모 class를 호출할 수 있다. 주로 constructor에서 많이 사용한다.

class Animal {
    constructor( name , age , position ) {
        this.name = name;
        this.age = age;
        this.position = position;
    }

    Walk(){
        this.position += 1;
    }
}

class Rabbit extends Animal {
	constructor(name, age, position, jumpSkill){
    	super(name,age,position);
        this.jumpSkill = jumpSkill;
    }
	Jump(){
    	console.log(`Rabbit ${this.jumpSkill} jump`);
    }
}

class Dog extends Animal {
	Bark(){
    	console.log("Wang Wang!");
    }
}

const dog = new Dog("meonzy",3,10);
const rabbit = new Rabbit("tosun",2,9,"100%);

dog.Bark();
dog.Walk();
rabbit.Jump();
rabbit.Walk();

 

참고 :

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

'Language > Javascript' 카테고리의 다른 글

[ Javascript ] async/await  (0) 2022.03.07
[ Javascript ] Promise  (0) 2022.03.06
[ Javascript ] Set Object  (0) 2022.01.11
[ Javascript ] Map Object  (0) 2022.01.11
[ Javascript ] Array.prototype.includes()  (0) 2022.01.11
728x90

H-Index

문제 설명

H-Index는 과학자의 생산성과 영향력을 나타내는 지표입니다. 어느 과학자의 H-Index를 나타내는 값인 h를 구하려고 합니다. 위키백과1에 따르면, H-Index는 다음과 같이 구합니다.

어떤 과학자가 발표한 논문 n편 중, h번 이상 인용된 논문이 h편 이상이고 나머지 논문이 h번 이하 인용되었다면 h의 최댓값이 이 과학자의 H-Index입니다.

어떤 과학자가 발표한 논문의 인용 횟수를 담은 배열 citations가 매개변수로 주어질 때, 이 과학자의 H-Index를 return 하도록 solution 함수를 작성해주세요.

 

 

제한사항

  • 과학자가 발표한 논문의 수는 1편 이상 1,000편 이하입니다.
  • 논문별 인용 횟수는 0회 이상 10,000회 이하입니다.

 

입출력 예

citationsreturn
[3, 0, 6, 1, 5] 3

 

입출력 예 설명

이 과학자가 발표한 논문의 수는 5편이고, 그중 3편의 논문은 3회 이상 인용되었습니다. 그리고 나머지 2편의 논문은 3회 이하 인용되었기 때문에 이 과학자의 H-Index는 3입니다.


문제 풀이

H-index 를 이해하는데 시간 좀 오래 걸렸었다. https://www.ibric.org/myboard/read.php?Board=news&id=270333 내용을 참고하였다. 피인용수와 논문수가 같아지거나, 피인용수와 논문수보다 작아지기 시작하는 숫자가 H-index이기 때문에 citations를 내림차순으로 정렬해준 후 for을 돌려 조건문을 통해서 피인용지수와 논문 index 를 비교하여 조건에 걸리면 H-index를 return하게 코드를 짰다. 

 

function solution(citations) {
    
    // 내림차순 정렬
    citations.sort( (a,b) => {
        return b - a;
    });
        
    for( let i = 0 ; i < citations.length ; i ++){
        let h_index = i + 1;
        if( citations[i] < h_index){
            return h_index - 1;
        }
        
        if( citations[i] === h_index){
            return h_index;
        }
        
        if( h_index === citations.length ){
            return h_index;
        }
    }
}

+ Recent posts