분류 전체보기

TIL - 20220720

오늘은 모던 JavaScript 튜토리얼에서 프로퍼티 플래그와 설명자(https://ko.javascript.info/property-descriptors)에 대해서 공부했다. 작성한 질문은 다음과 같다. 객체 프로퍼티는 키-값 쌍으로 이루어져 있는데 여기서 플래그라는 보이지 않는 프로퍼티 추가 구성 옵션이 존재한다. 다음과 같은 속성이 존재한다. writable: boolean 형태이며, 값이 true일 경우 프로퍼티의 값을 수정할 수 있다. false일 경우 읽기만 가능하다. enumerable: boolean 형태이며, 값이 true일 경우 반복문을 사용해 나열할 수 있다. false일 경우 반복문을 사용해 나열할 수 없다. configurable: boolean 형태이며, 값이 true일 경우 프..

[JavaScript] 변수의 유효범위와 클로저

코드 블록 코드 블록 {...} 안에서 선언한 변수는 코드 블록 안에서만 사용할 수 있다. if (true) { let message = "안녕하세요!"; alert(message); // 안녕하세요! } alert(message); // ReferenceError: message is not defined if와 같은 조건문만이 아니라 반복문에도 해당한다. for (let i = 0; i < 10; i++) { alert(i); // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 } alert(i); // ReferenceError: i is not defined 중첩 함수 함수 내부에서 선언한 함수를 중첩 함수라고 부르며 중첩 함수는 새로운 객체의 프로퍼티 형태나 중첩 함수 그 자체로 반환될 수..

TIL - 20220719

오늘은 모던 JavaScript 튜토리얼에서 화살표 함수 다시 살펴보기(https://ko.javascript.info/arrow-functions)에 대해서 공부했다. 작성한 질문은 다음과 같다. 화살표 함수와 일반 함수의 차이점으로 여러 가지가 있다. 우선, 화살표 함수는 this를 가지지 않는다. 화살표 함수 본문에서 this를 사용해 접근하면, 외부에서 값을 가져오기 때문에 객체 메서드를 일반 함수로 만들어 다른 함수의 인수로 전달할 때, this가 사라져 bind를 하는 과정을 거치지 않아도 된다. 다음으로, 화살표 함수는 유사 배열 객체인 args를 가지지 않는다. 모든 인수에 접근할 수 있게 해주는 arguments인 args를 가지지 않으며, 이런 점은 현재 this 값과 arguments..

TIL - 20220718

오늘은 모던 JavaScript 튜토리얼에서 함수 바인딩에 대해 공부했다. 작성한 질문은 다음과 같다. 객체 메서드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라지는 이유는 객체에서 분리된 함수만 전달되기 때문이다. 브라우저 환경에서 setTimeout 메서드는 인수로 전달받은 함수를 호출할 때, this에 window 객체를 할당하기 때문에 원하는 this를 참조하기 어렵다. 메서드를 전달하며 컨텍스트도 제대로 유지하려면 래퍼 함수를 사용하는 방법과 bind를 사용하여 컨텍스트를 유지하는 방법이 있다. 부분 적용 함수를 만드는 이유는 좋은 가독성을 가진 이름의 함수를 만들 수 있기 때문이다. 예를 들어, 채팅 서비스를 만든다고 가정하며 메시지를 전달하는 함수 send를 만든다고 가정할..

TIL - 20220717

오늘은 모던 JavaScript 튜토리얼에서 call/apply와 데코레이터, 포워딩(https://ko.javascript.info/call-apply-decorators)에 대해서 공부했다. 작성한 질문은 다음과 같다. 데코레이터란 함수를 감싸는 래퍼로 함수의 행동을 변화시킨다. 주요 작업은 여전히 함수에서 처리하지만, 캐싱과 같은 기능을 추가할 때 사용하면 좋다. call은 주어진 컨텍스트와 인수를 이용하여 함수를 호출하고, apply는 this에 context가 할당되고, 유사 배열 args가 인수로 전달되어 함수가 호출된다. 데코레이터, call, apply라는 개념과 예제를 지금까지 한 번도 본 적이 없었고 처음 공부해보는 개념이라 공부하면서도 내가 잘 이해하고 있지 않구나라는 생각이 들었다...

TIL - 20220716

오늘은 모던 JavaScript 튜토리얼에서 setTimeout과 setInterval을 이용한 호출 스케줄링(https://ko.javascript.info/settimeout-setinterval#ref-57)에 대해서 공부했다. 작성한 질문은 다음과 같다. 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 호출 스케줄링이라고 부르며 구현하는 방법으로 setTimeout과 setInterval이 있다. 대기 시간의 단위는 밀리초(millisecond)이며 1000ms가 1초이다. setTimeout과 setInterval 모두 호출하면 타이머 식별자(timer identifier)가 반환되며, 이를 이용해 스케줄링을 취소하거나 중단하고 싶을 때 타이머 식별자를 이용하면 된다..

TIL - 20220715

오늘은 모던 JavaScript 튜토리얼에서 객체로서의 함수와 기명 함수 표현식(https://ko.javascript.info/function-object)에 대해 공부했다. 작성한 질문은 다음과 같다. 자바스크립트에서 함수의 자료형은 객체이다. 함수를 호출 가능한 객체라고 생각하면 이해가 편하며 함수를 호출할 수 있을 뿐만 아니라 객체처럼 프로퍼티를 추가, 제거하거나 참조를 통해 전달할 수도 있다. 함수의 이름을 알고 싶다면 'name' 프로퍼티를 사용하면 된다. 다음과 같이 확인할 수 있다. function threeMul(a, b, c) { return a * b * c; } threeMul.name // 'threeMul' 함수 매개변수의 개수를 알고 싶다면 'length' 프로퍼티를 사용하면 ..

TIL - 20220714

오늘은 모던 JavaScript 튜토리얼에서 오래된 'var'(https://ko.javascript.info/var)에 대해서 공부했다. var를 쓰면 안 된다라는 사실은 예전 JavaScript를 처음 배울 때부터 들었는데 그래도 var에 대해서 간단히라도 공부는 해놔야 할 것 같다는 생각이 들어서 공부하게 됐다. 작성한 질문은 다음과 같다. var로 선언한 변수는 함수 스코프 혹은 전역 스코프를 갖는다. 함수 스코프를 갖는 경우는 함수 안에 var를 선언했을 때이며, 나머지 경우에서는 전역 스코프를 갖는다. 예를 들어 if문 안에 var로 변수 선언을 해주었다면 let으로 했을 때는 undefined 에러를 만나게 되겠지만 var는 아닌 것이다. var를 쓰면 안 되는 이유 중 가장 큰 이유는 va..