작심삼일

Promise를 사용하는 이유 및 방법에 대해서 알아보기 위해 아래 예제를 따라 하면 된다. promise를 사용하지 않았을 때를 먼저 확인해보고 필요성을 알아가 보자. 1. Promise 사용하지 않는 방법 소스 코드 function isPositive(number, resolve, reject) { setTimeout(() => { if (typeof number === "number") { //성공 resolve resolve(number >= 0 ? "양수" : "음수"); } else { //실패 reject reject("주어진 값이 숫자형 값이 아닙니다."); } }, 2000); } isPositive( "10", (res) => { console.log("성공적으로 수행됨 : ", res..

동기적으로 작업을 하면 하나의 task가 오랬동안 시간이 소요되면, 다른 작업들이 진행 못하고 대기하게 된다. 모든 작업들을 동시에 작업하기 위해서는 멀티 스레드로 작업하면 소요 시간을 줄일 수 있지만 자바스크립트에서는 쓰레들가 단일 쓰레드 이다. 그래서 비동기 작업이 필요하다. 동기 방식은 다른 task를 진행하지 못하게 블로킹하고 있기 때문에 비동기 작업을 하면 하나의 작업을 할때 다른 작업을 블로킹 하지 않는다. 1. 동기 방식 지금까지 소스코드를 짜던 방식은 동기 방식으로 작성했었다. 소스 코드 function taskA() { console.log("A 작업 끝"); } taskA(); console.log("코드 끝"); 결과 A 작업 끝 코드 끝 "A 작업 끝"로그가 찍히고 난 뒤에 "코드 ..

1. 객체에서 Spread 연산자 사용 소스 코드 const cookie = { base: "cookie", madeIn: "Korea" }; const chocoCookie = { ...cookie, toping: "choco" }; console.log(chocoCookie); 결과 객체를 생성할 때 자주 반복되는 프로퍼티를 직접 입력하지 않고, ...객체명 을 사용해서 손쉽게 복제?할 수 있다. 2. 배열에서 Spread 연산자 사용 소스 코드 const arrA = ["가", "나"]; const arrB = ["다", "라"]; const arrC = [...arrA, ...arrB]; console.log(arrC); 결과 배열에서도 배열명 앞에 ...을 입력해서 사용할 수 있다.

자바스크립트에서 사용되는 Truthy, Falsy를 알아보고 어떤 상황에서 사용되는지 예제를 통해 확인해보자. 먼저, 예제를 따라 하기 전에 메서드 하나를 만든다. 소스 코드 function trueCheck(input) { if (input) { console.log("TRUE"); } else { console.log("FALSE"); } } 인풋에 무언가를 넣었을때, True인지 False인지 구분하기 위한 메서드다. 1. True로 판정되는 Truthy 소스 코드 let truthy1 = "string"; let truthy2 = Infinity; let truthy3 = "0"; let truthy4 = 13; let truthy5 = []; trueCheck(truthy1); trueCheck..

자바스크립트에서의 배열 내장함수 예제를 통해 배워보도록 하자. 배열 내장함수 예제 목차 1. foreach 2. map : 새로운 배열에 옮기는 방법 3. includes, indexOf : 숫자 배열에 숫자 찾는 방법 4. findIndex, find : 객체 배열에 객체 찾는 방법 5. filter : 객체 배열에 필요한 내용 필터하기 6. slice : 배열 자르기 7. concat : 배열 합치기 8. sort 사용방법 9. join 1. foreach 소스 코드 const arr = [1, 2, 3, 4]; for (let i = 0; i console.log(elm * 2)); // 콜백함수 arr.forEach(function (elm) { console.log(elm * 2); }); 결과..

자바스크립트에서도 객체가 존재한다. 객체를 어떻게 생성하고 사용하는지 알아보도록 하자. 1. 객체 생성 소스 코드 // 생성자 방식 let personA = new Object(); // 리터럴 방식 let personB = {}; 생성 방식은 생성자 방식, 리터럴 방식 2가지가 있다. 리터럴 방식이 더 쉽고 많이 사용된다. 2. 객체의 Property 객체에서 변수로 사용되는 것을 Property라고 한다. Property를 만드는 법과 출력하는 방법을 알아보자. print 결과 let personD = { name: "JY", age: 28 }; personD라는 객체를 생성했다. 해당 객체의 name, age에 관한 property까지 작성했다. property를 출력하는 방법은 다양하다. 소스 코..

혹시 함수에 대해서 명확하게 모른다면, 함수 부분을 먼저 보고 오자. https://shoney.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8-%EB%AC%B4%EB%AA%85-%ED%95%A8%EC%88%98-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EA%B8%B0%EB%B3%B8%EC%98%88%EC%A0%9C [자바스크립트] 함수 선언, 무명 함수, 화살표 함수 사용법 및 기본예제 함수 사용 이유 프로그래밍을 하다보면 중복되는 기능들을 묶..

함수 사용 이유 프로그래밍을 하다보면 중복되는 기능들을 묶어서 사용하고 싶다. 그런 경우 함수를 사용하면 쉽게 구현할 수 있다. 아래의 소스코드를 보면, 면적을 구하기 위해서 width와 height를 계속 곱하는 부분이 반복된다. 소스 코드 //함수가 필요한 이유 let width1 = 10; let height1 = 20; let area1 = width1 * height1; console.log(area1); let width2 = 13; let height2 = 21; let area2 = width2 * height2; console.log(area2); 결과 200 273 반복되는 부분들을 계속 타이핑할 순 없으니, 함수를 이용하도록 하자. 1. 함수 선언식 위에서 면적을 구하는 부분들을 함수..

조건문 중에 if문과 switch 문 예제를 따라 해 보자. 다른 언어와 차이가 없으므로 입문자가 아니면 쉽게 따라 할 수 있다. 1. if문 소스 코드 //if 조건문 let a = 3; if (a >= 5) { console.log("5이상"); } else if (a >= 3) { console.log("3이상"); } else { console.log("3미만"); } 결과 3이상 많이 사용하는 조건문 중에 if 문이다. if문이 많이 중첩되고 복잡해진다면, 유지 보수하는 인원들이 고생을 하게 된다. 너무 복잡해지는 조건은 피하는 것이 좋고 모든 사람이 쉽게 알아보도록 작성하는 게 중요한 것 같다. 2. switch문 소스 코드 //switch 조건문 let country = "ko"; switc..

자바 스크립트의 연산자를 알아보자. 자바스크립트 연산자 종류 1. 대입 연산자 2. 산술 연산자 3. 복합 연산자 4. 증감 연산자 (전위, 후위) 5. 논리 연산자 6. 비교 연산자 7. typeof 연산자 8. null 병합 연산자 1. 대입 연산자 소스 코드 // 대입 연산자 let a = 1; 설명이 필요 없다. 변수를 선언하고 값을 대입하는 것이 대입 연산자이다. 2. 산술 연산자 소스 코드 // 산술 연산자 let b = 1; let c = 2; console.log(b + c); console.log(b * c); console.log(b - c); console.log(b / c); console.log(b % c); 결과 3 2 -1 0.5 1 기본적인 산술 연산자는 위의 예제와 같다. ..