본문 바로가기

Front-end58

[JS] 자바스크립트 함수 기본편 함수 선언 & 호출 // 1. 함수 선언 & 호출 //함수 선언 function doSomething(){ console.log('hello'); } //함수 호출 doSomething(); 값을 리턴하는 함수 // 2. 값을 리턴하는 함수 function add(a,b){ const sum = a + b; return sum; } const result = add(1,2); console.log(result); 함수를 인자로 전달 - 함수의 이름 자체는 (ex.add) 함수를 가르키는 함수 자체가된다. - 괄호를 쓰지 않고 함수 이름만 다른 함수의 인자로 전달하던지 다른 변수에 할당하게 되면 함수 자체를 가르키게 되는 것이다. // 4. 함수를 인자로 전달 function doSomething(add).. 2021. 8. 28.
[JS] async, await, Promise APIs Async - promise를 chaining을 하는 것을 async,await로 간편하게 해결할 수 있다. - syntatic sugar : 기존의 존재하는 promise위에 간편하게 할 수 있도록 API를 제공하는 것 - 비동기적인 것을 동기적으로 보이게끔 해준다. 'use strict'; // async & await // clear style of using promise :) // 1. async async function fetchUser() { // do network reqeust in 10 secs.... return 'ellie'; } const user = fetchUser(); user.then(console.log); //promise로 만들어짐 console.log(user); .. 2021. 8. 28.
[JS] promise 개념부터 활용까지 Promise [Promise] - JS에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 object - 정상적으로 기능이 실행되면 성공메시지와 처리된 결과값을 전달해주고, 에러나 나면 에러가 발생 (1) State : pending(수행중인상태) --> fullfilled(완료) or rejected(수행실패) (2) Producer vs Consumer : 제공하는 사람과 쓰는 사람의 차이점을 이해할 필요가 있다. [Producer] - promise는 클래스이기 때문에 new를 사용해 생성 - 새로운 promise가 만들어질 때는 excutor가 자동으로 실행된다. (1) resolve : 기능을 정상적으로 수행해서 마지막에 최종 데이터를 전달 (2) reject : 기능을 수행하다가 문제.. 2021. 8. 28.
[JS] 비동기 처리, callback Callback [동기와 비동기] (1) 동기적 Synchronous - javascript는 동기적이다. - hoisting이 된 이후부터 코드가 우리가 작성된 순서대로 동기적으로 실행 - hoisting : var 변수나 함수선언들이 제일 위로 올라가는 것 (2) 비동기적 Asynchronous : 언제 코드가 실행될지 예측할 수 없다. 'use strict'; // JavaScript is synchronous. // Execute the code block in order after hoisting. // hoisting: var, function declaration console.log('1'); setTimeout(() => console.log('2'), 1000); console.log(.. 2021. 8. 28.
[JS] JSON 개념정리와 활용방법 JSON [JSON] (1) HTTP(Hypertext Transfer Protocal) : Hypertext를 주고 받는 방법에 대한 통신 규약 (2) JSON (JavaScript Object Notation) : Object처럼 key,value로 구성, 브라우저와 모바일에서 서버와 데이터를 주고받을때, 서버와통신하지 않고도 object를 file system에 저장할 때 사용 - simplest data interchange format - lightweight text-based structure - easy to read - key-value pairs - used for serialization and transmission of data between the network the netwo.. 2021. 8. 27.
[JS] 10가지 배열함수들, Array APIs 총정리 1. join : 배열에 있는 요소들을 ,로 연결해 string으로 만든다. // Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(','); console.log(result); } 2. split : string을 구분자를 기준으로 분리한다. // Q2. make an array out of a string { const fruits = '🍎, 🥝, 🍌, 🍒'; const result = fruits.split(','); console.log(result); } 3. reverse : 배열의 반대로 정렬 // Q3. make this array look li.. 2021. 8. 27.