본문 바로가기

JavaScript

(10)

JavaScript: 비동기 처리, Promise, async/await, Promise.all, Promise.race 비동기 처리의 이해 동기적 처리란 위 그림과 같이 1번 작업이 끝나기 전까지는 2번이 시작하지 못하고, 2번이 끝나기 전까지는 3번이 시작하지 못하고 전 작업이 끝나야 다음 작업 시작이 가능한 것을 동기적 처리라고 한다. 비동기적 처리는 동시에 여러가지 작업을 실행할 수 있다. 어떤 코드가 실행 중일 때도 다른 함수 호출이 가능해 병렬적으로 작업을 수행한다. 비동기적 처리가 훨신 효율적인 것을 확인할 수 있다. function work(callback) { setTimeout(() => { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start + "ms")..

JavaScript: spread와 rest (...) spread (연산자 '...') 먼저 spread라는 단어의 의미는 펼치다, 퍼뜨리다 이다. 이 문법을 사용하면 객체와 배열을 펼칠 수 있다. 기존에 만들었던 객체를 참고하여 새로운 객체를 만들고 싶다면 'spread'를 사용하면 편리하다. spread는 연산자 '...' 키워드로 사용할 수 있다. const slime = { name: "슬라임", }; const cuteSlime = { ...slime, attribute: "cute", }; const purpleCuteSlime = { ...cuteSlime, color: "purple", }; const greenCuteSlime = { ...purpleCuteSlime, color: "green", }; console.log(slime); /..

JavaScript: 비구조화 할당 const object = { a: 1, b: 2 }; const { a, b } = object; console.log(a); console.log(b); // 1 // 2 비구조화 할당 문법을 사용해서 object 객체의 a와 b를 바깥으로 꺼내어 출력해주는 코드이다. const object = { a: 1, b: 2 }; function print({ a, b }) { console.log(a); console.log(b); } print(object); // 1 // 2 함수에서도 비구조화 할당을 사용할 수 있다. const object = { a: 1 }; function print({ a, b = 2 }) { console.log(a); console.log(b); } print(object)..

JavaScript: 단축 평가 논리 계산법(Short-circit evaluation) 단축 평가 논리 계산법이란, 이름은 거창하지만 사실 별거 없다. 논리 연산자를 사용해서 코드를 더 짧게 작성하는 것을 의미한다. 코드를 통해 알아보자. const dog = { name: "멍멍이", }; function getName(animal) { if (animal) { return animal.name; } return undefined; } const name = getName(dog); console.log(name); // 멍멍이 위 코드는 getName 함수의 파라미터인 animal이 있으면 그 객체의 name을 출력해주고 없을 경우 undefined를 출력하는 코드이다. const dog = { name: "멍멍이", }; function getName(animal) { return a..

JavaScript: 프로토타입과 클래스 자바스크립트에서 프로토타입의 역할은 function 키워드로 객체 생성자를 만들고, 그 객체 생성자를 new 키워드를 통해 만든 다른 객체들끼리 공유할 수 있는 어떠한 값이나 함수를 prototype에 넣어주는 것이다. 클래스(Class)가 없는 자바스크립트에서 프로토타입(Prototype)의 개념은 아주 중요하다. 여기서는 아주 간단하게만 알아보고 나중에 더 자세하게 알아보자. function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; } Animal.prototype.say = function () { console.log(this.sound); }; Animal.prototype.sharedV..

JavaScript: 배열 내장함수 (forEach, map, indexOf, findIndex, find, filter, splice, splice, shift, pop, unshift, push, concat, join, reduce) 1. forEach 배열 안에 있는 원소들을 가지고 어떤 작업을 일괄적으로 하고 싶을 때, forEach문을 사용해 간결한 코드를 작성할 수 있다. const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'] for(let i = 0; i { console.log(hero); }); 더 나아가 화살표(arrow) 함수를 사용할 수도 있다. 2. map map 함수는 배열안의 모든 원소를 변환할 때 사용한다. const array = [1, 2, 3, 4, 5, 6, 7, 8]; const squared = []; for (let i = 0; i < array.length; i++) { squared.push(array[i] * array[i]); } consol..

Getter와 Setter 함수 객체 안에 Getter 함수와 Setter 함수를 설정할 수 있다. Getter 함수는 함수 앞에 get이라는 키워드를, Setter 함수는 함수 앞에 set이라는 키워드를 붙여 선언한다. Getter 함수는 특정 값을 조회하려고 할 때 사용한다. get 함수 안의 특정 코드를 실행하고 연산된 값을 받아 리턴을 하는 형식이다. Getter 함수는 리턴이 반드시 있어야 한다. Setter 함수는 set이라는 키워드를 붙여 함수를 선언한다. Setter함수는 파라미터로 무조건 어떤 값을 설정해 주어야 한다. 똑같은 이름의 Getter 함수와 Setter 함수를 넣어줄 수 있다. 또 다른 예를 들어보자. 다음과 같이 Getter 함수와 Setter 함수를 사용할 수 있다. 만약 이를 하나의 Getter 함수만..

function으로 선언한 함수화 화살표 함수의 차이점 그 이유는 function 키워드로 함수를 선었했을 때 'this'는 자신이 속해있는 객체를 가리키는데 화살표 함수에서는 'this'를 자신이 속해있는 객체를 가리키지 않기 때문이다. 간단한 예를 들어보자 cat.say = dog.say → 객체 cat 안에 say()라는 함수를 등록해주는 역할, 'this'가 cat를 가리키게 된다. 하나 더 기억해야 할 것은 다음과 같은 코드는 오류가 발생한다. cat 객체에 속해 있는 say() 함수를 밖으로 꺼내게 되면 'this'가 가리키는 대상이 없어져 오류가 발생하는 것이다.

이전 1 2 다음

티스토리툴바