선호:하다

자바스크립트의 클래스 자바스크립트의 클래스는 객체와 관련이 있다. 객체를 직접 작성하여 정의하고 생성할 수 있지만, 클래스를 사용하면 여러 객체를 더 쉽고 빠르게 만들 수 있다. 즉, 클래스는 객체를 생성하기 위한 템플릿이다. 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이기 때문에 클래스란 개념이 존재하지 않았다. 그동안은 프로토타입을 이용하여 클래스를 비슷하게 표현해왔지만 ES6로 업데이트 되면서 클래스 문법이 문법이 추가되었고, 자바스러운 객체지향 프로그래밍을 표현할 수 있게되었다. 다만 생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 동작한다. 프로토타입 문법 // 생성자 function Person({name, age}) { this.name = name; this.a..

자바스크립트의 함수는 호출될 때 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다. 자바스크립트의 this 키워드는 자바에서의 개념과 달라 혼란을 줄 수 있다. 자바에서 this는 인스턴스 자신을 가리키는 참조변수이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같을 경우 이를 구분하기 위해 사용된다. public Class Person { private String name; public Person(String name) { this.name = name; } } 하지만 자바스크립트의 경우 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 함수 호출 방식은 아래와 같이 다양하다. 1. 함수 호출 2. 메소드 호출 3. 생성자 함수 호출 4. a..

클로저 클로저를 쉽게 정의하면 다음과 같이 정의할 수 있다. 클로저란 자신이 생성될 때의 환경을 기억하는 함수이다. 클로저는 자바스크립트 고유의 개념이 아니라 다양한 프로그래밍 언어에서 사용되는 중요한 특성이다. 위 정의에서 말하는 '함수'란 반환된 내부함수를 의미하고 '자신이 생성될 때의 환경'이란 내부함수가 선언됬을 때의 스코프를 의미한다. 즉, 클로저는 반환된 내부함수가 자신이 선언됬을 때의 스코프를 기억하여 해당 스코프 외부에서 호출되어도 해당 스코프에 접근할 수 있는 함수를 말한다. function outer() { var a = 2; function inner() { console.log(a); } return inner; } var func = outer(); func(); // 2 위의 코..

본문에 들어가기 앞서 이벤트 등록에 대해 알고 있어야한다. 아이템 추가 const button = document.querySelector('button'); button.addEventListener('click', addItem); function addItem(event) { console.log(event); } 위 코드는 버튼을 클릭했을 때 addItem이라는 함수가 실행되도록 하는 코드이다. 이와 같이 addEventListener()를 통해 HTML 요소에 동적인 기능을 추가할 수 있게 된다. 여기서 브라우저는 어떻게 이벤트의 발생을 감지하게 되는지 알아보자 이벤트 버블링 - Event Bubbling 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 상위의 화면 요소들..

push() 배열의 끝에 n개의 요소를 넣는다. const numArr = [1, 2, 3, 4, 5]; numArr.push(6, 7, 8); console.log(numArr); // [1, 2, 3, 4, 5, 6, 7, 8] pop() 배열의 마지막 요소를 제거하고 해당 요소를 리턴한다. const numArr = [1, 2, 3, 4, 5]; const popped = numArr.pop(); console.log(popped);//5 console.log(numArr);//[1, 2, 3, 4] unshift() 배열의 앞에 n개의 요소를 넣는다. const numArr = [2, 3, 4]; numArr.unshift(0, 1); console.log(numArr); // [0, 1, 2, ..

JS를 사용하며 배열을 자연스럽게 써왔지만, 배열에 대해 자세히 공부해본 적이 없었다. JS 문법을 기초부터 공부할 기회가 생겨 배열 생성 방법과 배열 메소드들을 정리해보고자 한다. 자바스크립트에서 배열은 배열 리터럴, Array 생성자 함수, Array.of 메서드, Array.from 메서드를 통해 생성할 수 있다. 배열을 생성하는 방법이 4가지나 있기 때문에 각각의 생성 방식과 특징을 제대로 이해해야 목적에 맞는 방법을 선택할 수 있을 것이다. 1. 배열 리터럴 가장 단순하고 직관적인 배열 생성 방식이며 대부분의 브라우저에서 가장 성능이 좋은 배열 생성 방법이다. const a = []; const b = [1, 2, 3]; 배열 내부에서 spread 문법을 사용하여 기존의 배열을 활용한 새로운 배..

얕은 복사(shallow copy) const obj1 = { a: 1, b: 2}; const obj2 = obj1; console.log( obj1 === obj2 ); // true 위의 코드처럼 객체를 직접 대입하는 경우 두 객체가 같은 주소를 가지게 되는 것을 얕은 복사라고 한다. 두 객체는 같은 주소를 참조하기 때문에 한 객체의 프로퍼티를 변경하면 나머지 객체도 같이 변경된다. 깊은 복사(deep copy) 얕은 복사처럼 주소를 복사해서 공유하는 것이 아니라, 객체의 프로퍼티 값들만 복사하는 것을 깊은 복사라고 한다. 따라서 두 객체는 다른 주소를 갖게되어 한 객체의 프로퍼티를 변경하더라도 나머지 객체의 값은 변하지 않는다. 배열의 복사 방법 - 얕은 복사(depth1인 경우 깊은 복사) sp..

fetch() API를 호출하는데 사용되는 자바스크립트 내장 객체 fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); 첫 번째 인자로 API의 URL, 두 번째 인자로 옵션 객체를 받음 옵션 객체에는 HTTP 방식, HTTP 요청 헤더 등을 설정할 수 있음 Promise 타입의 객체를 반환 - API 호출 성공시(then)에는 응답(response)객체를 resolve하고 - 실패했을 경우(catch)에는 예외(error) 객체를 reject함 API 호출 예제 const getData = async () => { const res =..

async & await 콜백 지옥 현상을 해결하기 위해서 프로미스로 비동기 처리를 하더라도 여러 개의 프로미스가 then을 통해 체이닝되며 코드의 가독성이 저하되는 것을 알 수 있다. 이때, async와 await를 사용하여 더욱 편리하고 가독성있는 코드를 작성할 수 있다. async와 await 사용법 함수 앞에 async를 붙이면 해당 함수는 자동적으로 프로미스를 반환하는 함수가 됨 비동기로 처리되는 부분에 await를 붙이면 해당 프로미스가 끝날 때까지 대기 (동기적으로 처리) await은 async가 붙은 함수 안에서만 사용 가능 async 사용 예제 function helloAsync() { return new Promise((resolve) => { resolve("helloAsync"); ..

콜백 지옥 function fn() { setTimeout(() => { console.log('하나'); setTimeout(() => { console.log('둘'); setTimeout(() => { console.log('셋'); }, 0); }, 0); }, 0); } fn(); // 결과 순서 => '하나', '둘', '셋' 자바스크립트는 비동기 처리를 위해 콜백함수를 사용하는데 콜백함수를 반복적으로 사용하는 경우에 콜백 지옥에 빠지게 된다. 콜백 지옥 현상은 코드의 가독성을 떨어뜨리기 때문에 이러한 콜백 지옥을 탈출하기 위해서 프로미스를 사용한다. 프로미스(Promise) 비동기 처리에 사용되는 객체 콜백 지옥 현상이 일어나지 않아 코드의 유지 보수성이 증가 비동기 처리 시점을 명확하게 표..