본문 바로가기

Programming/자바스크립트51

[자바스크립트] 제너레이터 javascript - iterable & iterator [자바스크립트] iterable & iterator iterable 이터러블(iterable)이란 자료를 반복할 수 있는 객체를 말한다. 반복할 수 있는다는 객체가 어떤 의미일까? 반복할 수 있는 객체, 즉 이터러블한 객체는 순회할 수 있는 객체를 의미한다. 우 codingralro.tistory.com 제너레이터에 대해서 더 잘 이해하기 위해서는 먼저 이터러블, 이터레이터에 대해서 알고 있어야 한다. 해당 내용에 대해서 모르시는 분들은 위의 블로그를 참고하기 바란다. 제너레이터(Generator)란 제너레이터란, iterable이면서 동시에 iterator인 함수이다. Promise를 보완하기 위해 async가 나온 것과 같이 제너레이터도 이터.. 2023. 11. 13.
[자바스크립트] Enum 구현 Enum Enum은 Enumerated type의 줄임말로 열거하는 타입을 뜻한다. 여기서 무엇을 열거하느냐가 Enum의 중요한 포인트이다. Enum을 자바스크립트에서 const 키워드로 선언되는 변수인, 상수를 열거하여 묶어두기 위해 주로 사용되는 타입이다. 다른 프로그래밍 언어와는 달리, 자바스크립트를 공부하면서 Enum에 대해서는 거의 접하지 못하는 데 그 이유가 자바스크립트는 Enum 타입을 제공하지 않기 때문이다. 하지만, 자바스크립트의 메소드를 활용하여 구현할 수 있기 때문에 이번 글에서는 어떻게 자바스크립트에서 Enum 타입을 구현하는지에 대해 알아보자. Enum을 사용하는 이유 Enum을 사용하는 이유는 같은 집합으로 묶일 수 있는 상수 데이터를 사용할 때 유용하기 때문이다. 여기서 집합으.. 2023. 11. 13.
[자바스크립트] class는 함수이다? 이번 글에서는 자바스크립트의 클래스를 처음 접하다 보면 발생할 수 있는 헷갈리기 쉬운 클래스의 타입에 대해서 알아보겠다. 자바스크립트 클래스 자바스크립트에서 클래스는 ES6에서 추가된 문법으로 기본적인 사용방법은 아래와 같다. (자바스크립트의 클래스에 대한 자세한 내용은 해당 링크를 참고 : 클래스) // 클래스 class Person { constructor({name, age}) { this.name = name; this.age = age; } introduce() { return `이름 : ${this.name} 나이 : ${this.age}`; } } const person = new Person({name: 'kim', age: 26}); console.log(person.introduce().. 2023. 11. 11.
[자바스크립트] Constructor vs Non-Constructor 함수의 구분 : Constructor vs Non-Constructor 자바스크립트의 함수는 객체를 생성하는 생성자 함수로도 사용되고 콜백 함수, 메서드 등 여러 곳에서 사용된다. 자바스크립트 엔진은 이러한 함수들을 평가하여 함수 객체를 생성하는데, 함수 정의 방식에 따라 함수를 constructor와 non-constructor로 구분한다. constructor 는 생성자를 뜻하는 말로, constructor로 구분된 함수로는 new 키워드를 통해 객체를 생성하는 것이 가능하다. 하지만 non-constructor로 구분된 함수는 new 키워드를 통해 객체를 생성할 수 없고 오로지 함수로서의 사용만이 가능하다. 자바스크립트에서 어떤 함수가 constructor인지, non-constructor인지 알아.. 2023. 11. 9.
[자바스크립트] Symbol 타입 Symbol 타입 JavaScript의 심볼(symbol) 타입은 원시 타입 중 하나로, ES6 버전의 JavaScript에서 새롭게 추가된 타입이다. 심볼 타입은 객체의 프로퍼티 키를 고유하게 설정함으로써 프로퍼티 키의 충돌을 방지하기 위해 사용된다. 다른 타입에 비해 흔하게 사용되는 타입은 아니지만, JavaScript에는 심볼 타입에 대한 이해가 전제되어야 이해하고 사용할 수 있는 몇몇 문법(EX. iterable 객체)들이 존재하기 때문에 공부해두는 것이 좋다. Symbol 타입 생성 Symbol 타입의 변수는 Symbol 함수를 호출하여 생성할 수 있다. 이 때 생성되는 심볼은 변경이 불가능한 원시 값이다. Symbol 함수를 호출할 때 넘겨주는 인자는 문자열로, 생성되는 심볼 변수에 대한 설명.. 2023. 11. 8.
[자바스크립트] Set 자료구조 Set 자바스크립트의 Set 자료구조는 Map과 함께 ES6에서 추가된 자료구조이다. Map이 객체와 유사하지만 차이점이 있었다면, Set은 배열과 유사하지만 차이점이 존재하는 자료구조이다. 흔히, Set 자료구조는 순서있는 데이터의 집합인 배열과는 달리 순서가 없는 중복되지 않은 데이터의 집합이다. 이러한 차이점이 존재하다 보니, Set 또한 Map처럼 상황에 따라, 배열보다 유용할 때가 있고 굳이 세트를 사용할 필요가 없는 경우가 있다. Set 를 배열과는 비교를 하긴 하지만, 사실 배열과는 결이 많이 다른 자료구조이다. 배열은 데이터를 순서있게 저장하여 인덱스를 통해 접근할 수 있고 중복된 값 또한 허용한다. 하지만, Set는 데이터를 순서없이 저장하며 그렇기 때문에 인덱스를 통해 접근할 수 없고,.. 2023. 11. 8.
[자바스크립트] Map 자료구조 Map 자바스크립트에는 객체와 배열이라는 강력하고 유용한 자료구조를 제공한다. 하지만 이 두가지 자료구조만으로는 부족하기 때문에 ES6에서 Map, Set 자료구조가 등장하게 되었다. Map은 흔히 알고 있듯이 키와 값 쌍으로 이루어진 자료 구조이다. 이 점만 보면, 자바스크립트의 객체와 크게 다를 것이 없어보이는데 왜 Map이 등장하였을까? 바로 객체의 key는 항상 스트링 형태로 저장되는 것에 비해 Map 자료 구조의 key는 다양한 자료형을 허용한다는 점에서 차이가 존재한다. 이외에도 자바스크립트에서 Map은 어떠한 특징을 가지고 있고 어떠한 메소드를 통해 사용하는지 알아보자. Map vs 객체 Map 과 객체의 큰 차이점은 key의 자료형의 허용 범위라고 하였는데 이외에는 어떠한 차이점이 있을까?.. 2023. 11. 7.
[자바스크립트] 프로미스 - promise hell 프로미스 객체를 돌아보며... 지금까지 프로미스 객체에 대해서 탄생 배경부터 기본 사용법, 체이닝, 정적 메소드 등을 공부하면서 프로미스 객체에 대해서 보다 깊게 알게 되고, 사용 방법에 대해서도 보다 익숙해졌다. 프로미스 개념과 기본 사용법 프로미스 핸들러 프로미스 체이닝 프로미스 정적 메소드 공부하며 할 수록, 콜백 함수에 비해 훨씬 사용하기도 편하고 코드도 간결해짐으로써 가독성 또한 좋아지는 것을 볼 수 있었다. 하지만 콜백 지옥이 끝이 아니었다면?? 그를 해결하기 위해 나온 프로미스 또한 지옥이 존재한다면... 프로미스 지옥 처음 프로미스의 개념에 대해서 배울 때 프로미스 객체는 콜백 지옥을 극복하기 위한 문법이라고 배웠다. 하지만, 이런 프로미스 또한 지옥이 있다고 하니 자바스크립트를 공부하는 .. 2023. 11. 6.
[자바스크립트] 프로미스 - 정적 메소드 프로미스 체이닝 [자바스크립트] 프로미스 - promise chaining 프로미스 핸들러 [자바스크립트] 프로미스 - Promise Handler 프로미스의 개념과 기본 사용법 [자바스크립트] 프로미스 - 개념 & 기본 사용법 프로미스의 탄생 : 콜백지옥 자바스크립트에서는 서버에 codingralro.tistory.com 저번 포스팅에서는 프로미스 체이닝에 대해서 알아보았는데, 이번 포스팅은 프로미스를 좀 더 잘 활용하기 위해 프로미스의 정적 메소드에는 어떠한 것이 있고 어떻게 사용하는지에 대해 공부해보겠다. 프로미스 정적 메소드 프로미스 객체는 new Promise() 생성자 함수 외에도 여러 가지 정적 메소드를 제공하고 있다. 정적 메소드는 객체를 초기화하지 않고도 바로 사용할 수 있는 메소드로 비.. 2023. 11. 6.
[자바스크립트] 프로미스 - promise chaining 프로미스 핸들러 [자바스크립트] 프로미스 - Promise Handler 프로미스의 개념과 기본 사용법 [자바스크립트] 프로미스 - 개념 & 기본 사용법 프로미스의 탄생 : 콜백지옥 자바스크립트에서는 서버에서 데이터를 받아오는 등 시간이 걸리는 작업을 처리를 codingralro.tistory.com 저번 포스팅에서는 프로미스의 상태에 따라 후속 작업을 다룰 수 있는 프로미스 핸들러에 대해서 다루었다. 프로미스 핸들러에서 중요한 부분은 핸들러가 새로운 프로미스를 반환한다는 점이었는데, 이번 포스팅을 통해서 해당 사실을 통해 어떻게 프로미스 체이닝을 사용하는지에 대해서 알아보자. 프로미스 체이닝 ( promise chaining ) 프로그래밍을 하다보면, 체이닝이라는 말을 많이 접하게 된다. 체이닝이란, .. 2023. 11. 6.
[자바스크립트] 프로미스 - Promise Handler 프로미스의 개념과 기본 사용법 [자바스크립트] 프로미스 - 개념 & 기본 사용법 프로미스의 탄생 : 콜백지옥 자바스크립트에서는 서버에서 데이터를 받아오는 등 시간이 걸리는 작업을 처리를 할 때, 대게 비동기함수를 사용하여 처리한다. 비동기는 특정 코드의 실행이 완 codingralro.tistory.com 저번 포스팅에서는 프로미스의 탄생 배경과 개념, 그리고 기본 사용법에 대해서 알아 보았다. 이번 포스팅에서는 프로미스 객체의 상태에 대해 후속 처리를 하는 프로미스 핸들러에 대해서 알아보겠다. 프로미스 3가지 상태 프로미스 핸들러에 대해서 알아보기 전에, 먼저 프로미스의 3가지 상태에 대해서 알아보겠다. 프로미스는 비동기 작업의 결과에 대한 약속 객체를 반환한다고 하였다. 그렇기 때문에 new Prom.. 2023. 11. 6.
[자바스크립트] 프로미스 - 개념 & 기본 사용법 프로미스의 탄생 : 콜백지옥 자바스크립트에서는 서버에서 데이터를 받아오는 등 시간이 걸리는 작업을 처리를 할 때, 대게 비동기함수를 사용하여 처리한다. 비동기는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하기 때문에, 비동기 작업의 결과에 따라 다른 작업을 수행해야 할 때에는 콜백 함수를 사용해 왔다. 콜백 함수는 비동기 작업이 완료되면 자바스크립트 엔진의 콜백 큐로 다시 불러오는(call back) 함수의 의미로, 비동기 함수의 매개변수로 함수 객체를 넘기는 것을 뜻한다. 이런 콜백 함수를 통해 비동기 작업의 결과로 그 다음의 작업을 수행할 수 있었던 것이다. 하지만 콜백함수를 사용하면 코드가 복잡하고 가독성이 떨어지는 단점이 있다. 여러 개의 비동기 작업을 순차적으로 수행하.. 2023. 11. 6.
728x90
반응형

티스토리툴바