Javascript - 원시값(Primitive)의 메서드
·
👨‍💻 Dev Note/JavaScript
원시값의 메서드 (Methods of Primitive) 원시값 (Primitive)이란? Javascript에서 말하는 원시값(Primitive)이란 무얼 뜻하는 것일까? 아래는 MDN에서 정의한 원시 값의 뜻이다. 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터 입니다. 자바스크립트의 원시 값은 객체가 아니지만, 마치 객체처럼 다룰 수 있다. 원시값에도 객체에서처럼 메서드를 호출할 수 있다. 이와 관련해서는 아래에서 조금 더 깊게 알아보도록하자. 다만 원시값은 객체가 아니라는 점은 꼭 기억해야 한다. 원시값 vs 객체 원시값과 객체는 아래와 같은 차이점을 가지고 있다. 원시값 원시형 값으로, 총 일곱가지 종류가 있다. 문자(string), 숫자(numb..
Javascript - Set을 알아보자
·
👨‍💻 Dev Note/JavaScript
이전 포스팅에서는 Key, Value로 이루어진 맵(Map)이라는 자료 구조형을 알아보았다. 유용한 Property 및 메소드 등을 활용하여 유용하게 쓰이는 자료구조였지만 맵은 중복 값을 허용한다. 이를테면 아래와 같다. let map = new Map(); map.set('s', 1); map.set('s', 2); map.set('r', 3); console.log(map) // Result // s : 2 // r : 3 위의 코드를 보면 알 수 있듯이, set함수를 통해 's'라는 동일한 키 값으로 저장할 경우 이전 데이터를 엎어 쓰게 된다. 이를 방지하려면 set을 하기전, has()함수를 통해 값이 있는지를 확인하고 저장해야 하는 번거로움이 있다. Map 뿐만 아니라, 다른 상황에서도 마찬가지..
Javascript - 맵(Map)을 알아보자
·
👨‍💻 Dev Note/JavaScript
자바스크립트로 개발하면서 가장 많이 사용하게 되는 자료구조에는 객체와 배열이 있다. 객체는 키가 있는 컬렉션을 저장할 수 있고, 배열은 순서가 있는 컬렉션을 저장한다. 하지만 점차 복잡해져가는 소프트웨어 시장속에서 위의 두 자료구조만으로 개발하기에는 코드가 많이 복잡해짐에 따라 맵(Map)과 셋(Set)이 등장하게 됐다. (Set에 관해서는 다음 포스팅에서 다뤄볼 예정이다) 맵 (Map) 맵은 키가 있는 데이터를 저장한다는 관점에서는 객체와 유사하다. 하지만 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있다. 아래의 코드처럼 다양한 자료형을 Key에 사용할 수 있다. let map = new Map(); map.set('1', '1'); // 문자 Key map.set(1, 'one'); // 숫..
구조 분해 할당(Destructuring Assignment) - 객체, 중첩구조 편
·
👨‍💻 Dev Note/JavaScript
이전 포스팅에서는 구조 분해 할당에서도 배열을 분해하는 방법에 대해서 알아보았다. 이번 포스팅에서는 객체를 분해하는 방법과 중첩 구조를 분해하는 방법, 그리고 기타 내용들에 대해서 다뤄보고자 한다. 구조 분해 할당(Destructuring Assignment) 객체 분해하기 구조 분해 할당 기법을 통해서 객체 역시도 분해가 가능하다. 아래 코드를 통해 기본 문법을 확인해보자. let {v1, v2} = {v1:..., v2:...} 할당 연산자 우측엔 분해하고자 하는 객체가 있으며 좌측엔 상응하는 객체 프로퍼티의 Patter을 넣는다. 말이 어려울 수 있으니 아래 예제 코드를 통해 조금 더 쉽게 알아보도록 하자. let book = { 'title': '디자인패턴', 'author': 'GoF', 'pr..
콜백지옥 (Callback Hell)과 비동기(async) 처리
·
👨‍💻 Dev Note/JavaScript
콜백 지옥 (Callback Hell) 콜백지옥이란, 콜백 함수를 익명 함수로 전달하는 과정이 반복되면서 코드 Depth가 알아보기 힘들만큼 깊어지는 상황을 이야기한다. 보통 EventHandler나 비동기 처리를 수행할 때 이런 형태가 많이 반복될 때가 있는데, 코드 Depth가 많이 길어지게 되고 가독성이 떨어지면서 수정하기도 두려운 상태가 된다. 아래의 코드를 통해 콜백 지옥을 맛보도록 하자. (a.k.a 앱등이 콜백지옥) setTimeout( (product) => { let appleProducts = product; console.log(appleProducts); setTimeout( (product) => { appleProducts += ", " + product; console.log(..