FRONTEND/JavaScript 30

(callback) - 비동기적인 것을 제어하는 방법

callback함수 function printNow(print){ print(); } 라는 함수가 있다고 하자, 여기에서 print라는 파라미터는 printNow함수의 콜백함수가 되게 된다. 우리는 보통 callback함수를 비동기적이라고 말을 하지만, 모든 callback함수가 비동기적인것은 아니다. 만약에 printNow(() => console.log("Hi! syncrnous callback function"))이라고 하게 된다면, printNow의 연결인자로 들어온 익명함수는 콜백함수는 맞지만, 동기적인 함수가 되게 된다. 하지만 만약, printNow(setTimeout(() => console.log("it is asynchronous"), 1000 )) 이라고 하게 된다면, 해당 함수는 비..

FRONTEND/JavaScript 2021.05.31

asynchronous function

오늘은 학습에 어려움을 많이 겪었던 비동기적 함수에 대해 정리를 해보려고 한다. 우선, asynchronous라는 것은, "비동기적"이라는 뜻이다. 비동기적이라는 것은 무엇일까? -> 비동기적이라는 것은 '동기적이지 않다.' 라는 뜻이다. -> 그렇다면, 동기적이라는 것은 무엇인가? 우리가 쉽게 생각할 수있는 callstack을 생각하면 된다. 순서를 기억하고, 그 순서에 따라 실행하는 것을 의미한다. -> 그렇게 생각해본다면, 비동기적이라는 것은 호출된 순서에 상관없이, 여러 녀석들의 작업을 진행하고, 빨리 종료된 녀석들 부터, 출력되는 것을 의미한다는 것을 알 수있다. 이는 eventloop라는 개념을 통해 접근 하면 보다 이해하기 쉽다. 그러므로 여기서 잠시 eventloop라는 개념을 짚고 넘어가..

FRONTEND/JavaScript 2021.05.20

순열로 모든 경우의수 배열로 정리하기

오늘은 코플릿 toy문제를 풀다가 막혔던 부분이 풀린 기념으로 포스팅을 작성해보려고 한다. 이 문제를 풀면서, slice를 제대로 쓰는법과 스프레드 문법에 조금 더 익숙해 진것 같아 뿌듯하다.(하지만 코플릿 문제가 시행시간초과로 안풀렸다는건 안비밀ㅋㅋㅋ) 내가 막혔던 부분은 숫자 n을 입력 받았을때, 순열로 n의 모든경우의 수를 배열로 정리하고 싶었다. 즉, 3을 입력 받았을때 => [1, 2, 3], [1, 3, 2], ..., [3, 2, 1]와 같이 말이다. 여기서 재귀함수를 사용하게 되는데, 이는 계속 반복되는 작업이기 때문이다. 예를 들어, 4를 고정, 나머지 3개의 모든 경우의수 3를 고정, 나머지 3개의 모든 경우의수 2를 고정, 나머지 3개의 모든 경우의수 1를 고정, 나머지 3개의 모든 ..

FRONTEND/JavaScript 2021.05.19

배열, 객체 풀어서 합치기(... spread문법, assign메소드)

...spread문법 ✔️ 객체나 배열을 스프레드 문법을 사용하여 풀어서 붙이기 ☑️e.g const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; let result = {...target, ...source} 하게 되면 result는 {a: 1, b: 4, c: 5}가 되게 된다. let arr1 = [1, 2, 3, 4, 5] let arr2 = [6, 7, 8] let arrs = [...arr1, ...arr2]; 하게 되면 arrs = [1, 2, 3, 4, 5, 6, 7, 8]가 되게 된다. Object.assign() ✔️ Boolean값을 return ☑️ e.g const target = { a: 1, b: 2 }; const sou..

FRONTEND/JavaScript 2021.05.19

scope 활용하여 반복문 원하는 횟수만큼 실행시키기

for문에서 외부변수를 통해, 조건만족시점까지 반복시키기 ✔️for문 밖의 외부변수(count) 이용 ✔️ 숫자가 있는 배열에서, 순서대로 3개의 짝수만 새로운배열에 넣어 return 하는 함수 만들기 ✔️ for문 밖의 외부변수(count) 이용 ✔️ 0을 제외한 모든 숫자들은 truty하고, 0은 falthy하다는점 알고 있기. let arr = [1, 2, 3, 4, 5, 6, 7, 8] const collectEven = function(arr) { let count = 3; let result = []; for(let i =0; i

FRONTEND/JavaScript 2021.05.19

Array.some(), Array.every()

some() ✔️ Boolean값을 return ☑️ 배열안의 요소가 단 하나라도 참이라면 return true ☑️ 배열안의 요소가 모두 다 거짓일때에만 return false every() ✔️ Boolean값을 return ☑️ 배열안의 요소가 단 모두 다 참일때에만 return true ☑️ 배열안의 요소가 하나라도 거짓이라면 return false 💡e.g. const array = [1, 2, 3, 4, 5]; let result1= array.some(el => el%2 === 0) result = true; let result2= array.every(el => el%2 === 0) result = false;

FRONTEND/JavaScript 2021.05.19

forEach()의 사용 그리고 map()과의 차이

Array.forEach()에 대하여 forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void ❗️forEach는 배열을 순회하며, 해당배열의 각 요소들에 대해서 인자로 받은 콜백함수를 실행한다. ❗️forEach문은 for문 대신 사용은 가능하나, for문처럼 break하는 것이 불가능하다. ❗️callback함수는 총 3개의 인자를 받는다, (배열의 요소값, index, this) ❗️단, return 값이 undefined(void)이다. 그러므로, const array1 = [1, 2, 3, 4]; let result = array1.forEach(el => el*2); 를 하게 되면 마치 resu..

FRONTEND/JavaScript 2021.05.19

parseInt()

parseInt() 간단하게 정리하기 parseInt(string, radix)는 radix의진수로 적힌 string을 정수로 반환한다. 말이 약간 어렵게 느껴질수 있지만, 아래 예를 보자. e.g. parseInt(1011, 2)라고 하게 된다면, 11이라는 숫자가 나오게 되는데, 이는 2진법으로 적혀져 있는 1011이라는 수를 10진법으로 나타낸 결과라고 할 수 있다. 이렇게 진법을 이용해 parseInt를 이용하는 방법도 있지만, parseInt()는 그 결과를 '정수' 로 반환한다는 점에 착안한다면, 이를 버림을 하는 용도로도 사용할 수 있다. 즉, parseInt(11.098838) 이라고 한다면, 11이라는 숫자가 나오게 되는데, 이는 11.098838이라는 숫자중 소수부분인 0.98838을 ..

FRONTEND/JavaScript 2021.05.19