Front-End

= 9. 배열 고차 함수 = 고차함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다. 자바스크립트 함수는 일급 객체이므로 함수를 값처럼 인수로 전달할 수 있으며 반환할 수도 있다. 고차함수는 외부상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. 함수형 프로그래밍은 결국 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고프로그램의 안정성을 높이려는 노력의 일환이라고 할 수 있다. 특히 배열은 매우 유용한 고차 함수를 제공한다. 배열 고차 함수는 활용도가 ..

배열에 대해 간단히 앞에서 게시했었다. 이제 배열에서 사용하게 될 메서드를 공부해보자 = 8. 배열 메서드 = Array 생성자 함수는 정적 메서드를 제공하며, 배열 객체의 프로토타입인 Array.prototype은 프로토타입 메서드를 제공한다. 배열 메서드는 결과물을 반환하는 패턴이 두 가지이므로 주의가 필요하다..! 배열에는 원본 배열(배열 메서드를 호출한 배열, 즉 배열 메서드의 구현체 내부에서 this가 가리키는 객체)를 직접 변경하는 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 변환하는 메서드가 있다. const arr = [1]; // push 메서드는 원본 배열(arr)을 직접 변경한다. arr.push(2); console.log(arr); // [1, 2] // concat 메..

= 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..