개발나라 스용공주

이번 글은 비동기 작업에서 사용되는 promise, then, catch에 대한 글이다.비동기 작업에 대한 설명글은 아래 링크를 참고하면 된다.https://hwangseoyoung.tistory.com/197 [JavaScript] 비동기 작업 - setTimeout(), 콜백함수이번 글은 비동기 함수의 작동원리와 비동기 작업 시 사용되는 setTimeout()과 콜백함수에 대한 글이다.   [ 동기와 비동기 ]동기는 여러 작업을 순서대로 한번에 하나씩 처리하는 것이고 JavaScripthwangseoyoung.tistory.com  [ 객체 promise ]promise는 객체로 비동기 작업을 효율적으로 처리하도록 도와주는 JS의 내장 객체이다.비동기 작업의 성공하거나 실패한 결과값을 이용할 수 있다..

이번 글은 비동기 함수의 작동원리와 비동기 작업 시 사용되는 setTimeout()과 콜백함수에 대한 글이다.   [ 동기와 비동기 ]동기는 여러 작업을 순서대로 한번에 하나씩 처리하는 것이고 JavaScript의 일반적인 실행 구조이다.비동기는 여러개의 작업이 주어졌을 때 앞선 작업이 종료되지 않아도 기다릴 필요 없이 다른 작업을 실행하는 것으로 setTimeout()등의 내장함수를 통해 실행할 수 있다.    [ setTimeout함수 ]비동기 구조로 실행하는 역할을 하는 setTimeout()은 인수로 받은 시간만큼 대기 한 후 콜백함수를 실행하는 형태이다.코드를 일정 시간 이후 비동기적으로 실행하는 역할을 한다.setTimeout(콜백함수, 시간) 아래 코드와 코드의 실행결과를 보면 setTime..

이번 글은 배열과 객체 안의 값을 순회하는 여러가지 방법에 대한 글이다   [ 배열 순회 ]아래 코드와 같이 배열이 있을 경우 각각의 값에 하나하나 도달하는 배열의 순회 방법 2가지를 알아볼 것이다.let arr = [1, 2, 3]; 방법 1) for문for (let i = 0; i  방법 2) for of - 배열에서만 사용가능한 반복문for (let item of arr) { console.log(item);}    [ 객체 순회 ]아래 코드와 같이 객체가 있을 때 객체의 키와 값에 하나하나 도달하는 방법 3가지를 알아볼 것이다.let person = { name: "황서영", age: 24,};  방법 1) Object.keys - 객체에서 key 값들만 뽑아 새로운 배열로 반환하는 ..

이번 글은 Spread와 Rest에 대한 글이다.   [ Spread 연산자 ]Spread는 객체나 배열에 저장된 여러 개의 값을 개별로 흩뿌려주는 역할을 한다.배열에서 사용하는 경우 형태는 아래 코드와 같이 배열명 앞에 ...을 붙여준다.그 후 출력되는 것을 보면 arr1과 arr2가 합쳐진 것을 확인할 수 있다.let arr1 = [1, 2, 3];let arr2 = [4, ...arr1, 5];console.log(arr2); 객체도 마찬가지로 객체명 앞에 ...을 붙여주는 형태이고 객체 obj1과 객체 obj2가 합쳐진 것을 확인할 수 있다.let obj1 = { a: 1, b: 2,};let obj2 = { ...obj1, C: 3,};console.log(obj2);    [ Rest ..

이번 글은 배열과 객체의 구조분해할당에 대한 글이다.   [ 배열의 구조분해할당 ]배열의 구조분해할당은 함수에 여러 개의 인수를 전달할 때 사용된다. 아래 예제의 형태라면 one에 1, two에 2, three에 3이 할당되는데 변수 four는 할당되는 값 없이 남게 된다.그럼 변수 four는 undefined로 출력된다.let arr = [1, 2, 3];let [one, two, three, four] = arr; 남는 변수는 이런식으로 기본 값을 설정해줄 수 있다.let [one, two, three, four=4] = arr;   [ 객체의 구조분해할당 ]객체의 구조분해할당이란 아래 예제와 같다.할당되지 않은 변수 extra는 undefined로 출력되는 것을 확인할 수 있다.name이라는 키 이..

이번 글은 단락 평가에 대한 글이다. [ 단락평가란? ]단락 평가란 조건문을 이용하지 않고도 어떠한 함수를 호출하지 않도록 방지해주거나 어떤 값을 계산하지 않도록 제한해주는 것이다.단락 평가의 구조는 첫번째 피연산자의 값만 이용해 연산의 결과를 확정할 수 있다면 두번째 피연산자에 접근하지 않는다.  [ &&(and)와 ||(or) ]단락 평가를 이해하기 위해선 논리연산자 &&(and)와 ||(or)를 먼저 이해해야한다. 1) &&(and)true와 true => truetrue와 fasle => falsefalse와 true => falsefalse와 false = > false2) ||(or)true와 true => truetrue와 false => truefalse와 true => truefalse와..

이번 글은 Truthy와 Falsy에 대한 글이다.  [ Falsy한 값 ]상황에 따라 꼭 bool형이 아니더라도 참과 거짓으로 판명되는 경우가 있다.거짓으로 판명되는 Falsy한 값은 다음과 같다.undefinednull0-0NaN""0n 아래 코드는 Falsy한 값의 예시로 조건문에서 거짓으로 판명된다.조건문은 f1이 거짓일 경우 해당 코드를 출력하는 코드이다.let f1 = undefined;if(!f1) { console.log("f1은 거짓입니다.");}      [ Truthy한 값 ]Truthy한 값은 위의 7가지 Falsy한 값을 제외한 나머지 모든 값으로 활용 예제는 아래와 같다.아래 코드를 보면 Truthy와 Falsy를 활용하면 직접 undefined이나 null 같은 조건을 달아주지..

이번 글은 콜백함수에 대한 글이다.  [ 콜백함수 ]콜백함수는 자신이 아닌 함수에 인수로써 전달된 함수다.콜백함수는 중복되는 코드를 발생시키지 않으면서 일부 코드만 수정하여 비슷한 여러 코드를 생성 가능하게 한다. 아래 코드를 보면 sub()는 지금 당장 실행되는 것이 아닌 main()에 인수로 전달이 되어 main이 실행하도록 하므로 sub()가 콜백함수에 해당하게 된다.콜백함수는 메인 함수가 원하는 타이밍에 실행할 수 있다.function main(value) { value();}function sub() { console.log("sub");}main(sub);     [ 콜백 함수 예제 ]아래 코드를 보면 콜백함수 기능을 이용한 부분을 확인할 수 있다.같은 repeat()을 호출하지만 안에 내부 ..