DalpangLOG

제너레이터 : 일반 함수가 하나의 값을 반환하는 것과 다르게 여러 개의 값을 필요에 따라 하나씩 반환(yield)할 수 있다. 제너레이터와 이터러블 객체를 함께 사용해 데이터 스트림 만들기 가능. 제너레이터 함수 : function* function* generateSequence() { yield 1; yield 2; return 3; } 제너레이터와 이터러블 : 제너레이터는 이터러블이므로 for..of반복문을 사용해 값을 얻을 수 있다. function* generateSequence() { yield 1; yield 2; yield 3; } let sequence = [0, ...generateSequence()]; alert(sequence); // 0, 1, 2, 3 이터러블 대신 제너레이터 사..

개발공부/개발공부 2023. 1. 2. 16:37

11.8 Async와 Await async 함수 function앞에 async 키워드를 붙여 사용. async function f() { return 1; } *** function앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스 아닌값을 반환해도, 자동으로 resolved promise 형태를 만들어 감싸준다(wrap). await async함수 안에서만 동작하는 키워드. // await는 async 함수 안에서만 동작합니다. let value = await promise; 자바스크립트는 await키워드를 만나면 프라미스가 처리될 때까지 기다리고, 그 이후에 결과를 반환. example) async function f() { let promise = new Promise((res..

개발공부/개발공부 2023. 1. 2. 15:46

[ 프라미스 API ] Promise 클래스의 5가지 정적 메서드, 이중 Promise.all을 가장 많이 사용한다. Promise.all : 여러 프라미스가 모두 준비될 때까지 기다릴 때 사용. '모 아니면 도' 형식. let promise = Promise.all([...promises...]); //---사용예--- Promise.all([ new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1 new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2 new Promise(resolve => setTimeout(() => resolve(3), 1000)) // 3 ]).then(a..

개발공부/개발공부 2023. 1. 2. 15:16

