Prototype(프로토타입) JavaScript에서 프로토타입은 다른 객체를 만들기 위한 청사진 역할을 하는 객체다. 이는 JavaScript 객체 지향 프로그래밍의 필수 부분으로, 프로토타입에서 속성과 메소드를 상속하는 객체를 생성할 수 있다. 이 상속 메커니즘을 프로토타입 상속이라고 한다. 프로토타입 객체는 두 가지 기본 용도로 사용된다. 상속: 객체는 프로토타입에서 속성과 메소드를 상속할 수 있다. 코드 재사용성: 프로토타입을 사용하여 공유 속성 및 메소드를 정의하여 코드 중복을 줄일 수 있다. 이 개념을 이해하기 위해 생성자 함수와 프로토타입을 사용하여 간단한 예제를 만들어보자. // Car 객체를 생성하기 위한 생성자 함수 function Car(make, model, year) { this...
$(달러 사인) 변수 작명법 인터넷 강의를 통해 공부하던 중에 DOM조작할 시에 한개의 태그를 가져올때는 $(달러사인) 한개를 사용하고, 여러개의 태그를 가져올 때는 $ 두개를 사용해서 변수명을 작명하는 것을 본 적이 있다. const $list = document.querySelector('li'); const $$list = document.querySelectorAll('li'); 강사는 위의 예시처럼 변수명을 주로 작명한다고 했다. 가독성도 좋고 사용할 때 편할 것 같다고 느꼈다. 그래도 혹시나 사용하는데에 문제가 있을까 찾아봤다. 변수명에 $ 기호를 사용하는 것은 JavaScript 언어 자체에서 문법적인 오류를 일으키지 않으므로, 기술적으로는 문제가 없다. 그러나 보통 jQuery 라이브러리에..
?. (Optional Chaining) Optional Chaining은 객체 내부의 속성에 접근할 때 속성이 존재하지 않아서 TypeError가 발생하는 것을 방지하기 위해 도입된 연산자다. 만약 속성이 존재하지 않는다면 undefined를 반환하고, 그렇지 않은 경우에는 해당 속성에 접근한다. const user = { name: 'John', address: { city: 'Seoul', country: 'South Korea' } }; console.log(user.address?.city); // 'Seoul' console.log(user.address?.state); // undefined && (Logical AND) AND 연산자는 왼쪽 피연산자와 오른쪽 피연산자 모두가 true일 경우..
아래 메소드들은 원본 배열을 변경하지 않고 새로운 배열을 반환하는 불변성을 지키는 메소드들이다. Array.prototype.concat() 배열을 병합하여 새 배열을 반환한다. const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const newArray = array1.concat(array2); console.log(newArray); // [1, 2, 3, 4, 5, 6] Array.prototype.filter() 주어진 함수의 테스트를 통과한 요소로 이루어진 새로운 배열을 반환한다. const array = [1, 2, 3, 4, 5]; const filteredArray = array.filter(num => num % 2 === 0); console..
아래 메소드들은 원본 배열을 변경하는 메소드들이다. Array.prototype.pop() 배열에서 마지막 요소를 제거하고 해당 요소를 반환한다. const array = [1, 2, 3]; const poppedElement = array.pop(); // 3 console.log(array); // [1, 2] Array.prototype.push() 배열 끝에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환한다. const array = [1, 2]; const newLength = array.push(3, 4); // 4 console.log(array); // [1, 2, 3, 4] Array.prototype.reverse() 배열의 순서를 뒤집는다. const array = [1, 2..
스코프 스코프는 자바스크립트에서 스코프(scope)는 변수와 함수의 유효 범위를 결정한다. 즉, 변수나 함수가 어디에서부터 접근 가능한지를 결정하는 것이다. 전역 스코프(Global Scope) 전역 스코프는 어떤 함수나 블록에도 속하지 않는 최상위 스코프다. 전역 스코프에서 선언된 변수와 함수는 어디서든 접근이 가능하다. const globalVar = 'global variable'; // 전역 스코프에서 선언된 변수 function globalFunction() { // 전역 스코프에서 선언된 함수 console.log(globalVar); // 'global variable' 출력 } globalFunction(); 지역 스코프(Local Scope) 지역 스코프는 특정 함수나 블록 내부에서 선언..
map arr.map(callback(currentValue[, index[, array]])[, thisArg])Copy currentValue : 처리할 현재 요소 index (Optional) : 처리할 현재 요소의 인덱스 array (Optional) : map()를 호출한 배열 thisArg (Optional) : callback을 실행할 때 this로 사용할 값 map()은 배열의 각 요소에 대해 지정된 함수를 호출하고, 반환된 값을 사용하여 새로운 배열을 생성한다. 따라서 map()을 사용하면 기존 배열과 길이가 같은 새로운 배열을 생성하며, 이 새로운 배열의 각 요소는 기존 배열의 각 요소를 변환한 값이 된다. const arr = [1, 2, 3, 4]; const mappedArr = ..
async & await 사용 이유 async & await 은 기존의 비동기처리 방식의 문제점들을 보완하면서도 사용법이 훨씬 간단하다. Promise 코드 function p() { return new Promise((resolve, reject) => { resolve('hello'); // or reject(new Error('error'); }); } p().then((n) => console.log(n)); async 코드 async function p2(){ // async을 지정해주면 Promise를 리턴하는 함수로 만들어준다. return 'hello'; } p2().then((n) => console.log(n)); 이처럼 async를 사용하면 promise 코드를 훨씬 직관적으로 나타낼..
Promise 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 콜백 패턴의 단점 콜백 헬 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 태스크는 대기하게 된다. 예를 들어 서버에서 데이..
클로저(closure) 개념 클로저(closure)는 자바스크립트에서 중요한 개념 중 하나다. 클로저는 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(Functional Programming language: 얼랭(Erlnag), 스칼라(Scala), 하스켈(Haskell), 리스프(Lisp)…)에서 사용되는 중요한 특성이다. 클로저는 자바스크립트 고유의 개념이 아니므로 ECMAScript 명세에 클로저의 정의가 등장하지 않는다. 클로저에 대해 MDN은 아래와 같이 정의하고 있다. “A closure is the combination of a function and the lexical environment within which that function was d..
