전체 글
[자바스크립트] Set (집합)
Set 이번에는 JS 에서 지원하는 자료구조인 Set 에 대해서 살펴보려고 합니다. Set 은 Set의 특징과 여러가지 메서드를 살펴보면서 정리해보도록 하겠습니다. Set 객체는 중복되지 않는 유일한 값들의 집합입니다. Set 객체의 특성은 수학적 집합의 특성과 일치합니다. Set 은 수학적 집합을 표현한 자료구조입니다. 이를 통해 교집합, 합집합, 차집합, 여집합등을 구현하는 것이 가능합니다. Set 객체는 배열과 비슷하지만 아래와 같은 차이가 있습니다. 1. 동일한 값을 중복하여 포함할 수 없다. 2. 요소 순서에 의미가 없다. 3. 인덱스로 요소 접근이 불가능하다. Set 객체 생성해보기 Set 객체는 Set 생성자 함수로 생성합니다. 만약 인수를 전달하지 않으면 빈 Set 객체가 생성됩니다. co..
[자바스크립트] 디스트럭처링 할당
디스트럭처링 할당 디스트럭처링 할당은 구조화된 배열과 같은 이터러블이나 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적 할당 하는 것을 이야기합니다. 이는 배열과 같은 이터러블이나 객체 리터럴에서 필요한 값을 추출해 변수에 할당할 때 유용합니다. 이번 글에서는 디스트럭처링에 대해서 정리해보자 합니다. 배열 디스트럭처링 할당하기 ES5 에서는 구조화된 배열을 구조 분해하여 1개 이상의 변수에 할당하려면 아래와 같이 사용해야 했었습니다. // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3 ES6 에서는 배..
[자바스크립트] 스프레드 문법
스프레드 문법 ES6 에서 스프레드 문법이 도입되었습니다. 스프레드 문법은 뭉쳐 있는 여러 값을 펼쳐서(spread) 개별적인 값의 목록을 만들어 냅니다. 주의 할 점은 스프레드 문법은 for...of 문으로 순회 가능한 이터러블에 한정됩니다. 또한 스프레드는 개별적인 값을 만드는 것이 아닌 값들의 목록을 만드는 것이기 때문에 이를 값을 생성하는 연산자로 생각하면 안 됩니다. 즉, 스프레드 문법의 결과를 변수에 할당이 불가능합니다. (변수에는 값만 할당이 가능합니다.) // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1 2 3 // 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다. consol..
[자바스크립트] 이터러블
이터러블 이터러블은 이터러블 프로토콜을 준수한 객체를 이야기합니다. 이는 Symbol.iterator 를 프로퍼티 키로 사용한 메서드를 직접 구현해서 만들거나 프로토타입 체인에 의해서 상속받은 객체를 이야기합니다. 이러러블 프로토콜을 먼저 알아보면서 차근차근 정리해보도록 하겠습니다. 이터레이션 프로토콜 ES6 이전에는 순회 가능한 데이터 컬렉션(배열, 문자열, 유사 배열 객체 등등)은 각자의 구조를 통해 for, for...in, forEach 등 다양한 방법으로 순회가 가능했습니다. ES6 에서는 이터레이션 프로토콜을 준수시켜 이터러블로 통일하고 for...of, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 했습니다. 이터레이션 프로토콜은 아래와 같이 2가지로 나뉘게 됩니..
[자바스크립트] Symbol
Symbol 자바스크립트에서는 총 6개의 타입이 있었습니다. 문자열, 숫자, 불리언, undefined, null 그리고 객체 타입이 존재했습니다. ES6 에서는 7 번째 데이터 타입인 심벌(Symbol)이 등장합니다. 심벌은 원시값으로 다른 값과 절대로 중복되지 않는 유일무이한 값을 만들어냅니다. 주로 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해서 사용하는 심벌에 대해서 정리해보도록 하겠습니다. Symbol 함수로 Symbol 만들기 심벌 값은 Symbol 함수를 호출해서 생성합니다. Symbol 은 리터럴 표기법을 통해서 생성할 수 없고 new 연산자와 함께 호출이 불가능합니다. // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); ..
[자바스크립트] 배열의 메서드들
배열의 메서드들 이번에는 많이 사용하는 배열의 메서드들에 대해서 한 번 알아보도록 하겠습니다. 배열의 메서드들 Array.from Array.from 은 유사 배열 객체를 변환해서 배열을 생성합니다. 인수로는 iterable 과 유사 배열을 줄 수 있는데, 이를 배열을 만들어 줍니다. Array.from({ length: 3 }, (_, i) => i); // -> [0, 1, 2] Array.prototype.indexOf 원본 배열에서 인수로 전달된 요소를 검색해서 인덱스를 반환해줍니다. 중복되는 요소가 있다면 첫 번째로 검색된 요소의 인덱스를 반환해줍니다. 만약 존재하지 않으면 -1을 반환해줍니다. 대부분 요소의 존재 여부를 확인하기 위해서 사용합니다. const arr = [1, 2, 2, 3];..
[자바스크립트] 배열
배열 자바스크립트에서는 배열이 정말로 중요합니다. 그 이유는 바로 많이 쓰기 때문입니다.(?) 서버에서 만약 자료를 조작할 일이 생긴다면, 배열 안에 객체 리터럴들로 원하는 자료를 삽입하고 이를 배열의 메서드를 통해서 조작합니다. 자바스크립트를 잘 쓰는 사람은 '배열을 잘 쓰는 사람이다' 라는 말을 교수님께 들어본적이 있습니다. 자바스크립트를 잘 쓰기 위해 배열에 대해서 한 번 정리해보도록 하겠습니다. 배열의 특징 객체는 프로퍼티 키의 의미가 있습니다. 즉 순서에 의미가 없다고 볼 수 있습니다. 하지만 배열은 순서에 의미가 있습니다. 객체는 키를 통해서 자료를 가져오는 반면에 배열은 인덱스를 통해 자료를 찾습니다. 이는 순서를 통해서 자료를 찾는다고도 볼 수 있습니다. arr = [1, 2, 3]; o ..
[자바스크립트] 정렬 구현해보기
정렬 구현 버블 정렬 버블 정렬은 두 인접 원소를 검사해 정렬 하는 방법입니다. 아래와 같은 gif 파일 처럼 정렬을 시작하고 구현이 단순하다는 장점이 있습니다. 하지만 시간 복잡도가 평균, 최상, 최악 모두 O(N^2) 으로 굉장히 비효율적인 정렬 알고리즘 입니다. function bubbleSort(array) { // 인덱스와 바로 옆에 있는 인덱스 + 1 값을 비교하기 때문에 i 는 array.length - 1 까지 for (let i = 0; i a..