Frontend/모던자바스크립트 (23) 썸네일형 리스트형 동기와 비동기(callbac, promise, async) 동기와 비동기 자바스크립트는 원래 Synchronous동기이다. 예를들어 console.log(1) console.log(2) console.log(3) 이 코드를 실행시켜보면 호이스팅이후에 한번에 한줄로 순서대로 진행되어 1,2,3이 출력된다. setTimeout은 브라우저에서 제공되는 API로 브라우저에게 요청하며 몇초후에 콜백함수를 실행시킬수있다. 이외에도 ajax함수나 EventListener등이 콜백함수를 실행시키는데 콜백함수로 동기처리와 비동기처리Asynchronous둘다 가능하지만 보통 비동기처리하는데 주로 사용한다!!! 비동기의 필요성 예를들어 10초뒤에 데이터를 가져온다고하면 동기일경우 10초동안 아무것도못하고 로딩상태에 빠지게된다. 이를 비동기처리를 해주면 10초동안 대기실로 이동한뒤 .. Javascript class example What's the purpose of using Javascript Classes? Classes are used to create and manage multiple Objects Old Javascript class function 붕어빵(title, ingredients){ this.title = title, this.ingredients = ingredients } var 슈크림붕어빵 = new 붕어빵('슈크림붕어빵',['밀가루','물','슈크림','설탕']) Modern Javascript class class 모던붕어빵{ constructor(title, ingredients){ this.title = title, this.ingredients = ingredients } } let 피자붕어.. 배열함수 총정리 forEach(), Map(), filter() 등등 forEach() function solution(arr) { var answer = 0; var hap = 0 // for(let i = 0; i{ hap += number }) answer = hap/arr.length return answer; } for문과 forEach()의 차이점 위의 함수는 평균값을 return하는 함수이다. forEach는 배열안의 개별값들을 순환한다. 즉 for문의 arr[i]와 forEach의 number는 같은 의미이다. 참고로 forEach()는 element, index, array를 파라미터값으로 받기때문에 index를 추출할수있다. 객체를 forEach로 돌리려면 키값을 활용하면된다. let arr = [1,3] arr.forEach((number,i)=>{ c.. 자료구조와 자료형 Object.keys, values, entries https://ko.javascript.info/keys-values-entries Object.keys, values, entries ko.javascript.info 객체와 배열 구조분해할당(destructuring) 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 구조 분해 할당 - JavaScript | MDN 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. developer.mozilla.org 객체의 구조분해할당 예시 var obj = {p:42, q:true} var {p, q} = obj console.log(p) //42 console.log(q) //true 배열의 구조분해할당 .. 객체의 모든것 1. 리터럴과 프로퍼티 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 - {}를 이용해 객체를 선언하는것을 객체 리터럴이라고한다. - 객체안에 키:값쌍으로 구성된 프로퍼티가 들어간다. - 키엔 문자형 값에는 모든 자료형 오케이 let user = { // 객체 //프로퍼티1 name: "John", // 키: "name", 값: "John" //프로퍼티2 age: 30 // 키: "age", 값: 30 }; - 프로퍼티의 추가, 삭제, 수정 - 계산된 프로퍼티 : 객체 리터럴안에 프로퍼티 키가 []로 되어있음 let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple"); let bag = { [frui.. 배열, 배열 반복문 https://ko.javascript.info/array 배열 ko.javascript.info 객체 vs 배열 둘다 자료구조이고 키를 사용해 식별할수 있는 값을 담은 컬렉션은 객체로 저장, 만약 순서가 있는 컬렉션이 필요할때는 배열로 저장해야함, 배열은 새로운 프로퍼티를 기존 프로퍼티 사이에 끼워넣는 것도 가능 빈 배열 선언 //방법1 let arr = new Array(); //방법2 let arr = []; 방법 2를 주로 쓴다고한다. 이때 대괄호 안에 초기요소를 넣어주는것도 가능하다. let fruits = ['apple', 'orange', 'mango'] 배열내 순서를 통해 요소 수정과 새로운 요소 추가가 가능. alert(fruits[0])//apple fruits[1] = 'pear' f.. 이전 1 2 3 다음
