JS 40

12. 프로미스 개념부터 활용까지 JavaScript Promise

'use strict' //프로미스는 비동기통신에서 콜백함수 대신 유용하게 사용할 수 있는 오브젝트이다 //기능수행이 완료되고 성공했는지 실패했는지에 대해서 아는게 중요 -- state //produce와(제공자) consumer의 차이점에 대해서 아는게 중요하다(데이터 제공에 대한) //state : 오퍼레이션이 수행중일때는 pending상태라고한다. // ->오퍼레이션이 다 끝나게되면 fulfilled 상태가 된다/ 또는 rejected //Producer vs Consumer //1. Producer //when new Promise is created, the executor runs automatically. const promise = new Promise((resolve,reject)=>{ ..

11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험

'use strict' //var선언이나 function같은것들을 선언하면 자동적으로 가장위에서 선언된것처럼 되는것을 호이스팅이라고 한다. console.log('1'); setTimeout(()=>{console.log("2")},1000); //callback함수를 n초 후에 실행시켜줘 console.log('3'); //Synchronous callback function printImmediately(print){ print(); } printImmediately(()=>{console.log('hello')}); //Asynchronous callback function printWithDelay(print,timeout){ setTimeout(print,timeout); } printWithD..

10. JSON 개념 정리 와 활용방법

HTTP (Hyper Text Transfer Protocol) : HyperText를 클라이언트와 서버가 어떻게 주고받을지를 정한 프로토콜 -Client는 Server에 'Request' 할 수 있고, -Server는 Client에 Request에 맞는 'Response'를 해준다. ​ HyperText: 인터넷에서 사용되는 하이퍼링크 이외에도 문서나 이미지들 ​ AJAX(Asynchronous JavaScript And XML) : 웹페이지에서 동적으로 서버에게 데이터를 주고받을수 있는 기술 - 대표적으로 XHR(XMLHttpRequest) :브라우저에서 제공하는 Object중에 하나이다. ​ 최근에는 fetch API 도 추가되었지만 ie에서는 지원하지 않는다. ​ XML : HTML과 마찬가지로 ..

9. 유용한 10가지 배열 함수들. Array APIs 총정리

//Q1. make a string out of an array { const fruits = ['apple','banana','orange']; let result = ""; for(fruit of fruits){ result = result+fruit; } console.log(result); } //Q1. 답 { const fruits = ['apple','banana','orange']; const result = fruits.join('6'); // student.score) //map안의 콜백함수와 배열의 인자가 맵핑되어 콜백함수의 return으로 바뀜 console.log(result); //콜백함수의 인자는 최대한 이해하기 쉽도록 정한다 } //Q8. 배열안에 학생들 점수가 50점보다 낮은..

8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리

//object와 array의 차이점 //object는 서로 연관된 특징과 행동들을 묶어놓는것 (토끼,사람,당근..같은 범주) //이러한 object들을 같은종류로 묶어놓은것을 자료구조라고 한다. //type이 있는 데이터는 동일한 타입만 묶을 수 있다.\ //Array > //1. Declaration const arr1 = new Array(); const arr2 = [1,2]; //배열을 만드는법은 new를 선언하거나 이렇게 만든다. //2. Index position

7. Object 넌 뭐니?

//objects //object는 key와 value 의 집합체이다 const obj1 = {}; const obj2 = new Object(); function print(person){ console.log(person.name); console.log(person.age); } const ellie = {name:'ellie', age:4}; print(ellie); //with JS magic (dynamically typed language) //can add properties later ellie.hasJob=true; console.log(ellie.hasJob); //2. computed properties //property는 String type으로 지정해야한다 //왠만하면 .을쓰고..

6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리

'use strict'; //class : 템플릿이다 //object : 클래스를 이용해서 실제로 데이터를 넣어 만든것 //javaScript classes // -introduced in ES6 // -기존에 존재하던 prototype을 기반해서 문법만 class가 추가된것. // 1.Class declarations class Person{ //constructor constructor(name,age){ //fields this.name = name; this.age = age; } //methods speak(){ console.log(`${this.name} : hello`); } } const ellie = new Person('ellie',20); console.log(ellie.name);..

5. Arrow Function은 무엇인가? 함수의 선언과 표현

//Function //-fundamental building block in the program //-subprogram can be used multiple items //-performs a task or calculates a value; //Function declaration //하나의 함수는 하나의 일만 하도록 작성해야한다. //함수의 이름은 동사형태로 적어야한다 꼭!!! //만일 createCardAndPoint라는 함수명이 있다면 -> createCard 함수와 CreatePoint함수를 만들자... //function 은 object이다!! 10){ return; } //long upgrade logic } //first- class function //펑션은 변수에 할당될 수 있으며..

4. 코딩의 기본 operator, if, for loop

// 1. String concatenation console.log('my'+ 'cat'); //문자열과 문자열을 합쳐서 새로운문자열 console.log('1'+2); //숫자와 문자열을 합쳐서 숫자계산 console.log(`string literals : 1+2 = ${1+2}`); //2. Numeric operators console.log(1+1); //add console.log(1-1); //substract console.log(1/1); //divide console.log(1*1); //multiply console.log(5%2); //remainder console.log(2**3); //exponentiation; 0; i--){ //inline variable declarat..

3. 데이터타입 ,let vs var, hoisting

'use strict' // 2. variable // let (ES6에서 추가되었다.) let globalName = 'global name'; { let name = 'ellie'; console.log(name); name ="dellie"; console.log(name); } console.log(name); console.log(globalName); ​ { } 안에 있는 변수들은 block 변수 block 변수들은 block 밖에서 참조할 수 없음. ​ block 밖에 있는 변수들은 global 변수라고 하며 항상 메모리에 저장되어있기때문에 자제하는것이 좋음 ​ ​ var를 쓰면 안되는 이유. - Hoisting때문에 (Hoisting이란 어디에 변수를 선언했던간에 가장 상단에서 선언한것으로..