JavaScript/Vanilla

class, 그리고 JS의 객체 지향

클래스를 이용한 모듈화 객체지향 JavaScript 객체 지향 프로그래밍은 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. 여기에서 청사진을 바탕으로 한 "객체"는 인스턴스 객체(instance object), 줄여서 인스턴스라고 부른다. "청사진"은 클래스라고 부른다. 객체를 만드는 방식은 일반적인 함수를 정의하는 것과 비슷하다. function Car(color) {} let avante = new Car("blue"); let mini = new Car("cyan"); let beetles = new Car("red"); 이 때, 함수를 이용하는 방법이 조금 다르다. 그냥 실행하는 것이 아니라 new 키워드를 활용해서 만든다. 이는 새로운 인스턴스를..

고차함수

First-class citizen JavaScript에는 특별한 대우를 받는 일급 객체(first-class citizen)가 있다. 대표적인 일급 객체 중 하나가 함수이다. 함수는 다음과 같은 부분에서 특별하게 취급된다. 변수에 할당(assignment)할 수 있다. 다른 함수의 인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 반환될 수 있다. 변수에 함수를 할당할 경우 주의해야 할 점은 호이스팅이 되지 않는다는 것이다. 하지만 호이스팅의 경우를 제외하면, 변수에 함수를 할당하는 함수 표현식이나 기존에 알고 있던 함수 선언식이나 크게 다르지 않다. 다만 함수 표현식의 경우 함수가 변수에 저장될 수 있다는 사실을 분명하게 보여준다. What is higher order function?..

DOM (Document Object Model)

DOM (Document Object Model) 이해하기 DOM은 프로그래머 관점에서 바라본 HTML이다. HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 모델이다. JavaScript를 사용할 수 있으면 DOM으로 HTML을 조작할 수 있다 는 말이다. 쉽게 얘기하자면, JavaScript를 이용해서 엘리먼트의 속성값을 얻어내거나 변경하는 방법이라고 이해하면 된다. 하지만 DOM을 JavaScript라고 이해하면 안된다. 단지 JavaScript를 통해 접근하는 것 뿐이다. 이 DOM을 만들기 위해 뛰어난 웹 개발자들이 모여서 HTML을 철저히 분석했다. 분석한 내용으로 HTML의 아주 작은 부분까지 접근할 수 있는 구조(Model / Str..

객체의 얕은 복사와 깊은 복사

객체의 얕은 복사 (Shallow Clone) Object.assign() 첫번째 인자로 들어온 객체에 두번째 인자로 들어온 객체의 프로퍼티들을 복사해서 넣는다. const obj = { a: 1, b: 2 }; const target = { c: 3 }; const copiedObj = Object.assign(target, obj); console.log(copiedObj); //{c: 3, a: 1, b: 2} Spread Operator const original = { a: 1, b: 2, c: { d: 3, }, }; const copied = { ...original }; original.a = 1000; original.c.d = 3000; console.log(copied.a); // 1..

Hoisting

Hoisting 호이스팅에는 한가지 오해가 있다. 호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 알고 있을 수도 있지만, 실제로는 그렇지 않다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일차한 곳에 있다. catName("Chloe"); function catName(name) { console.log("My cat's name is " + name); } 함수를 작성하기 전에 호출하였지만 함수가 정상 작동하는 것을 확인할 수 있다. var x = 1; // x 초기화 console.log(x + " " + y); // '1 undefined' var y = 2; // 아래 코드는 위 코드와 같은 방..

Spread와 Rest 문법

Spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers); // 6 Rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용하다. 함수의 매개변수로 사용할 때에만 Rest 문법을 사용한다고 할 수 있다. function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1, 2, 3); // 6 sum(1, 2, 3, 4); // 1..

Closure가 어렵다면 내 탓이 아니라 JS 탓이다!

Closure 클로저는 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 자바스크립트는 함수가 호출되는 환경과 별개로, 기존에 선언되어 있던 어휘적 환경을 기준으로 변수를 조회하려고 한다. "외부함수의 변수에 접근할 수 있는 내부함수" 를 클로저 함수로 부르는 이유도 그렇다. Closure 함수의 특징 함수를 리턴하는 함수 const adder = function (x) { return function (y) { return x + y; }; }; 리턴하는 함수에 의해 스코프가 구분됨 ※ 클로저의 핵심 : 스코프를 이용해서 변수의 접근 범위를 닫음(closure) → 외부 함수의 변수에 내부 함수가 접근..

let / const / var 그리고 scope

scope 각 상수나 변수 등의 요소들이 허용된 영역, 범위를 scope라 한다. 특정 함수나 클래스의 블럭 안에 선언되지 않은 전역 변수들은 전역 스코프에 속한다. const / let const : 선언할 때 바로 값을 넣어줘야 하고, 이후 값을 바꿀 수 없는 상수. let : 선언과 값 정의를 따로 할 수 있고 값도 변경할 수 있다. 하지만 선언을 다시 하지는 못한다. ES6, ECMA 2015 버전부터 생긴 구문들이다. (그 전에는 var만 사용했다.) 선언하기 이전에 사용하려 하면 Reference Error가 발생한다. const와 let도 hoisting은 되지만 선언되어서 초기화되기 전에는 Temporal Dead Zone(TDZ)이라는 영역에 속하게 되어, 이 때 변수를 호출하면 오류가 ..

JavaScript의 탄생 배경

태초의 웹 브라우저 1993년, Mosaic Web Browser 출시 Mosaic Web Browser 팀을 이끌던 Marc Andressen은 Netscape 회사를 설립 이후 기존보다 UI 요소가 더해진 Nescape Navigator 출시 → HTML, CSS로 정적인 웹 페이지를 만들 수 있게 되었음 Marc Andressen은 동적인 웹 페이지를 만들기 위해 Script 언어를 만들기로 함 Marc Andressen은 Brendan Eich를 영입 → 새로운 Script 언어를 만들되 Scheme Script 언어의 컨셉을 유지하면서 문법은 Java와 유사하게, 그리고 이를 10일 안에 만들도록 계획했음 1994년 9월, 내부적으로 Mocha라고 불렀던 이름이 LiveScript로 바뀌어서 출..