TIL

TIL - 20220802

오늘은 모던 JavaScript 튜토리얼에서 'try..catch'와 에러 핸들링(https://ko.javascript.info/try-catch)에 대해 공부했다. 작성한 질문은 다음과 같다. 에러가 발생하면 스크립트가 즉시 중단되고(죽고), 콘솔 창에 에러가 출력된다. 이를 방지하고 에러를 잡아 더 합당한 무언가를 하는 문법이 try...catch 문법이다. try...catch의 동작 알고리즘은 다음과 같다. try {...} 안의 코드가 실행된다. 에러가 없다면, try 안의 마지막 줄까지 실행되고 catch 블록은 실행하지 않은 채 넘어간다. 에러가 있다면, 실행 중인 try 코드가 중단되고 catch 블록으로 실행 흐름이 넘어간다. try...catch는 런타임에 동기로 동작한다. 런타임에만..

TIL - 20220801

오늘은 모던 JavaScript 튜토리얼에서 믹스인(https://ko.javascript.info/mixins)에 대해 공부했다. 작성한 질문은 다음과 같다. 믹스인이란 다른 클래스를 상속받을 필요 없이 다른 클래스에 구현되어 있는 메서드를 담고 있는 클래스이고, 이벤트 핸들링 등의 행동을 추가하여 클래스를 확장하는 용도로 사용할 수 있다. 자바스크립트에서 믹스인을 구현하는 가장 쉬운 방법은 유용한 메서드가 여러 개 담긴 객체 하나를 만드는 것이다. 이런 식으로 진행하면 다수의 메서드를 원하는 클래스의 프로토타입에 쉽게 병합할 수 있다. 믹스인을 끝으로 모던 JavaScript 튜토리얼의 클래스 챕터가 모두 끝나게 됐다. 클래스에 대해 자세하게 공부할 수 있어서 좋았지만 더 좋았던 부분은 객체 지향 프..

TIL - 20220731

오늘은 모던 JavaScript 튜토리얼에서 'instanceof'로 클래스 확인하기에 대해 공부했다. 작성한 질문은 다음과 같다. 어떤 객체가 특정 클래스에 속하는지 아닌지 확인하기 위한 연산자로 instanceof가 있다. 이 instanceof는 클래스에 속하거나 클래스를 상속받는 클래스에 속한다면 true가 반환된다. class Animal {} class Rabbit extends Animal {} let rabbit = new Rabbit(); alert(rabbit instanceof Animal); // true 정적 메서드를 통해 인스턴스 여부나 상속 여부를 확인하는 방법은 Symbol.hasInstance를 통해 구현할 수 있다. class Animal { static [Symbol.h..

TIL - 20220730

오늘은 모던 JavaScript 튜토리얼에서 내장 클래스 확장하기(https://ko.javascript.info/extend-natives)에 대해 공부했다. 작성한 질문은 다음과 같다. 코드와 함께 살펴보자. class PowerArray extends Array { isEmpty() { return this.length === 0; } } let arr = new PowerArray(1, 2, 5, 10, 50); alert(arr.isEmpty()); // false let filteredArr = arr.filter(item => item >= 10); alert(filteredArr); // 10, 50 alert(filteredArr.isEmpty()); // false 배열, 맵 같은 내장..

TIL - 20220729

오늘은 모던 JavaScript 튜토리얼에서 private, protected 프로퍼티와 메서드(https://ko.javascript.info/private-protected-properties-methods)에 대해 공부했다. 작성한 질문은 다음과 같다. 내부 인터페이스와 외부 인터페이스는 다음과 같다. 내부 인터페이스: 동일한 클래스 내 다른 메서드에선 접근이 가능하지만, 외부에서 접근이 불가능한 프로퍼티와 메서드를 내부 인터페이스라고 한다. 외부 인터페이스: 클래스 밖에서도 접근이 가능한 프로퍼티와 메서드를 외부 인터페이스라고 한다. public과 private은 다음과 같다. public: 어디서든 접근 가능하며 외부 인터페이스가 public에 해당한다. 별다른 추가 설정을 취하지 않으면 전부 ..

TIL - 20220728

오늘은 모던 JavaScript 튜토리얼에서 정적 메서드와 정적 프로퍼티(https://ko.javascript.info/static-properties-methods)에 대해 공부했다. 작성한 질문은 다음과 같다. 기존 클래스에서 메서드를 만들면 클래스의 프로토타입에서 함수가 정의되었지만, 정적 메서드는 클래스 함수 자체에서 만들어주는 메서드이다. 클래스 안에서 메서드에 static 키워드를 붙여 만들 수 있고 정적 메서드는 메서드를 프로퍼티 형태로 직접 할당하는 것과 동일한 일을 한다. 정적 메서드는 클래스를 이용하여 객체 여러 개를 만든 상황에서 이 여러 개의 객체를 비교할 때 사용하면 좋다. 정적 프로퍼티란 정적 메서드와 마찬가지로 클래스 함수 자체에 만들어주는 프로퍼티이며 정적 메서드와 마찬가지..

TIL - 20220727

오늘은 모던 JavaScript 튜토리얼에서 클래스 상속(https://ko.javascript.info/class-inheritance)에 대해 공부했다. 작성한 질문은 다음과 같다. 클래스를 다른 클래스로 확장하기 위한 개념을 클래스 상속이라고 말하며, extends 키워드를 통해 상속받을 수 있다. 공통적으로 사용하는 부모 클래스의 메서드 이외에 자식 클래스에 원하는 메서드를 특별하게 추가할 때, 사용하면 좋다. super 키워드는 부모 메서드 전체를 사용하지 않고 일부 기능만 변경하여 사용하거나 확장하고 싶을 때, 커스텀 메서드를 만들어 작업하면 되면서도 커스텀 메서드 과정 전, 후에 부모 메서드를 호출하고 싶을 때 사용하면 좋다. 부모 생성자 이외에 자식 클래스에 특별한 생성자를 추가하고 싶을 ..

TIL - 20220726

오늘은 모던 JavaScript 튜토리얼에서 클래스(https://ko.javascript.info/class)에 대해 공부했다. 작성한 질문은 다음과 같다. 동일한 종류의 객체를 여러 개 생성해야 하는 경우, new 연산자와 생성자 함수를 사용하는 방법과 class를 사용하는 방법이 있다. 클래스에서 객체의 기본 상태를 설정해주는 생성자 메서드는 constructor이다. 클래스의 type은 함수이다. class User {...} 문법 구조가 하는 일은 다음과 같다. User라는 이름의 함수를 생성한다. 함수 본문은 class의 생성자 메서드인 constructor에서 가져오며 constructor에 대한 내용이 없는 경우, 본문이 비워진 함수가 만들어진다. class내에서 정의한 메서드는 User...