공부 || 정리
[JavaScript] 비동기 처리의 이해 - promise, async / await, promise.all, promise.race
[JavaScript] 비동기 처리의 이해 - promise, async / await, promise.all, promise.race
2021.03.15비동기 처리의 이해 - 동기적 (Synchronous) 작업이 끝날 때까지 기다린 후 다음 작업을 처리합니다. 다음 작업은 이전 작업이 끝날 때까지 멈추고 기다려야 합니다. - 비동기적 (Asynchronous) 작업의 흐름이 멈추는 일 없이 동시에 모든 작업을 처리할 수 있습니다. 기다리는 과정에서도 다른 함수를 호출할 수 있습니다. 간단하게 사진으로 비교해 보겠습니다. (벨로 퍼트님 강의에서 캡처했습니다.) 동기적인 코드 예시입니다. function work() { const start = Date.now(); for(let i=0; i { const start = Date.now(); for(let i=0; i {}, 0) 함수를 통해 비동기적으로 코드를 구현할 수 있습니다. setTimeout 함..
[JavaScript] scope, hoisting
[JavaScript] scope, hoisting
2021.03.09scope 이해하기 Scope란? 변수 혹은 함수를 선언하게 될 때, 해당 변수 혹은 함수가 어디까지 유효한 지 범위를 나타내는 개념입니다. scope의 범위에는 Global, function, block이 있습니다. Global은 모든 범위(전역)에서 사용 가능한 것을 의미합니다. Function은 특정 함수 내부에서만 사용 가능한 것을 의미합니다. Block은 if문, switch문, for문을 작성하게 될 때, 중괄호로 코드를 작성하게 되는데 중괄호로 감싸진 블록 내부에서만 사용 가능한 것을 의미합니다. scope는 자바스크립트의 문법이라기 보단 작동 원리라고 이해하는 것이 좋습니다. Global, function scope의 예입니다. const value = 'hello!'; // global ..
[JavaScript] spread, rest
[JavaScript] spread, rest
2021.03.08spread 연산자 기존의 객체 혹은 배열을 참조해서 새로운 객체 혹은 배열 등을 만들고 싶을 때 사용하는 연산자입니다. 또한, 함수의 인자에서도 사용가능합니다. const slime = { name : '슬라임' }; const cuteSlime = { ...slime, // slime 객체가 가지고 있는 정보를 다 가져옴 attribute: 'cute' }; const purpleCuteSlime = { ...cuteSlime, // cuteSlime 객체가 가지고 있는 정보를 다 가져옴 color: 'purple' }; const greenCuteSlime = { ...purpleCuteSlime, // 덮어쓰기도 가능하다. color: 'green' }; console.log(purpleCuteS..
[JavaScript] 함수의 기본 파라미터, 조건문 더 스마트하게 쓰기, 비구조화 할당
[JavaScript] 함수의 기본 파라미터, 조건문 더 스마트하게 쓰기, 비구조화 할당
2021.03.02함수의 기본 파라미터 함수를 호출할 때, 원래 넣어야 할 파라미터를 넣지 않게 됐을 경우, 기본 값으로 사용할 파라미터를 지정하는 것을 의미합니다. 아래 코드와 같은 경우에는 함수 호출 인자로 아무것도 넣어주지 않을 경우 오류를 발생하게 됩니다. function calculateCircleArea(r) { return Math.PI * r * r; } const area = calculateCircleArea(4); console.log(area); // 50.2654~~~~ 출력. // 만약 아무것도 넣어 주지 않으면 NaN을 출력한다. 아무것도 넣지 않으면, NaN을 출력하게 됩니다. 아무것도 넣지 않아도 실행되게끔 하고 싶으면 어떻게 해야 될까요? 바로 단축 평가 논리 계산법을 사용하면 됩니다. f..
[JavaScript] 삼항연산자, Truthy와 Falsy, 단축 평가 논리 계산법
[JavaScript] 삼항연산자, Truthy와 Falsy, 단축 평가 논리 계산법
2021.03.01삼항 연산자 condition ? true : false; 조건이 참이면 true를 반환하고, 거짓이면 false를 반환합니다. true 혹은 false 위치에 어떠한 값이 와도 무방합니다. 결과에 따라 해당 값을 반환합니다. const array = []; let text = array.length === 0 ? '배열이 비어있습니다.' : '배열이 비어있지 않습니다.'; console.log(text); // '배열이 비어있습니다.'출력. 현재 array 배열의 길이가 0인 것이 true 이므로 true의 값인 '배열이 비었습니다.'가 출력됩니다. 만약 array 배열의 길이가 0이 아니라면 조건의 결과가 false 이므로 '배열이 비어있지 않습니다.'가 출력될 것입니다. const condition..
[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(4) JavaScript - 객체 안에 함수 넣기, 프로토타입과 ES6클래스
[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(4) JavaScript - 객체 안에 함수 넣기, 프로토타입과 ES6클래스
2021.02.24수강한 클립명 (1) 14. 객체 - 객체 안에 함수 넣기 (2) 30. 프로토타입과 클래스 - 객체 생성자 (3) 32. 프로토타입과 클래스 - ES6 Class 객체 안에 함수 넣기 아래 예제 코드에 대해 간단 설명 하겠습니다. 먼저 say : function say() 함수 안에 있는 this는 객체 안의 자기 자신을 가리킵니다. 즉 아래 코드에서의 this는 dog 객체 자기 자신을 가리키게 됩니다. this.sound는 dog.sound와 같습니다. say : function() 함수는 위의 say : function say() 와 같은 역할을 합니다. 좀 더 간결하게 사용할 수 있다는 것만 알아두시면 됩니다. say() 함수도 마찬가지입니다. 똑같이 동작하지만, 이렇게 더 간결하게 사용할 수 ..
[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(3) JavaScript - 배열 내장함수 shift, pop, push, unshift, reduce
[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(3) JavaScript - 배열 내장함수 shift, pop, push, unshift, reduce
2021.02.23수강한 클립명 (1) 26. 배열 내장 함수 - shift, pop, unshift, push (2) 27. 배열 내장 함수 - reduce (3) 28. 배열 내장 함수 - reduce 다른 예시 shift, pop, unshift, push - shift() 첫 번째 원소를 배열에서 추출합니다. shift()는 기존의 배열을 수정합니다. 즉, 맨 앞의 원소를 바닥날때까지 하나씩 추출합니다. 다 추출했으면 빈 배열을 반환합니다. - unshift() 특정 원소를 첫 번째 인덱스 배열[0]에 추가합니다. unshift()는 기존의 배열을 수정합니다. - pop() 마지막 원소를 배열에서 추출합니다. pop()은 기존의 배열을 수정합니다. 즉, 맨 뒤의 원소를 바닥날때까지 하나씩 추출합니다. 다 추출했으면..
[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(2) JavaScript - 배열 내장함수 forEach, map, filter 등등
[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(2) JavaScript - 배열 내장함수 forEach, map, filter 등등
2021.02.19수강한 클립명 && 수강 인증샷 (1) 22. 배열 내장 함수 - forEach (2) 23. 배열 내장 함수 - map (3) 24. 배열 내장 함수 - filter forEach - 배열 안의 원소들을 가지고 어떤 작업을 일괄적으로 하고 싶을 때 사용합니다. - 즉, 모든 배열 안의 원소에 접근하고 싶을 때 사용합니다. const superHeroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; superHeroes.forEach(hero => { console.log(hero); }); // 아이언맨, 캡틴 아메리카, 토르, 닥터 스트레인지 출력. 보시다시피 forEach는 forans과 마찬가지인 반복적인 기능을 수행할 때 사용합니다. 하지만 for문처럼 초기식, 조건..
[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(1) JavaScript - Getter/Setter, 배열, for..of/in
[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(1) JavaScript - Getter/Setter, 배열, for..of/in
2021.02.18수강한 클립명 && 수강 인증샷 (1) 15. 객체 - Getter와 Setter 함수 (2) 16. 배열 (3) 19. 반복문 - for...of, for...in Getter 와 Setter 함수 getter : 특정 값을 조회하고자 할 때 사용합니다. setter :특정 값을 설정하고자 할 때 사용합니다. 코드 예시. const numbers { // (1) 명칭 중복 방지를 위해 _사용. _a: 1, _b: 2, sum: 3, calculate() { console.log('calculate 실행'); this.sum = this._a + this._b; }, get a() { return this._a; }, get b() { return this._b; } set a(value) { this...