본문 바로가기

PL (Programming Language)/JavaScript14

[JS] 자바스크립트 async와 await: 비동기 함수의 작업이 끝날 때까지 대기 자바스크립트의 비동기 함수를 나타내는 async 키워드를 활용하면, await를 통해 쉽게 작업이 끝날 때까지 대기시킬 수 있습니다. 이에 대해 자세히 알아보겠습니다. [ Contents ] 1. promise 객체 const delay = (ms) => { return new Promise((resolve) => { setTimeout(() => { console.log("delay 실행"); resolve(); }, ms); }); }; const start = () => { delay(200).then(() => { console.log("완료"); }); }; start(); promise 객체는 비동기로 실행되는 함수를 담고 있습니다. 위 예제는 promise 객체를 반환하는 delay 함수를 .. 2023. 9. 27.
[JS] 자바스크립트 비동기 객체 Promise: resolve - then, reject - catch 자바스크립트에서 비동기 실행을 할 때 사용하는 promise객체에 대해서 알아봅니다. promise 객체는 실행 대기, 실행 성공, 실행 실패 상태를 가지며 각 상태에 따라 다른 콜백함수를 호출합니다. [ Contents ] 1. Callback 지옥 const workA = (value, callback) => { setTimeout(() => { console.log('A실행'); callback(value + 5); }, 500); }; const workB = (value, callback) => { setTimeout(() => { console.log('B실행'); callback(value - 3); }, 300); }; const workC = (value, callback) => { se.. 2023. 9. 27.
[JS] 자바스크립트 동기와 비동기: 쓰레드(Thread)와 콜백함수(Callback) 자바스크립트의 동기와 비동기 작업에 대해 알아보겠습니다. [ Contents ] 1. 자바스크립트 동기 순차적으로 작업이 실행되는 방식 코드가 실행되는 통상적인 방식입니다. console.log("a"); console.log("b"); console.log("c"); 코드는 위에서부터 아래로 순차적으로 실행됩니다. 그래서 C/C++, java 같은 언어를 '절차형 프로그래밍 언어'라고도 하죠. 2. 자바스크립트 비동기 동시에 여러 작업이 진행되는 방식 비동기 방식은 병렬처리와 일맥상통합니다. 프로그램에서 작업을 처리하는 주체를 '쓰레드(Thread)'라고 하며, 여러 개의 멀티 스레드가 동시에 작업을 처리합니다. 비동기 방식이 동기 방식보다 당연히 효율성과 속도, 성능이 좋습니다. 웹페이지를 불러올 때.. 2023. 9. 25.
[JS] 자바스크립트 REST: 패킹(Packing), 여러 요소 저장하기 자바스크립트에서 패킹 역할을 하는 REST문법에 대해서 알아보겠습니다. [ Contents ] 1. REST ...개체 spread와 문법이 동일합니다. 다만 spread는 객체나 배열의 요소를 나열하는 언패킹이고, rest는 그 반대로 나열된 요소들을 묶는 패킹입니다. const print = (...rest) => { // rest console.log(rest); }; const numbers = [1, 2, 3, 4, 5, 6]; print(...numbers); // spread 위 예시는 spread로 여러 요소들을 인자로 보내고, rest로 파라미터를 받고 있습니다. 만약 rest를 사용하지 않는다면 아래와 같은 결과가 나옵니다. const print = (rest) => { // rest .. 2023. 9. 25.
[JS] 자바스크립트 스프레드(spread): 언패킹(Unpacking), 특정 객체나 배열 요소 나열하기 자바스크립트의 스프레드에 대해서 알아보겠습니다. [ Contents ] 1. 스프레드 (Spread) ...객체/배열 객체나 배열 앞에 ...를 붙여 요소를 풀어쓰는 문법입니다. 다른 언어에서는 언패킹(Unpacking)이라 불리는 문법으로, 데이터 분석에 주로 쓰이는 파이썬이나 스칼라에서 애용하는 문법입니다. const color1 = ["red", "orange", "yellow"]; const color2 = ["blue", "navy", "purple"]; const rainbow = [...color1, "green", ...color2]; console.log(rainbow); 특정 개체의 요소를 ...로 불러올 수 있습니다. const marine = { type: "bionic", pric.. 2023. 9. 25.
[JS] 자바스크립트 변수 값 교환하기(Swap), 배열/객체 기본값 설정하기 자바스크립트에서 변수 값을 교환하는 Swap 과정과, 배열/객체 기본값을 설정하는 방법을 알아보겠습니다. [ Contents ] 1. 변수 값 교환하기 let a = 1; let b = 2; let tmp; tmp = a; a = b; b = tmp; console.log(a, b); 기본적인 값 교환은 tmp 변수를 이용하는 겁니다. 아주 고전적인 방식이죠. let a = 1; let b = 2; a, b = b, a; console.log(a, b); 자바스크립트는 파이썬처럼 값 교환이 가능하진 않습니다. let a = 1; let b = 2; [a, b] = [b, a]; console.log(a, b); 다만 배열 형태를 빌려서 비스무리하게 구현할 수는 있습니다. let a = 1; let b =.. 2023. 9. 22.
[JS] 자바스크립트 객체 생성, 속성 생성/변경/삭제(delete) 자바스크립트에서 객체를 생성하고, 프로퍼티(속성)를 추가/수정/삭제하는 방법을 알아보겠습니다. [ Contents ] 1. 객체 생성 let person = new Object();// 객체 생성자 이용 let person = {};// 객체 초기화 new 키워드를 이용해서 객체(Object)를 생성할 수도 있고, 배열과 비슷하게 { }를 이용해서 초기화할 수도 있습니다. 보통 중괄호를 이용한 초기화 방식을 많이 사용합니다. 2. 객체 속성 let person = { name: "jangThang", phone: undefined, age: 26, etc: function () { console.log("star가 되기위해"); } }; 객체를 이루는 각 변수를 '속성(Property, 프로퍼티)'이라고.. 2023. 9. 14.
[JS] 자바스크립트 반복문: 배열/객체 내 모든 항목을 순환하는 for of와 for in 자바스크립트의 반복문 for에 대해서 알아봅니다. 파이썬과 마찬가지로 자바스크립트도 배열/객체 내 모든 항목을 순환하는 반복문이 있습니다. 그러한 역할을 수행하는 for of, for in 문법도 알아봅니다. [ Contents ] 1. 반복문 for for (let i = 1; i < 6; i++) { console.log(i); } C/C++/java for문법과 동일합니다. 2. 배열 순환 for of let arr = [1, 2, 3, 4, 5]; for (let i of arr) { console.log(i); } 자바의 for each문이나 파이썬처럼 배열 내 모든 항목을 순환하는 반복문이 가능합니다. let arr = [1, 2, 3, 4, 5]; for (let i=0; i < arr.le.. 2023. 9. 14.
[JS] 자바스크립트 배열 생성, 특징, 함수: push, unshift, pop, shift, length, splice 자바스크립트 배열의 특징과 관련 함수를 알아봅니다. [ Contents ] 1. 배열 생성 let 배열명 = new Array(항목); let 배열명 = new Array(항목 개수); new 키워드를 사용해서 배열을 생성하는 방법입니다. let array1 = new Array(1, 2, 3); let array2 = new Array(3); console.log(array1); // [1, 2, 3] console.log(array2); // [undefined, undefined, undefined] 여러 개의 인자를 넣으면 '해당 인자를 넣은 배열'이 만들어지고, 인자 1개만 넘으면 해당 인자 크기만큼의 빈 배열이 생성됩니다. 빈 배열의 각 항목은 NULL(undefined) 값입니다. let 배.. 2023. 9. 14.

티스토리툴바