자바스크립트
자바스크립트 프로토타입이란?
프로토타입이란? 프로토타입(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, bind 설명
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라는 대명사를 키워드로 사용한 것도 이러한 맥락에서 이해해볼 수 있습니다. this 의 이해 그렇다면 이러한 ..
자바스크립트 for... in 구문 정리
자바스크립트 for... in 구문은 객체의 키 및 속성 값을 반환하는 데 사용할 수 있으며, 다음과 같은 형태로 반복할 객체의 프로퍼티를 받을 변수를 선언하여 사용한다. (예제 출처는 MDN). const object = { a: 1, b: 2, c: 3 }; for (const property in object) { console.log(`${property}: ${object[property]}`); } // 출력값 // "a: 1" // "b: 2" // "c: 3" 한 가지 주의할 점은 for.. in 구문은 임의의 순서로 객체 속성을 반복한다는 것이다. for... in 구문은 특정 순서에 따른 값 반환을 보장하지 않는다. 따라서 배열 반복에는 사용하지 않는 것이 좋으며, 객체의 속성을 확인하..
자바스크립트 기본 개념 공부 내용 정리
1. 자바스크립트 기초 자바스크립트란? 자바스크립트 변수란? 자바스크립트 데이터 유형 자바스크립트 표현식과 연산자 자바스크립트 논리 연산자 2. 자바스크립트 함수 자바스크립트 함수란? 자바스크립트 화살표 함수 자바스크립트 고차 함수란? 자바스크립트 returing과 mutating이란? 자바스크립트 스코프란? 자바스크립트 함수 호이스팅이란? 3. 자바스크립트 객체와 메소드 자바스크립트 배열 속성 및 메소드 자바스크립트 객체란? 자바스크립트 객체 인스턴스란? 자바스크립트 map이란? 4. 자바스크립트 조건문 자바스크립트 if 조건문이란? 5. 자바스크립트 반복문 자바스크립트 for ... in 구문 정리 자바스크립트 do while 반복문이란? 6. 자바스크립트 이해 객체 지향 프로그래밍이란? 자바스크립트..
자바스크립트 호이스팅이란?
자바스크립트에서 호이스팅(hoisting)이란 무엇일까? 호이스팅을 이해하려면 스코프의 개념과 전역 변수, 지역 변수의 의미를 이해해야 한다. 이번 포스팅에서는 변수 호이스팅과, var, let, const 키워드의 사용, 함수 호이스팅에 대해 정리해 보려 한다. 자바스크립트 변수 호이스팅 자바스크립트는 기본적으로 위에서 아래로 차례차례 코드를 실행해 간다. 따라서 변수를 선언하기 전에, 변수를 호출하면 오류가 발생해야 한다. 그러나 자바스크립트의 호이스팅 기능은 모든 변수 선언문이 해당 스코프의 최상단으로 끌어 올려 처리한다. console.log(bear); // undefined bear = "A market is in bearish trend."; console.log(bear); // "A ma..
Returing과 Mutating 차이점 (정리 중)
returning과 mutating의 차이를 보자. 아래의 push 메소드는 기존의 배열을 mutating 하고, 값도 return한다. let pets = [ {name: "Meowsalot", species: "cat", age: 2}, {name: "Barksalot", species: "dog", age: 3}, {name: "Purssloud", species: "cat", age: 8} ] pets.push({name: "Puppster", species: "dog", age: 1}) console.log(pets); returing은 새로운 배열을 반환하는 것이고 mutating은 기존의 배열을 변화시키거나 수정하는 것이다. 그러나 push와 다르게 mutating하지 않는 메소드가 있다. ..