CallBack function loadScript(src) { // 태그를 만들고 페이지에 태그를 추가합니다. // 태그가 페이지에 추가되면 src에 있는 스크립트를 로딩하고 실행합니다. let script = document.createElement('script'); script.src = src; document.head.append(script); } // 해당 경로에 위치한 스크립트를 불러오고 실행함 loadScript('/my/script.js'); // loadScript 아래의 코드는 // 스크립트 로딩이 끝날 때까지 기다리지 않습니다. // ... 문제점? js 로딩이 완료 되지 않았을 때, js파일 내에 작성된 함수를 호출할 경우 에러가 발생. loadScript('/my/script..

개발공부/개발공부 2023. 1. 2. 14:37

'try..catch'와 에러 핸들링 에러가 일어났을 때 스크립트가 중단되는 것을 막기 위해, 에러를 잡는 기능을 하는 try...catch문을 사용하면 try...catch문 안에서 에러가 처리되어 스크립트가 중지되지 않음! 단, try...catch문은 런타임 에러에만 동작! (유효한 자바스크립트 코드에만 실행된다는 의미. 만약 문법적 문제가 있는 경우엔 try...catch문이 동작되지 않는다.) 기본 문법 try { // 코드... } catch (err) { // 에러 핸들링 } 타이머를 사용하는 scheduled코드에서 발생한 예외는, 코드가 try...catch를 떠난 후에 실행되므로 확인불가. 스케줄 된 함수 내부의 예외를 잡기 위해서는, 스케줄 된 함수 내부에 try...catch를 구현..

개발공부/개발공부 2023. 1. 1. 22:35

클래스와 기본 문법 기본 문법 class MyClass { // 여러 메서드를 정의할 수 있음 constructor() { ... } method1() { ... } method2() { ... } method3() { ... } ... } -> 위와 같이 클래스 생성 후, new MyClass()를 호출하면 내부에서 정의된 메서드가 들어있는 객체 생성됨. new에 의해 내부 constructor() 자동 호출, 자동으로 객체 초기화 가능. 클래스란? 자바스크립트에서는 클래스가 함수의 한 종류. 순수 함수로 클래스 역할을 하는 함수를 선언하는 방법과 class 키워드를 사용하는 방법의 결과는 거의 같다. 차이점 1) class로 만든 함수엔 [[ IsClassConstructor ]]: true 프로퍼티..

개발공부/개발공부 2022. 12. 30. 21:18

프로토타입 상속 - 자바스크립트의 모든 객체엔 숨김 프로퍼티인 [[Prototype]]이 있고, 이 프로퍼티는 객체나 null을 가리킨다. - obj.__proto__ 를 사용하면 프로토타입에 접근 가능. (요즘엔 __proto__ 대신, Object.getPrototypeOf나, Object.setPrototypeOf를 써서 프로토타입을 get or set 한다. - [[Prototype]]은 prototype이라는 객체를 참조한다. - 객체에서 프로퍼티를 읽거나 메서드 호출 시, 해당 객체 내에 읽으려는 프로퍼티나 메서드가 없으면 자바스크립트는 자동으로 프로토타입에서 해당 프로퍼티나 메서드를 찾는다. - 프로토타입 내에 getter, setter가 없는 경우, 쓰기나 지우기 관련 연산은 객체에 직접 ..

개발공부/개발공부 2022. 12. 30. 11:19

프로퍼티 플래그와 설명자. 객체에 설정할 수 있는 프로퍼티. 객체 프로퍼티는 플래그라는 특별한 속성 세 가지를 갖는다. 1) writable - true이면 값 수정 가능. 2) enumerable -true면 반복문 사용해 나열 가능. 3) configurable - true이면 프로퍼티 삭제나 플래그 수정 가능. Object.getOwnPropertyDescriptor 메서드를 사용해 특정 프로퍼티에 대한 정보를 모두 얻기 가능. let user = { name: "John" }; let descriptor = Object.getOwnPropertyDescriptor(user, 'name'); alert( JSON.stringify(descriptor, null, 2 ) ); /* property d..

개발공부/개발공부 2022. 12. 30. 11:00

객체로서의 함수와 기명 함수 표현식 함수 객체에 내장된 프로퍼티 - name : 함수 이름 리턴. - length : 함수 매개변수의 개수 반환 프로퍼티는 변수가 아님. 커스텀 프로퍼티. => 함수에 자체적으로 만든 프로퍼티를 추가할 수 있음. js 라이브러리인 jQuery는 $라는 주요 함수로 이뤄져 있다. 여기에 헬퍼 함수를 붙여 사용. 기명 함수 표현식(Named Function Expression, NFE) => 이름이 있는 함수 표현식. 1) 이름(func)을 사용해 함수 표현식 내부에서 자기 자신을 참조할 수 있다. 2) 함수 외부에선 그 이름 사용 불가. let sayHi = function func(who) { if (who) { alert(`Hello, ${who}`); } else { ..

개발공부/개발공부 2022. 12. 29. 18:32

재귀와 스택 재귀 함수 : 자기 자신을 호출하여 실행하는 함수. function pow(x, n) { return (n == 1) ? x : (x * pow(x, n - 1)); } 사용 예) let company = { // 동일한 객체(간결성을 위해 약간 압축함) sales: [{name: 'John', salary: 1000}, {name: 'Alice', salary: 1600 }], development: { sites: [{name: 'Peter', salary: 2000}, {name: 'Alex', salary: 1800 }], internals: [{name: 'Jack', salary: 1300}] } }; // 급여 합계를 구해주는 함수 function sumSalaries(depar..

개발공부/개발공부 2022. 12. 29. 10:46

원시값의 메서드 자바스크립트에서는 원시값(문자열, 숫자 등)을 객체처럼 다룰 수 있다. 원시형의 종류:  문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 객체 : 프로퍼티에 다양한 종류의 값 저장 가능. {} 대괄호를 사용해 만들 수 있음. 함수도 객체의 일종. 원시값을 객체처럼 사용하기. Object Wrapper : String, Number, Boolean, Symbol, etc.ex) str.toUpperCase()new 를 붙여서 생성자처럼 사용하지 않길 추천. 형변환을 위해 다음과 같이 사용하는 것 추천. let num = Number("123"); // 문자열을 숫자로 바꿔줌 Null, undefined에 대..

개발공부/개발공부 2022. 12. 28. 17:52

옵셔널 체이닝 '?.' - '?.' 옵셔널 체이닝은 '?.' 앞의 평가 대상이 undefined나 null이면 평가를 멈추고, undefined를 반환한다. let user = {}; // 주소 정보가 없는 사용자 alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다. ?.는 존재하지 않아도 괜찮은 대상에만 사용 만약 '?.'앞에 오는 값이 null이나 undefined가 아닌 경우, 반드시 해당 프로퍼티가 존재해야만 에러가 나지 않음. 단락평가 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춥니다. let user = null; let x = 0; user?.sayHi(x++); // 아무 일도 일어나지 않습니다. alert(x); // 0, x는 증가..

개발공부/개발공부 2022. 12. 27. 15:40

객체 생성방법 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 상수 객체 수정 가능 const user = { name: "John" }; user.name = "Pete"; // (*) alert(user.name); // Pete 대괄호 표기법 let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"]; 계산된 프로퍼티 let fruit = 'apple'; let bag = { [fruit + 'Computers']: 5 // bag.appleComput..

개발공부/개발공부 2022. 12. 27. 14:58

***다음 글의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다. JavaScript Fundamentals 3.3 ~ 3.6 3.3 주석 한 줄 주석 : // 여러 줄 주석 : /* ... */ 만약 이 함수가 무슨 역할을 하는지 주석을 많이 달아야 한다면, 함수를 리팩토링 하는게 나을 수도 있다. 리팩토링 : 함수 분리하기 함수 분리 전) function showPrimes(n) { nextPrime: for (let i = 2; i < n; i++) { // i가 소수인지를 확인함 for (let j = 2; j < i; j++) { if (i % j == 0) continue nextPrime; } alert(i); } } 분리 후) self-descriptive한 ..

개발공부/개발공부 2022. 12. 27. 13:40

***다음 글의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다. JavaScript Fundamentals 3.1 ~ 3.2 코드 품질 3.1 Chrome으로 디버깅하기 chrome -> F12 (MacOS : Cmd + Opt + I) : 개발자 도구. Source 패널 열기. 1. 파일 탐색 영역 : 페이지 리소스 2. 코드 에디터 영역 : 선택한 파일의 소스코드 보여줌. 소스 코드 편집 가능. 3. 자바스크립트 디버깅 영역 : 디버깅 관련 기능 제공. 중단점 javascript 파일을 2번 코드 에디터 영역에 띄우고 왼쪽에 있는 숫자 부분을 클릭하면 breakpoint 지정이 가능하다. 중단점(breakpoint)은 자바 스크립트의 실행이 중단되는 지점을 의미하는데,..

개발공부/개발공부 2022. 12. 23. 12:28

***다음 글의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다. JavaScript Fundamentals 2.16 ~ 2.18 2.16 함수 표현식 선언문 방식(Function Declaration) function sayHi() { alert( "Hello" ); } 함수 표현식(Function Expression) let sayHi = function() { alert( "Hello" ); }; 위 두 개의 함수 선언 방식 모두 동일한 역할을 한다. 콜백 함수 함수 매개변수로 다른 함수를 부를 때, 매개변수로 사용된 함수를 콜백 함수 또는콜백이라고 한다. function ask(question, yes, no) { if (confirm(question)) yes() ..

개발공부/개발공부 2022. 12. 22. 15:01