객체 지향 프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다. 객체 지향 프로그래밍의 장단점 -장점 코드 재사용이 용이 남이 만든 클래스를 가져와서 이용할 수 있고 상속을 통해 확장해서 사용할 수 있다. 유지 보수가 쉬움 절차 지향 프로그래밍은 코드를 수정할 때 일일이 찾아 수정해야하는 반면, 객체 지향 프로그래밍에서는 수정해야 할 부분이 클래스 내부에 멤버 변수혹은 메서드로 존재하기 때문에 해당 부분만 수정하면 된다. 대형 프로젝트에 적합 클래스 단위로 모듈화시켜서 개발할 수 있으므로 대형 프로젝트처럼 여러 명, 여러 회사에서 프로젝트를 개발할 때 업..

JavaScript 대표적인 일급 객체 중 하나가 함수이다. JavaScript에서 함수는 아래와 같이 특별하게 취급된다. 변수에 할당(assignment)할 수 있다. 다른 함수의 전달인자(argument)로 전달될 수 있다. 다른 함수의 결과로써 리턴될 수 있다. 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성 값으로 저장할 수 있다. 함수를 데이터(string, number, boolean, array, object)처럼 다룰 수 있습니다. '함수를 리턴하는 함수'와 '함수를 전달인자로 받는 함수' 모두, 고차 함수로 사용한다. 배열 메서드 .filter(), .map(), .reduce() arr.filter(callback(element[, index[, array]])..

this this는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수(self-referencing variable) 다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다. 함수 호출 방식 this가 가리키는 값(this 바인딩) 일반 함수로서 호출 전역 객체, strict mode(undefined) 메서드로서 호출 메서드를 호출한 객체(마침표 앞의 객체) 생성자 함수로서 호출 생성자 함수가 (미래에) 생성할 인스턴스 인스턴스가 정확히 누구일까? function Circle(radius) { this.radius = radius; this.getDiameter = function (){ return 2 * this.radius; }; } // 인스턴스..

DOM 모자딥다 추가정리 getElementsByTagName, getElementsByClassName 메서드가 반환하는 HTMLCollection 객체는 노드 객체의 상태 변화를 실시간으로 반영하는 살아 있는 (live) DOM 컬렉션 객체다. const { childNodes } = $something; // childNodes 프로퍼티 또한 NodeList 객체(live)를 반환한다. Apple Banana Orange const $elem = document.getElementsByClassName("red"); // 이 시점에 HTMLCollection 객체이는 3개의 요소 노드가 담겨 있다. console.log($elem); // HTMLCollection(3) [li.red, li.red..

DOM Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다. CRUD를 먼저 이해하는 것이 새로운 언어를 가장 빠르게 학습하는 방법입니다. (CRUD를 이해한 다음에는 세세한 메서드들을 알아야 합니다.) document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 방법을 학습합니다. DOM에는 HTML에 적용(APPEND)하는 메서드가 따로 있으니 주의. Create document.createElement..

모듈 패턴 모듈 패턴은 클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다. 모듈 패턴은 자바스크립트의 강력한 기능인 클로저를 기반으로 동작한다. 모듈 패턴의 특징은 전역변수의 억제와 캡슐화 구현이다. 전역변수 억제와 캡슐화 구현을 위해 클로저를 기반으로 관련이 있는 변수, 함수들을 즉시 실행 함수로 감싼 아이. 나는 클로저에 관한 개념을 이미 공부하고 정리하여 이해하고 있다. 바로 다음 내용으로 가보자. 캡슐화 캡슐화는 객체의 상태 (state)를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것을 말한다. 캡슐화는 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 정보 은닉 (information hi..

코드가 어디서 실행되며 주변에 어떤 코드가 있는지를 렉시컬 환경 (lexical environment)이라 부른다. 즉, 코드의 문맥은 렉시컬 환경으로 이뤄진다. 이를 구현한 것이 실행 컨텍스트 (execution context)이며, 모든 코드는 실행 컨텍스트에서 평가되고 실행된다. (실행 컨텍스트는 나중에 따로 정리하는 시간을 가져보자) 렉시컬 환경 (lexical environment) 스코프 체인은 실행 컨텍스트의 렉시컬 환경을 단방향으로 연결한 것이다. 전역 렉시컬 환경은 코드가 로드되면 곧바로 생성되고 함수의 렉시컬 환경은 함수가 호출되면 곧바로 생성된다. 스코프는 네임 스페이스다. (전역 스코프와 지역 스코프) 함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있다. 이는 스코프가 ..

즉시실행함수 함수 정의와 동시에 즉시 호출되는 함수 즉시 실행 함수는 단 한 번만 호출되며 다시 호출할 수 없다 let funcNow = (function() { let a = 3; let b = 5; return a * b; })(a, b); 즉시 실행 함수 내에 코드를 모아 두면 혹시 있을 수도 있는 변수나 함수 이름의 충돌을 방지할 수 있다 재귀 함수 함수가 잦기 자신을 호출하는 것을 재귀 호출이라 한다. 재귀 함수는 자기 자신을 호출하는 행위, 즉 재귀 호출을 수행하는 함수를 말한다. 재귀 함수를 사용하면 반복문 없이 반복되는 처리를 구현할 수 있다. 예를 들어 팩토리얼은 재귀 함수로 간단히 구현할 수 있다. function factorial(n) { if (n