공부/JavaScript9 ECMA6 Promise ** Promise ** => 지연함수 와 비동기 연산을 제어할 수 있도록 해주는 객체 => JavaScript 에서 코드가 순차적으로 일어나는 처리를 동기처리, 특정 코드가 처리될때 까지 기다리지않고 다음코드를 먼저 처리하는것을 걸 비동기처리 라고함. 이러한 비동기처리에서 콜백지옥(Callback Hell) 등의 문제를 해소하기 위해 사용하는 객체, 즉 비동기 처리에서 순차적 처리를 행하기 위해 사용되는 객체가 프로미스(Promise)이다. => Promise 의 처리 상태 3가지 - Pending(대기): Promise 객체를 생성하고, 처리성공 또는 처리실패 이전까지의 미완료 상태 - Fulfilled(이행): 처리가 성공적으로 이루어져 Promise 결과 값을 return 해준 상태 위의 콜백함수.. 2022. 7. 1. ECMA6 / JS Symbol 심볼이란? 객체의 내장 속성과의 충돌을 피하기 위해 새로 추가된 Type. ES6가 발표되기 이전 기존 JS의 모든 값은다음 6개중의 하나다. Undefined, Null, Boolean, Number, String, Object ES6에서 새로 추가된 Type으로 객체의 속성으로 사용되며, 객체에 속성으로 추가시 내장속성과의 충돌을 피하게 해준다. 심볼로 추가한 속성은 for ~ in 에서 표시되지않으며, 배열에 속성이 필요한 경우 순차처리에 영향을 주지않고 속성을 추가할수 있도록 해준다. 심볼의 형태 Symbol(): Symbol 값을 생성하며 스코프 안에서 사용한다. Symbol.for(): 글로벌 Symbol registry에 저장되며 전체 프로그램에서 사용한다. Well-Known Symbol:.. 2022. 6. 10. ECMA/JS Generator 제너레이터 란? ES6에서 도입된 제너레이터(Generator) 함수는 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블을 구현할 수 있다. 또한 제너레이터 함수는 비동기 처리에 유용하게 사용된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 ** 제.. 2022. 6. 10. 타입배열(Typed Array) TypedArray 객체 유형 크기 (바이트) 설명 Web IDL 형 해당 C 형 Int8Array 1 8비트 2의 보수 형식 부호 있는 정수 byte int8_t Uint8Array 1 8비트 부호 없는 정수 octet uint8_t Uint8ClampedArray 1 8비트 부호 없는 정수 (단속됨) octet uint8_t Int16Array 2 16비트 2의 보수 형식 부호 있는 정수 short int16_t Uint16Array 2 16비트 부호 없는 정수 unsigned short uint16_t Int32Array 4 32비트 2의 보수 형식 부호 있는 정수 long int32_t Uint32Array 4 32비트 부호 없는 정수 unsigned long uint32_t Float32Arra.. 2022. 6. 10. 이터러블 규약/ 이터레이터 규약. 전체 개요 Symbol.iterator를 프로퍼티 키로 사용하여 메서드를 직접 구현하거나, Method 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터러블 이란 ? 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. Symbol.iterator를 프로퍼티 키로 사용하여 메서드를 직접 구현하거나, Method 체인을 통해 상속받은 객체이다. 이터레이터 란? 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next메소드를 갖는다. 왜 이터레이션 프로토콜이 필요한가? 다양한 데이터 공급자가 하나의 순회방식.. 2022. 6. 10. Variable 선언과 적용범위 ** Variable 선언과 적용범위 *** 1. 선언 1.1) 변수 => var : 재선언가능, 재할당가능 => let : 재선언불가능, 재할당가능 1.2) 상수 => const : 재선언불가능, 재할당불가능 1.3) 묵시적 정의 ( var, let, const 없이 정의 ) => 전역변수의 경우 => 차이점 delete 가 적용됨 (변수와 값이 메모리에서 삭제됨) 명시적 선언시에는 delete가 적용되지않고, 변수와 값이 메모리에 보존됨 1.4) delete => 변수의 정의를 취소함 => var, let, const 로 정의한 변수에는 적용되지 않고, 정의없이(묵시적으로) 사용한 변수에만 적용됨. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 .. 2022. 6. 6. JavaScript로 계산기 작성하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 ** 내장함수 eval 을 이용한 계산기 ** button{ width: 50px; } ** 내장함수 eval 을 이용한 계산기 ** => eval : 문자열(3+5*2)을 수식으로 바꾸어서 계산을 해줌 => eval (3+5*2) -> 연산결과 13 제공 * display : 7 .. 2022. 5. 13. JavaScript 기본 문법 사용자의 prompt 입력값에 따른 조건문 출력 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const age = parseInt(prompt("How old are you?")) if(isNaN(age) || age Css selector (lalala 라는 클래스 안에 존재하는 h2) // QuerySelector 를 자주사용하는 이유? // =>ById, ByClassName, TagName, .. 등은 배열로서 가져옴 // =>QuerySelector 는 Elements를 가져오고 중복일 경우 첫 번째 태그에 대한 Element 만 출력 const title = document.getElementById(hello) const title = document.querySelector(.. 2022. 5. 7. JavaScript용어정리 버블링 버블링(bubbling)의 원리는 간단합니다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 호이스팅 JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. 선언만 호이스팅 대상 JavaScript는 초기화를 제외한 선언만 호이스팅합니다. 변수를 먼저 사용하고 그 후에 선언 및 초기화가.. 2022. 5. 7. 이전 1 다음