자바스크립트/자바스크립트 정리
호이스팅은 var 에서만 일어난다구요?
참조 에러가 아닌 undefined? 개념을 공부할때 가장 쉽게 이해할수 있는 방법 중 한 가지는 코드를 통해 확인해보는것입니다. 먼저 아래의 코드를 통해 살펴보도록 하겠습니다. console.log(name); // undefined var name; 선언되지 않은 변수를 참조할 수 있을까요? 선언되지 않은 변수를 참조하려 한다면 이를 알려주는 가장 대표적인 에러로 참조 에러인 ReferenceError가 발생해야 합니다. 하지만 자바스크립트에서는 참조 에러 대신 undefined가 출력되는 것을 확인할 수 있습니다. 그 이유는 바로... 이런 현상이 발생하는 이유는 자바스크립트에서의 변수 선언문은 런타임이 아닌 런타임 이전 단계에서 먼저 실행되기 때문입니다. 자바스크립트의 엔진은 소스코드를 실행하기 ..
(충격) 클로저는 사실 최약체다?
클로저는 어렵지 않아요 사실 클로저는 그렇게 어려운 개념은 아닙니다. 차근차근 클로저의 정의를 따라가다 보면 쉽게 이해가 가능합니다. 먼저 MDN 에서 한 번 그 정의를 찾아볼까요? 클로저는 중첩 함수가 상위 스코프 식별자를 참조하면서 외부 함수보다 중첩 함수가 더 오래 유지되는 경우에 이 중첩 함수를 클로저라고 부릅니다. ...???? ....??? ㅠㅠㅠㅠ 왜 클로저는 어려운걸까?? 클로저를 이해하기 위해서는 사실 선행 지식이 필요합니다. 이를 제쳐두고 바로 클로저는 무엇일까? 라는 궁금증에 클로저를 보게 된다면 앞에서 이해해야할 많은 지식들을 거꾸로 돌아가면서 이해하려 들게 됩니다. 문제는 이 사전지식들이 어려운 편에 속한다는 점입니다. 사실 사전지식부터 열심히 공부하고 난 다음에 클로저를 이해하려..
아 다르고 어 다른 자바스크립트의 this 바인딩
동적으로 결정되는 this 바인딩 자바나 C++ 같은 클래스 기반 언어와 다르게 자바스크립트는 함수 호출 방식에 따라 this 바인딩이 결정됩니다. 그렇기 때문에 this 바인딩이 되는 상황을 알기 위해서는 다양한 방식의 함수 호출 방식을 먼저 알아야 합니다. 아 다르고 어 다르다! 자바스크립트는 다양한 방식으로 함수 호출이 가능합니다. 하지만 주의해야할 점은, 동일한 함수를 다른 방식으로 호출이 가능하다는 것입니다. 즉 같은 함수라도 다르게 호출된다면 하는 역할이 달라지게 됩니다. 같은 말이라도 아 다르고 어 다르게 될 수 있으니 주의하셔야 합니다. 함수 호출 방식과 this 바인딩 이제 다양한 자바스크립트의 함수 호출 방식에 대해서 알아보고 이때의 this 는 어떻게 바인딩 되는지에 대해서 알아보겠습..
[자바스크립트] 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(); ..