본문 바로가기
728x90
반응형

JavaScript18

this this자바스크립트에서 this는 함수가 호출될 때, 즉 함수의 실행 문맥에 따라 결정되는 특수한 객체이다.  Global Context전역 문맥전역에서 this를 사용할 때 window 또는 global 객체를 가리킨다. console.log(this) // this 는 window or global 객체이다  Function Context함수 문맥일반 함수 내부에서 this는 호출된 문맥에 따라 다르다.  기본적으로 전역 문맥에서 호출된 함수의 this는 전역 객체를 가리키지만 엄격 모드에서는 this가 undefined로 설정된다. "use strict";function Func(){ console.log(this);}Func(); // undefined  Method Context메서드 문맥객체의.. 2024. 8. 26.
JavaScript #17 고차 함수(High-order Function) 고차 함수고차 함수는 함수형 프로그래밍 개념 중 하나로 함수를 인수로 받거나, 함수를 반환하는 함수를 말한다.코드를 더 모듈화 하고 재사용 가능하게 만들며, 함수 조합과 같은 고급 프로그래밍 기술을 사용할 수 있게 해 준다. 함수를 인수로 받는 고차 함수고차 함수는 다른 함수를 인수로 받아서 호출하거나, 인수로 받은 함수를 내부에서 사용하는 함수이다. 자바스크립트의 내장 메서드 중 'map', 'filter', 'reduce' 등이 이에 해당한다. map배열의 각 요소에 대해 제공된 함수를 호출하고, 그 결과를 새로운 배열로 반환한다.const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map(num => num * 2);console.log(doubled).. 2024. 7. 24.
JavaScript #16 객체지향 프로그래밍(OOP) 객체 지향 프로그래밍(OOP)객체 지향 프로그래밍 (Object Oriented Programming)은 객체를 중심으로 프로그램을 설계하고 구현하는 방법론이다. 자바스크립트에서 OOP는 클래스와 인스턴스, 생성자 함수, 상속 그리고 프로토타입 개념을 통해서 구현된다. 클래스와 인스턴스클래스는 객체를 생성하기 위한 블루프린트 또는 템플릿이다. 클래스는 속성과 메서드를 정의하며, 인스턴스는 클래스를 기반으로 생성된 객체를 의미한다. 클래스ES6 이전에는 자바스크립트에서 클래스를 정의하기 위해 생성자 함수와 프로토타입을 사용했다. 이후에는 'class' 키워드가 추가되어 키워드를 사용하여 클래스를 정의할 수 있게 되었다. 클래스 정의class Person { constructor(name, age) {.. 2024. 7. 23.
JavaScript #15 비동기 자바스크립트 비동기비동기는 시간이 걸리는 네트워크 요청, 파일 읽기 등을 수행할 때 코드의 실행을 차단하지 않고 비동기적으로 처리할 수 있게 해주는 중요한 개념이다. 자바스크립트의 비동기와 관련된 기능들은 웹 애플리케이션을 더 빠르고 반응성이 좋게 동작하게 한다. 콜백 함수콜백 함수는 다른 함수의 인수로 전달되는 함수이다.비동기 작업이 완료되면 호출되며 비동기 작업을 처리하는 가장 기본적인 방법이다.function fetchData(callback) { setTimeout(() => { const data = { id: 1, name: 'John Doe' }; callback(data); }, 1000); // 1초 후에 콜백 함수 호출}fetchData((data) => { .. 2024. 7. 23.
JavaScript #14 ES6+ 문법 ES6+ECMAScript 6부터의 버전에서는 자바스크립트 언어에 여러 유용한 기능들이 추가되었다.  이 중에서도 특히 중요한 템플릿 리터럴, 디스트럭처링 할당, 스프레드 연산자와 나머지 매개변수, 모듈화에 대해서 정리한다. 템플릿 리터럴 (Template Literals)템플릿 리터럴은 백틱을 사용하여 문자열을 작성하며, 문자열 내에 표현식을 포함할 수 있는 기능을 제공한다. 기본 사용법const name = 'Bak';const greeting = `Hello, ${name}!`; // 표현식 ${}을 사용console.log(greeting); // "Hello, Bak!" ${} 표현식을 사용해서 문자열 내에서 직접 변수의 값에 바로 접근할 수 있다. 여러 줄 문자열템플릿 리터럴을 사용하면 여러 .. 2024. 7. 23.
JavaScript #13 DOM(Document Object Model) DOMDOM은 HTML 문서의 구조화된 표현이다. 웹 페이지의 각 요소는 객체로 표현되며, 이 객체들은 트리 구조를 형성한다. DOM을 통해 자바스크립트는 문서의 구조, 스타일, 콘텐츠를 동적으로 변경할 수 있다. 요소 선택DOM 요소를 조작하기 위해서는 먼저 해당 요소를 선택해야 한다.자주 사용되는 두 가지 방법으로 getElementById와 querySelector가 있다. getElementByIdgetElementById 메서드는 문서에서 특정 ID를 가진 요소를 선택한다. ID는 문서 내에서 고유해야 한다. const element = document.getElementById('myElement');console.log(element); // 해당 ID를 가진 요소를 출력 querySelec.. 2024. 7. 23.
728x90
반응형

티스토리툴바