Life and IT

객체의 프로퍼티에는 두 종류로 나뉜다. 1. 데이터 프로퍼티 2. 접근자 프로퍼티 우리가 지금까지 사용했던 프로퍼티는 데이터 프로퍼티이다. 접근자 프로퍼티는 본질이 함수이며, 값을 획득(getter)하고 설정(setter)하는 역할을 한다. 객체 리터럴 안에서 getter와 setter는 각각 get과 set으로 나타낼 수 있다. let user = { name: "John", surname: "Smith", get fullName() { return `${this.name} ${this.surname}`; } }; alert(user.fullName); // John Smith 위 코드를 보면 get 프로퍼티를 일반 프로퍼티처럼 호출하여 사용할 수 있다. 그 뒤의 로직은 getter 메서드가 처리하기 ..

기본 매개변수를 사용하면 주어진 값이 없거나 undefined가 전달될 경우, 매개 변수를 기본값으로 초기화할 수 있다. 함수 내부에서 parameter를 변형하거나 활용하는 경우, 예상치 못한 에러가 발생할 가능성이 있다. Uncaught TypeError: Cannot read property ? of undefined 함수 내부적으로 Validation(유효성) 체크 로직이 없는 경우, parameter에 대한 필수값 여부를 설정하는 것이 없고, 기본값을 할당하고 있지 않기 때문에 발생하는 것이다. 기본 매개변수는 빈 값이나 undefined인 경우에 적용되며, 무조건 falsy한 값이 들어간다고 적용되는 것이 아님을 유의해야 한다. 이런 기본 매개변수에도 한계는 존재한다. 기본적으로 매개변수에 대..

fetch API는 비동기 방식으로, 서버에 요청을 하면 응답을 받는 API이다. fetch().then() function callback() { console.log('response end'); } fetch('html').then(callback); console.log(1); console.log(2); 위 예제 코드를 보면 fetch를 통해 html 데이터를 요청하고, 요청에 대한 응답이 완료되었을 때 then 메서드를 통해 callback을 실행하고 있다. 위 과정이 진행되는 동안 아래의 1, 2 콘솔 출력이 진행되며 결과는 아래와 같다. 1 2 response end fetch API - response 객체 fetch API 가이드에 따르면 then에 삽입된 함수를 실행시킬 때, 함수의 ..

클로저는 세 가지 스코프 체인을 가진다. 클로저 자신에 대한 접근 - 자신의 블록 내에 정의된 변수 외부 함수의 변수에 대한 접근 - 클로저 자신이 선언된 블록을 의미한다. 전역 변수에 대한 접근 내부 함수는 외부 함수의 변수뿐만 아니라 매개 변수에도 접근할 수 있다. 다만 외부 함수의 arguments 객체에는 접근할 수 없는데, 모든 함수에는 arguments가 자동으로 선언이 되기 때문이다. 클로저 함수 또한 자신만의 arguments가 존재하기 때문에 외부 함수의 arguments를 다른 변수에 저장하지 않는 한, 클로저는 외부 함수의 arguments에 접근할 수 없다. 클로저는 외부 함수의 변수에 대한 참조를 저장한다. 이는 클로저가 실제 값에 접근하는 것이 아닌 값의 참조에 접근한다는 것을 ..

재귀(Recursion) 프로그래밍에서 재귀란 자신을 정의할 때 자기 자신을 재참조하는 것을 말한다. 따라서 재귀 함수란 함수가 호출되어 실행할 때, 함수 내부에서 자기 자신을 다시 호출하는 재귀 호출의 형태를 말한다. 스택(Stack) 재귀 호출을 이해하기 위해서는 스택이라는 자료 구조를 먼저 살펴보는 것이 좋다. 왜냐면 우리의 컴퓨터는 호출 스택이라고 불리는 스택을 사용하여 함수를 실행하기 때문이다. 호출 스택은 일반적인 프로그래밍에서도 중요하지만 재귀를 사용할 때 더욱 중요하다. 매일 해야 할 일을 포스트잇에 한 장에 하나씩 적는다고 생각해보자. 그리고 포스트잇은 한 곳에 겹쳐 붙여야 한다. 가장 위에 붙어있는 포스트잇에 적혀있는 일부터 해결할 수 있다. 즉, 가장 밑에 있는 일을 하기 위해서는 그..

callback -> '되돌아 호출해달라'라는 의미 어떤 함수 A를 호출하면서 '특정 조건일 때 함수 B를 실행해서 나에게 알려달라'는 요청을 함께 보내는 것이다. 이 요청을 받은 함수 A는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 B를 직접 호출한다. 이처럼 콜백 함수를 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행할 것이다. 예시로 비동기 처리 함수인 setInterval과 setTimeout는 콜백 함수를 넘겨받아 설정한 시간 간격마다 콜백 함수를 호출한다.

명확한 설명이 있는 좋은 글을 읽게 되어서 이해한 대로 쭉 적어보았다. 프로토타입을 제대로 이해하려면 4가지 포인트가 있다. 첫 번째, 모든 객체는 생성자 함수를 통해 만들어진다. 두 번째, 생성자 함수가 정의될 때는 두 가지의 일이 발생한다. 세 번째, Prototype Object을 이해한다. 네 번째, __proto__, Prototype Chain을 이해한다. 객체 지향 언어에서 Class는 빠지지 않는 개념이다. 클래스는 상속 기능이 있는데, 자바스크립트는 객체 지향 언어이지만 Class에 대한 개념은 없다. 때문에 상속 기능을 흉내내기 위해 존재하는 것이 바로 Prototype이다. ES6에서 Class 문법이 추가되긴 했지만, 그렇다고 자바스크립트가 Class 기반 언어가 된 것은 아니다. ..

다음과 같은 생성자 함수가 있다고 해보자. function Person(first, last, age, gender, interests) { this.name = { first, last }; this.age = age; this.gender = gender; this.interests = interests; }; Person.prototype.greeting = function() { alert('Hi! I\'m ' + this.name.first + '.'); }; 그리고 Teacher라는 생성자 함수를 정의해보자. function Teacher(first, last, age, gender, interests, subject) { Person.call(this, first, last, age, gen..

JS에서는 객체를 상속하기 위하여 prototype이라는 방식을 사용한다. 이번 포스팅에서는 프로토타입 체인이 동작하는 방식을 알아보고, 이미 존재하는 생성자에 메소드를 추가하기 위해 프로토타입 속성을 사용하는 방법을 정리해보겠다. 또한 function의 타입이 Object가 아닌 function으로 나오는 이유도 알아보겠다. JS는 프로토타입 기반 언어이다. 모든 객체들은 프로토타입 객체를 가진다. 프로토타입 객체는 또 다시 상위 프로토타입 객체를 가질 수 있으며 이를 프로토타입 체인이라고 부른다. 프로토타입 체인은 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이 된다. 정확히 말하자면 상속되는 속성과 메소드들은 객체의 생성자의 프로토타입이라는 속성에 정의되어 있다. 생성..

EventTarget.addEventListener() EventTarget의 addEventListener() 메소드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. 여기서 지정한 이벤트란 'click', 'submit' 등등 매우 다양하다. Element, Document, Window 그리고 생소한 XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있다. addEventListener()는 EventTarget의 주어진 이벤트 유형에, EventListener를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동한다. target.addEventListener(type, listener[, options]); target.addEventLis..