작심삼일

동기적으로 작업을 하면 하나의 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); 결과 배열에서도 배열명 앞에 ...을 입력해서 사용할 수 있다.

자바스크립트에서의 배열 내장함수 예제를 통해 배워보도록 하자. 배열 내장함수 예제 목차 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 기본적인 산술 연산자는 위의 예제와 같다. ..

자바스크립트의 변수를 선언하기 위해서는 let, var를 사용하고, 상수를 선언하기 위해서 const를 사용한다. 기본이지만 차이를 알고 사용하도록 하자. 1. let 변수 소스 코드 // 1. let 변수 알아보기 let age = 28; console.log("나이 : " + age); // 1-1. 그냥 변수로 덮어쓰는 것은 가능함 age = 27; console.log("나이 : " + age); 결과 나이 : 28 나이 : 27 let 변수는 변수이기 때문에 덮어쓰는 것이 가능하다. 하지만, 아래와 같이 재 선언하는 것은 불가능하다. 소스 코드 // 1-2. let을 한번더 선언하는 것은 불가능함 let age = 31; console.log("나이 : " + age); 결과 SyntaxErro..

1. For문을 통해 리스트 값 가져오기 우리는 객체리스트를 가져올때 단순 for문을 통해서 아래와 같이 가저온다. ▼로그 결과 map과 foreach문을 사용해서 리스트의 값을 가져올 수 있다. 2. foreach 사용 예제 ▼로그 결과 3. map 사용 예제 map은 foreach 문과 다르게 return 값을 가지고 있다. return 값을 통해서 새로운 result 리스트를 생성하는 것을 아래에서 확인해보자. ▼로그 결과 result를 출력했을때, 객체의 name 만 들어있는 리스트가 있다는 것을 확인 할 수 있다. foreach문은 return 값이 없지만, map은 return값이 필요할때 유용하게 사용 할 수 있다.