본문 바로가기

개발 공부 일지/코어 자바스크립트 (정재남)9

[코어 자바스크립트] 클래스 자바스크립트는 프로토타입 기반 언어이기에 '상속' 개념이 존재하지 않는다그러나 클래스의 동작 방식을 흉내내는 여러 기법이 탄생했고, ES6에서는  (프로토타입을 기반으로 구현한) 클래스가 등장했다.클래스는 일종의 공통 집합의 개념으로 이해하면 된다. 다만 현실세계에서는 이미 실존하는 것들의 공통 성질로 집합을 만든다면, 프로그래밍 언어에서는 클래스를 먼저 정의하고 그로부터 파생되는 개체(인스턴스)를 생성할 수 있다.  생성자 함수 Array 를  new와 함께 호출하여 생성한 인스턴스는 체이닝에 의해 생성자 함수의 prototype 프로퍼티를 참조한다.생성자 함수를 일종의 클래스라고 하면, Array 의 prototype 객체 내부의 요소들이 인스턴스에 상속된다고 볼 수도 있다. (엄밀히는 아니지만 결과.. 2025. 3. 10.
[코어 자바스크립트] 프로토타입 프로토타입마지막 챕터인줄 알았는데 아니었다 ㅎ ㅎ자바스크립트는 프로토타입 기반 언어라고 하는데, 그동안 개발 공부하면서 이에 대해 들을 기회가 딱히 없었다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain 상속과 프로토타입 - JavaScript | MDNJavaScript는 동적 타입이고 정적 타입이 없기 때문에, (Java 또는 C++와 같은) 클래스 기반 언어에 경험이 있는 개발자에게는 약간 혼란스럽습니다.developer.mozilla.orgMDN에서 클래스 기반 언어 경험이 있는 개발자는 혼란스러울수도 있다고 하는데 나는 처음이니 혼란스러울게 없어서 럭키 비키 잖아? 🍀어떤.. 2025. 3. 10.
[코어 자바스크립트] 클로저 활용 사례 클로저는 다양한 곳에서 광범위하게 활용된다.'외부 데이터' 흐름에 주목하며 살펴보기클로저 활용 사례① 콜백함수 내부에서 외부 데이터 사용② 정보 은닉③ 부분 적용 함수④ 커링 함수① 콜백함수 내부에서 외부 데이터 사용- 대표적인 콜백함수 : 이벤트 리스너[ver.1]var fruits = ["apple", "banana", "peach"]var $ul = document.createElement("ul");fruits.forEach(function(fruit){ ------ (A) 외부함수 var $li = document.createElement('li'); $li.innerText = fruit; $li.addEventListener('click', function.. 2025. 3. 4.
[코어 자바스크립트] 클로저 개념 클로저클로저는 자바스크립트 고유의 개념은 아니고, 여러 함수형 프로그래밍 언어에서 보편적으로 나타나는 특성이다. - 함수 선언시 만들어지는 유효 범위가 사라진 후에도 그것을 호출할 수 있는 함수- 생명주기 상 끝난 외부함수의 변수를 참조하는 함수 어떤 함수 내부에서 선언된 함수 호출 시 활성화되는 실행 컨텍스트의 L.E (Lexical Environment) 객체는 ┌ environment Record : 식별자 수집 -> 호이스팅 └ outer Environment Reference  : 스코프 체인으로 이루어지는데 그 중 outer Environment Reference 가 함수가 선언되는 환경, 즉 외부 함수를 참조한다.function A(){ var a = 10; function B (){ .. 2025. 3. 4.
[코어 자바스크립트] 비동기 제어로 콜백 지옥 탈출하기 콜백 지옥과 비동기 제어- 콜백 지옥 : 비동기 처리를 위해 연속적으로 콜백 함수를 사용할 때, 콜백 함수를 익명 함수로 전달하는 과정이 반복되어코드의 들여쓰기 수준이 매우 깊어지는 현상가독성이 떨어지고 코드를 수정하기 어렵다 . (유지보수가 어렵다) -> 생산성 저하  - 비동기 : 현재 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어간다. 보류, 요청, 실행 대기 등과 관련된 코드는 비동기적인 코드이다. 사용자 요청에 의해 특정 시간동안 코드 실행이 보류(setTimeout) 사용자의 직접적인 개입이 있었을때 코드를 실행(addEventListener)웹브라우저 자체가 아닌 별도의 대상에 무언가를 요청하고 응답이 왔을때 실행 (XMLHttpRequest) 반대로 동기적인 코드는, 현재 실.. 2025. 2. 25.
[코어 자바스크립트] 콜백 함수 콜백함수 : 다른 코드의 인자로 넘겨주는 함수 시계를 예시로 들면, 약속 시간이 8시일때 1) 계속해서 8시가 되었는지 (내가) 시간을 확인한다. 2) 8시에 알람을 맞춘다 → 8시가 되면 (시계가) 알람을 울려준다. : 즉 알람을 울리는 제어권이 시계에게 있음 이처럼 콜백함수를 다른 코드에 인자로 넘겨주면, 제어권도 함께 위임하게 된다.콜백함수를 위임받은 코드는 자체적인 내부 로직에 의해 콜백함수를 적절한 때에 실행한다. var count = 0;var cbFunc = function(){ console.log(count); if(++ count > 4 ) clearInterval(timer);}var timer = setInterval(cbFunc, 300); // 제어권이 setInter.. 2025. 2. 25.