본문 바로가기

Web-Frontend/JavaScript

 (13)
[JS] 자바스크립트의 클래스 자바스크립트의 클래스 자바스크립트의 클래스는 객체와 관련이 있다. 객체를 직접 작성하여 정의하고 생성할 수 있지만, 클래스를 사용하면 여러 객체를 더 쉽고 빠르게 만들 수 있다. 즉, 클래스는 객체를 생성하기 위한 템플릿이다. 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이기 때문에 클래스란 개념이 존재하지 않았다. 그동안은 프로토타입을 이용하여 클래스를 비슷하게 표현해왔지만 ES6로 업데이트 되면서 클래스 문법이 문법이 추가되었고, 자바스러운 객체지향 프로그래밍을 표현할 수 있게되었다. 다만 생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 동작한다. 프로토타입 문법 // 생성자 function Person({name, age}) { this.name = name; this.a..
[JS] 함수 호출 방식과 this 바인딩 자바스크립트의 함수는 호출될 때 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다. 자바스크립트의 this 키워드는 자바에서의 개념과 달라 혼란을 줄 수 있다. 자바에서 this는 인스턴스 자신을 가리키는 참조변수이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같을 경우 이를 구분하기 위해 사용된다. public Class Person { private String name; public Person(String name) { this.name = name; } } 하지만 자바스크립트의 경우 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 함수 호출 방식은 아래와 같이 다양하다. 1. 함수 호출 2. 메소드 호출 3. 생성자 함수 호출 4. a..
[JS] 클로저(Closure)란? 클로저 클로저를 쉽게 정의하면 다음과 같이 정의할 수 있다. 클로저란 자신이 생성될 때의 환경을 기억하는 함수이다. 클로저는 자바스크립트 고유의 개념이 아니라 다양한 프로그래밍 언어에서 사용되는 중요한 특성이다. 위 정의에서 말하는 '함수'란 반환된 내부함수를 의미하고 '자신이 생성될 때의 환경'이란 내부함수가 선언됬을 때의 스코프를 의미한다. 즉, 클로저는 반환된 내부함수가 자신이 선언됬을 때의 스코프를 기억하여 해당 스코프 외부에서 호출되어도 해당 스코프에 접근할 수 있는 함수를 말한다. function outer() { var a = 2; function inner() { console.log(a); } return inner; } var func = outer(); func(); // 2 위의 코..
[JS] 이벤트의 전파와 흐름 (이벤트 버블링, 캡처링, 위임) 본문에 들어가기 앞서 이벤트 등록에 대해 알고 있어야한다. 아이템 추가 const button = document.querySelector('button'); button.addEventListener('click', addItem); function addItem(event) { console.log(event); } 위 코드는 버튼을 클릭했을 때 addItem이라는 함수가 실행되도록 하는 코드이다. 이와 같이 addEventListener()를 통해 HTML 요소에 동적인 기능을 추가할 수 있게 된다. 여기서 브라우저는 어떻게 이벤트의 발생을 감지하게 되는지 알아보자 이벤트 버블링 - Event Bubbling 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 상위의 화면 요소들..
[JS] 자바스크립트 배열 메소드 정리 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를 사용하며 배열을 자연스럽게 써왔지만, 배열에 대해 자세히 공부해본 적이 없었다. JS 문법을 기초부터 공부할 기회가 생겨 배열 생성 방법과 배열 메소드들을 정리해보고자 한다. 자바스크립트에서 배열은 배열 리터럴, Array 생성자 함수, Array.of 메서드, Array.from 메서드를 통해 생성할 수 있다. 배열을 생성하는 방법이 4가지나 있기 때문에 각각의 생성 방식과 특징을 제대로 이해해야 목적에 맞는 방법을 선택할 수 있을 것이다. 1. 배열 리터럴 가장 단순하고 직관적인 배열 생성 방식이며 대부분의 브라우저에서 가장 성능이 좋은 배열 생성 방법이다. const a = []; const b = [1, 2, 3]; 배열 내부에서 spread 문법을 사용하여 기존의 배열을 활용한 새로운 배..
[JS] 배열, 객체 복사 방법 얕은 복사(shallow copy) const obj1 = { a: 1, b: 2}; const obj2 = obj1; console.log( obj1 === obj2 ); // true 위의 코드처럼 객체를 직접 대입하는 경우 두 객체가 같은 주소를 가지게 되는 것을 얕은 복사라고 한다. 두 객체는 같은 주소를 참조하기 때문에 한 객체의 프로퍼티를 변경하면 나머지 객체도 같이 변경된다. 깊은 복사(deep copy) 얕은 복사처럼 주소를 복사해서 공유하는 것이 아니라, 객체의 프로퍼티 값들만 복사하는 것을 깊은 복사라고 한다. 따라서 두 객체는 다른 주소를 갖게되어 한 객체의 프로퍼티를 변경하더라도 나머지 객체의 값은 변하지 않는다. 배열의 복사 방법 - 얕은 복사(depth1인 경우 깊은 복사) sp..
[JS] fetch 메소드로 API 호출하기 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 =..

티스토리툴바