본문 바로가기

자바스크립트10

자바스크립트 기초(ES5+)_비동기의 꽃 JavaScript async와 await / 유용한 Promise APIs [ async · await ] Promise를 조금 더 간편, 간결하게 동기적으로 실행되는 것처럼 보이도록 도와주는 것 > 깔끔하게 Promise 사용하는 법 Promise chaining(.then)을 계속 사용하면 코드가 난잡해지는 것을 좀 더 간편한 API인 async와 await을 이용하여 동기식으로 코드를 순서대로 작성한 것처럼 작성할 수 있도록 도와준다. 기존에 존재하는 Promise 위에 간편한 API를 제공 한다. > *syntactic sugar(ex : Class > 프로토타입을 베이스로하여 그 위에 살짝 덧붙여진 것) Promise를 무조건 대체x > async를 사용할 경우에 따라 더 깔끔한 경우에 사용한다. *syntactic sugar : 문법에 설탕을 뿌려 더 달콤하게 사용한.. 2022. 3. 30.
자바스크립트 기초(ES5+)_비동기 처리의 시작_콜백(Callback) 이해하기(콜백지옥) [ 동기(Synchronous)와 비동기(Asynchronous) ] 1. 동기와 비동기 1) 동기(scynchrounous) : JS는 동기적이다 > hoisting이 된 이후부터, 코드가 우리가 작성한 순서에 맞춰서 하나하나씩 자동적으로 실행된다. *hoisting : var변수 또는 함수 선언이 가장 최상위로 올라가는 것 2) 비동기(asynchronous) : 언제 코드가 실행될지 예측할 수 없는 것을 말한다. 3) 콜백(callback) : 해당 함수 호출 시 지정된 콜백함수를 인자로 전달하여 지정 함수를 부르도록(call back)한다. -동기/비동기 // 1. 동기 : synchronous console.log("1"); console.log("2"); console.log("3"); // .. 2022. 3. 24.
자바스크립트 기초(ES5+)_유용한 배열(Array)함수 10가지(*중요) [ 유용한 배열(Array) 함수 ] 1. join() > 배열에있는 모든 아이템을 더해서 string으로 리턴함, 각각 구분자''를 통해 ,으로 구분하여 string으로 만들어준다. // Q1. make a string out of an array const fruits = ["apple", "banana", "orange"]; // answer const result = fruits.join(); const result1 = fruits.join("|"); // 구분자 '|'생성 console.log(result); console.log(result1); - 나 : toString() 사용, 차이가 무엇일까? 2. split() > 전달된 구분자''를 통해 string을 여러가지 문자열로 잘게 나뉘어.. 2022. 3. 23.
자바스크립트 기초(ES5+)_Array(배열)과 APIs [ Array 배열 ] 1. 자료구조 자료구조 : 비슷한 구조의 데이터들을 모아놓는 것이다. 자료구조와 Object의 차이점 : - object가 토끼와 당근일 경우 , 토끼와 당근들은 각각의 특징들이 있다. (property=귀 두개, 주황색, method=먹는다, 뛴다), object는 서로 연관된 특징과 행동들을 묶어놓는 것이다. 비슷한 타입의 object들을 묶어놓는 것을 자료구조라고 한다.(토끼들끼리, 당근들끼리 바구니에 담음) > 다른 언어에서는 동일한 type의 object만 담을 수 있다. but js는 유연한 언어(dynamic typed language)기 때문에 한 바구니 안에 다양한 type의 데이터를 담을 수 있다.(가능하긴 하지만 프로그래밍에 좋지 않다.) 자료구조와 알고리즘의 .. 2022. 3. 21.