자바스크립트
[자바스크립트] 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..
[자바스크립트] ES6 의 함수
ES6의 함수 ES6 이전까지의 자바스크립트 함수는 다양한 목적으로 사용되었습니다. 일반 함수 호출, new 연산자와 생성자 함수로서 호출, 객체에 바인딩되어 메서드로의 호출이 가능했습니다. 이는 유연하다는 장점이 되는것처럼 보이지만 실수를 유발시킬 수 있고 성능 면에서도 손해인 경우가 많습니다. ES6 이전의 함수는 일반 함수로 호출되는 것들이 생성자 함수로도 호출이 가능합니다. 이는 callable 하면서도 constructor 인 함수의 특징 때문인데, 생성자 함수만이 가져야 할 prototype 프로퍼티를 일반 함수들도 가지고 있다는 점에서 문제가 생깁니다. 이는 불필요한 프로토타입 객체를 생성하기 때문입니다. 이처럼 ES6 이전의 모든 함수는 사용 목적에 따른 명확한 구분이 존재하지 않습니다. ..
[자바스크립트] 클로저
클로저 자바스크립트에 대해 조금이라도 관심을 가진 사람들은 클로저라는 난해한 개념에 대해 들어보셨을 겁니다. 사실 대부분의 사람들은 사전지식없이 클로저를 먼저 공부하고는 합니다. 클로저는 렉시컬 환경과 렉시컬 스코프에 대한 사전 지식이 필요합니다. 먼저 MDN 에서 정의된 클로저의 정의에 대해서 이야기 해보도록 하겠습니다. MDN 에서 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합 이라고 이야기하고 있습니다. 함수는 잘 알고 있지만, 함수가 선언된 렉시컬 환경은 딱 와닿지가 않습니다. 먼저 렉시컬 스코프에 대해서 알아보겠습니다. 렉시컬 스코프 자바스크립트 엔진은 함수의 상위스코프를 결정할 때 호출한 위치가 아닌 함수의 정의 위치에 따라 결정합니다. 이러한 특징을 렉시컬 스코프라고 부릅니다. 아래 ..
[자바스크립트] 실행 컨텍스트 (2)
실행 컨텍스트 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있습니다. 실행 컨텍스트를 바르게 이해하면 스코프 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식, 호이스팅의 이유, 클로저(!!)의 동작 방식등의 동작 방식의 이해가 가능합니다. 이번에는 예제를 통해 어떻게 실행 컨텍스트가 생성되고 식별자를 검색하는지 살펴보겠습니다. 예제를 통해 알아보는 실행 컨텍스트의 생성과 식별자 검색 과정 var x = 1; const y = 2; function foo(a) { var x = 3; const y = 4; function bar(b) { const z = 5; console.log(a + b + x + y + z); } bar(10); } foo(20); // 42 0. 전역 객체 생성 사실 자..
[자바스크립트] 실행 컨텍스트 (1)
실행 컨텍스트 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있습니다. 실행 컨텍스트를 바르게 이해하면 스코프 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식, 호이스팅의 이유, 클로저(!!)의 동작 방식등의 동작 방식의 이해가 가능합니다. 내용이 방대하기 때문에 여러번에 나눠서 시리즈처럼 정리해보도록 하겠습니다. 소스코드 자바스크립트에서 소스코드는 총 4가지 타입으로 구분합니다. 이를 굳이 구별해놓은 이유는 당연히 서로 다르기 때문입니다. 소스코드의 타입에 따라서 실행 컨텍스트를 생성하는 과정이 다르고 관리하는 내용도 달라집니다. 소스코드는 아래와 같이 구분합니다. 타입 내용 전역 코드 전역에 존재하는 코드. 함수, 클래스등의 내부 코드는 포함 x 함수 코드 함수 내부에 존재하는 코드. 중첩된..