'use strict';는 자바스크립트에서 코드를 엄격 모드(strict mode)로 실행하는 것입니다. 'use strict';를 사용하면 선언하지 않은 변수를 사용할 수 없으며, 변수 및 함수를 삭제할 수 없는 등 자바스크립트 엔진에 보다 엄격한 기준이 적용됩니다. 선언하지 않은 변수는 사용할 수 없는 것이 원칙입니다. 그러나 다음 예시에서 보듯 x는 var, let, const 의 키워드를 통해 선언되지 않았기 때문에 에러가 발생할 것 같지만, 실제로는 자바스크립트 엔진이 전역 객체에 프로퍼티를 생성하여 5가 출력됩니다. function foo() { x = 5; } foo(); console.log(x); // 5 이처럼 자바스크립트 엔진은 변수가 키워드를 통해 생성되지 않은 경우, 암묵적 전역(..

자바스크립트에서 함수를 호출하면 함수가 바로 실행됩니다. 그러나 setTimeout과 setInterval을 사용해 함수 실행을 조정할 수 있습니다. 자바스크립트 엔진은 싱글 스레드로, 타이머 함수는 비동기 처리 방식으로 작동합니다. setTimeout setTimeout은 특정 시간이 지난 뒤 함수를 호출합니다. 첫 번째 인자에 실행할 함수를, 두 번째 인자에 지연 시간, 이후 순서의 인자에는 필요한 인자를 전달할 수 있습니다. setTimeout(() => console.log('Hello!'), 1000); setTimeout(date => console.log(`Today: ${date}`), 1000, '2020-11-07'); setInterval setInterval은 특정 간격으로 함수를 ..

프로토타입이란? 프로토타입(prototype)은 프로토타입 객체의 줄임말로 자바스크립트에서 상속을 구현하는 방식입니다. 모든 객체에는 하나의 프로토타입이 존재하며, 이는 모두 생성자 함수와 연결되어 있습니다. 프로토타입을 통해 자식 객체는 부모 객체의 프로퍼티를 자유롭게 사용할 수 있습니다. function Person (name) { this.name = name; } Person.prototype.age = 31; const person = new Person("Hwi"); console.log(person.age); // 31 프로토타입 체인 자바스크립트는 객체의 프로퍼티에 접근했으나 해당 프로퍼티가 존재하지 않는다면, 해당 객체의 부모 역할을 하는 프로토타입의 프로퍼티를 탐색합니다. 이러한 계층 ..

객체 지향 프로그램이란 각 객체의 집합으로 프로그램을 구성하는 방법을 의미합니다. 이는 전통적인 명령형 프로그래밍의 절차 지향적 관점을 벗어나는 것입니다. 객체 지향의 의미와 추상화 객체 지향 프로그래밍은 사람이 실생활의 사물이나 개념을 인식하는 방법을 '추상화(asbstraction)'를 통해 구현합니다. 여기서 추상화란 현실 세계의 특정 객체(예를 들면, 자동차)의 여러 속성 중에서 프로그램에 필요한 속성(예를 들면, 차량 모델, 번호판, 가격 등)을 추출해 내는 것을 의미합니다. // 차량번호AA6301, 가격 54000불, 테슬라3 차량의 추상화 const car = { model: tesla3 number: AA6301 price: 54000 }; 객체 지향 프로그램에서는 각 객체의 상태 데이터..

call과 apply 메소드는 기본적으로 함수를 호출하는 역할을 합니다. 그렇다면 기존 함수 호출과 차이점은 무엇일까요? 바로 해당 메소드를 사용해 함수를 '실행'하면, 함수의 첫 번째 인자로 전달하는 객체에 this 를 '바인딩'할 수 있다는 것입니다. 이를 통해 유사 배열 arguments 객체에 배열 메서드를 사용할 수 있습니다. 반면, bind는 첫 번째 인자를 this에 바인딩하지만 함수를 '실행하지 않으며', 새로운 함수를 반환합니다. call call을 사용하면 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this를 바인딩합니다. function logName (a, b, c) { console.log(this.name); console.log(a + b + c); } const p..

자바스크립트 this란 대체 무엇일까요? 그리고 this를 이해하는 일은 유독 어려운 것일까요? 이번 포스팅에서는this의 정의와 바인딩에 대해 살펴보도록 하겠습니다. this의 정의 this는 '자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수'다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. 이웅모 저 정의를 자세히 살펴보면 중간에 '또는'이라는 표현이 사용된 것을 볼 수 있습니다. 이는 this가 고정된 값에 바인딩되지 않기 떄문입니다. this는 '함수가 호출되는 방식'에 따라 '동적'으로 결정됩니다. this라는 대명사를 키워드로 사용한 것도 이러한 맥락에서 이해해볼 수 있습니다. this 의 이해 그렇다면 이러한 ..

객체 생성자 함수란? 객체 생성자 함수란 객체의 인스턴스를 생성하는 함수입니다. new 연산자를 사용해 다음과 같이 빈 객체를 생성할 수 있습니다. const car = new Object();이처럼 생성자 함수를 통해 생성한 객체를 인스턴스라 합니다. 다음과 같이 생성한 인스턴스에 프로퍼티나 메소드를 추가할 수도 있습니다. car.name = 'K5'; car.start = function () { console.log('Starting up the engine'); }; console.log(car.start()); // Starting up the engine.자바스크립트에는 객체 뿐만 아니라 문자열, 숫자, 불리언, 함수 등을 생성자 함수를 통해 생성할 수 있습니다. ..

HTML에서 div 요소를 중앙 정렬해야 할 때가 있습니다. div 내 콘텐츠는 text-align 을 통해 정렬할 수 있지만, div 자체를 페이지 내 중앙으로 정렬하려면 약간의 트릭이 필요합니다다. 1. 다음과 같이 position: abosulte와 left, top 및 transform 속성을 사용하면 요소를 화면 가운데로 정렬할 수 있습니다. See the Pen Div Element Align Center by Jeong (@jeongKR) on CodePen. 2. flex 속성을 이용한 중앙 정렬도 가능합니다. flex 속성에 대한 자세한 내용은 이곳에 정리해보았습니다. .container { display: flex; justify-content: center; align-items: c..