Front-End

= 1. 배열이란 ?? = 배열은 여러 개의 값을 순차적으로 나열한 자료구조다. 배열은 사용 빈도가 높으니 코딩에 도움이될거다. const arr = ['apple', 'banana', 'orange']; 배열이 가지고 있는 값을 요소라고 부른다. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 즉, 원시값은 물론 객체, 함수, 배열 등 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다. 배열의 요소는 배열에서 자신의 위치를 나타내는 0개 이상의 정수인 인덱스를 갖는다. 인덱스는 배열의 요소에 접근할 때 사용한다. 요소에 접근할 때는 대괄호 표기법을 사용한다. 대괄호 내에는 접근하고 싶은 요소의 인덱스를 지정한다. arr[0] // 'apple' arr[1] // 'banana'..

= 1. 함수의 구분 = ES6 이전까지 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. 자바스크립트의 함수는 일반적인 함수로서 호출할 수도 있고, new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수로서 호출할 수도 있으며, 객체에 바인딩되어 메서드로서 호출할 수도 있다. 이는 언뜻 보면 편리한 것 같지만 실수를 유발할 수 있으며 성능면에서도 손해다. 다음예제를 살펴보면 ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있다. var foo = function () { return 1; }; // 일반적인 함수로서 호출 foo(); // 1 // 생성자 함수로서 호출 new foo(); // foo {} // 메서드로서 호출 var obj = { foo ..

ㅎㅇㅌ = 1. 클래스는 프로토타입의 문법적 설탕인가? = 자바스크립트는 프로토타입 기반 객체지향 언어다. 비록 다른 객체지향 언어와의 차이점에 대한 논쟁이 있긴 하지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 다음과 같이 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. // ES5 생성자 함수 var Person = (function () { // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person.prototype.sayHi = function() { console.log('Hi! ..

클로저는 난해하기로 유명하다고 한다.. 그리고 자바스크립트 개념 중 하나인데 자바스크립트 고유의 개념은 아니라고 한다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 클로저는 자바스크립트 고유의 개념이 아니므로 클로저의 정의가 ECMAScript 사양에 등장하지 않는다. MDN에서는 클로저에 대해 다음과 같이 정의하고 있다. " 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다 " 정의가 무척이나 난해해서 무슨 의미인지 잘 와닿지 않는다. 먼저 이해해야 할 핵심 키워드는 "함수가 선언된 렉시컬 환경" 이다. const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x..

실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. ECMAScript 사양에서 사용하는 생소한 용어가 다수 등장해서 어렵게 느껴질 수 있지만 천천히 읽어보면 그리 어렵지는 않다고 한다... 그림이 많다고 하니 잘 따라가 보자! = 1. 소스코드의 타입 = ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 소스코드의 타입 설명 전역 코드 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는..

= 1. this 키워드 = 객체지향 프로그래밍에서 봤듯이 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태 즉, 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. const circle = { // 프로퍼티 : 객체 고유의 상태 데이터 radius : 5, // 메서드 : 상태 데이터를 참조하고 조작하는 동작 getDiameter() { // 이 메서..

= 1. 자바스크립트 객체의 분류 = 크게 세 개로 분류할 수 있다. 표준 빌트인 객체 ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통기능을 제공한다. ESMAScript 사양에 정의된 객체라 자바스크립트 실행 환경과 관련 없이 언제나 사용할 수 있다. 전역 객체의 프로퍼티로서 제공된다. 따라서 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. 호스트 객체 ESMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다. 브라우저 환경에서는 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker..

= 1. ? strick mode란 ? = function foo() { x = 10; } foo(); console.log(x); // ?? 다음 실행 결과는 무엇일까 ? 난.. 10일거 같은데... 왜냐하면 원래는 함수스코프로 x = 10;이 foo 내에서만 불려야하는데 foo 함수를 호출했으니 전역으로 가능해진게 아닌가하는..!? 자, 해설을 한번 봐보자 foo 함수 내에서 선어하지 않은 x 변수에 값 10을 할당했다. 이때 x 변수를 찾아야 x에 값을 할당할 수 있기 때문에 자바스크립트 엔진은 변수가 어디에서 선언되었는지 스코프 체인을 통해 검색하기 시작한다. 자바스크립트 엔진은 먼저 foo 함수의 스코프에서 x 변수의 선언을 검색한다. 선언이 없으니 검색에 실패! x 변수를 검색하기 위해 foo..

자바스크립트는 명력형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다. 자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체다. 원시 타입의 값을 제외한 나머지 값들(함수, 배열, 정규 표현식 등)은 모두 객체다. 가보자잇..! = 1. 객체지향 프로그래밍 = 객체지향 프로그래밍은 프로그램을 명령어 또는 함수 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. 객체지향 프로그래밍은 실세계의 실체(사물이나 개념)를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다. 실체는 특징이나 성질을 나타내..

드디어 일급 객체!..... = 1. 일급 객체 = 다음과 같은 조건을 만족하는 객체를 일급 객체라 한다. 1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 3. 함수의 매개변수에 전달할 수있다. 4. 함수의 반환 값으로 사용할 수 있다. 자바스크립트 함수는 다음 예제와 같이 위의 조건을 모두 만족하므로 일급 객체다. // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function(num) { return ++num; }; const decrease = func..