반응형 자바스크립트102 [JavaScript 문법] 22일차: 콜백 함수 콜백 함수란?콜백 함수(Callback Function)는 다른 함수에 인수로 전달되어 나중에 호출되는 함수입니다. 비동기 작업을 처리하거나, 특정 이벤트가 발생할 때 실행되는 코드를 정의하는 데 유용합니다.콜백 함수의 기본 개념콜백 함수는 특정 작업이 완료되었을 때 호출되는 함수입니다. JavaScript에서는 주로 비동기 작업에서 콜백 함수를 사용합니다.예제: 콜백 함수 사용function fetchData(callback) { setTimeout(() => { let data = 'Fetched Data'; callback(data); }, 1000);}function displayData(data) { console.log(data);}fetchData(displayData); /.. 2024. 8. 22. [JavaScript 문법] 21일차: 디자인 패턴 심화 옵저버 패턴옵저버 패턴(Observer Pattern)은 객체의 상태 변화를 관찰하는 옵저버들이 그 변화를 감지하고, 필요에 따라 행동하는 패턴입니다. 주로 이벤트 핸들링 시스템에서 많이 사용됩니다.예제class Subject { constructor() { this.observers = []; } addObserver(observer) { this.observers.push(observer); } removeObserver(observer) { this.observers = this.observers.filter(obs => obs !== observer); } notifyObservers(message) { this.observers.forEach(observer =.. 2024. 8. 21. [JavaScript 문법] 20일차: 디자인 패턴 디자인 패턴이란?디자인 패턴(Design Pattern)은 소프트웨어 설계에서 자주 발생하는 문제를 해결하기 위한 재사용 가능한 솔루션입니다. 디자인 패턴은 코드의 재사용성, 가독성, 유지보수성을 높이는 데 도움이 됩니다. 이번 글에서는 싱글톤 패턴, 팩토리 패턴, 모듈 패턴에 대해 알아보겠습니다.싱글톤 패턴싱글톤 패턴(Singleton Pattern)은 하나의 클래스에 오직 하나의 인스턴스만 존재하도록 보장하는 패턴입니다. 주로 애플리케이션의 전역 상태를 관리하는 데 사용됩니다.예제class Singleton { constructor() { if (!Singleton.instance) { this.value = Math.random(); Singleton.instance = t.. 2024. 8. 20. [JavaScript 문법] 19일차: 객체 지향 프로그래밍 심화 클래스란?클래스는 객체를 생성하기 위한 템플릿입니다. 클래스는 속성과 메서드를 정의하며, 이를 통해 객체를 생성하고 조작할 수 있습니다. JavaScript에서는 ES6부터 class 키워드를 사용하여 클래스를 정의할 수 있습니다. 예제class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); }}let person1 = new Person('Alice', 25);person1.greet(); // 'Hello, my name is Alice and.. 2024. 8. 19. [JavaScript 문법] 18일차: 객체 지향 프로그래밍 객체 지향 프로그래밍이란?객체 지향 프로그래밍(Object-Oriented Programming, OOP)은 데이터를 객체라는 단위로 묶어 프로그래밍하는 패러다임입니다. OOP의 핵심 개념은 캡슐화, 상속, 다형성, 추상화입니다. 객체 지향 프로그래밍을 사용하면 코드의 재사용성, 유지보수성, 가독성을 높일 수 있습니다.캡슐화캡슐화(Encapsulation)는 객체의 데이터를 외부로부터 보호하고, 객체의 내부 상태를 외부에서 직접 접근하지 못하도록 하는 것입니다. 이를 통해 데이터의 무결성을 유지하고, 객체의 내부 구현을 숨길 수 있습니다.예제class Person { constructor(name, age) { this._name = name; // _를 붙여서 프라이빗 속성임을 나타냄 th.. 2024. 8. 18. [JavaScript 문법] 17일차: 함수형 프로그래밍 함수형 프로그래밍이란?함수형 프로그래밍(Function Programming)은 프로그램의 구성 요소를 순수 함수로 작성하고, 상태와 가변 데이터를 최소화하며, 데이터를 변환하는 방식을 강조하는 프로그래밍 패러다임입니다. 이는 코드의 가독성을 높이고, 오류를 줄이며, 테스트와 유지보수를 용이하게 만듭니다.순수 함수순수 함수(Pure Function)는 동일한 입력에 대해 항상 동일한 출력을 반환하며, 외부 상태를 변경하지 않는 함수입니다. 예제function add(a, b) { return a + b;}console.log(add(2, 3)); // 5불변성불변성(Immutability)은 데이터가 변경되지 않음을 의미합니다. 함수형 프로그래밍에서는 데이터의 불변성을 유지하는 것이 중요합니다. 예제c.. 2024. 8. 17. [JavaScript 문법] 16일차: 고차 함수 고차 함수란?고차 함수(Higher-Order Function)는 다음 중 하나를 만족하는 함수입니다:함수를 인수로 받을 수 있는 함수.함수를 반환할 수 있는 함수.고차 함수는 함수형 프로그래밍에서 중요한 역할을 하며, 코드의 재사용성을 높이고 가독성을 개선하는 데 유용합니다.콜백 함수콜백 함수는 다른 함수의 인수로 전달되어 실행되는 함수입니다.예제function greet(name) { console.log('Hello, ' + name);}function processUserInput(callback) { let name = 'Alice'; callback(name);}processUserInput(greet); // 'Hello, Alice'배열 고차 함수JavaScript의 배열 메서드는 고.. 2024. 8. 16. [JavaScript 문법] 15일차: this 키워드 이해하기 this 키워드란?this 키워드는 함수가 호출될 때, 해당 함수가 속한 객체를 참조합니다. this의 값은 함수가 어떻게 호출되었는지에 따라 달라집니다.전역 문맥에서의 this전역 문맥에서는 this는 전역 객체를 참조합니다. 브라우저 환경에서는 전역 객체가 window입니다.예제console.log(this); // window 객체함수 문맥에서의 this일반 함수에서는 this가 전역 객체를 참조합니다. 엄격 모드에서는 undefined를 참조합니다.예제function showThis() { console.log(this);}showThis(); // window 객체 (엄격 모드에서는 undefined)메서드 문맥에서의 this메서드 내부에서는 this가 해당 메서드를 호출한 객체를 참조합니다... 2024. 8. 15. [JavaScript 문법] 14일차: 모듈 모듈이란?모듈은 코드의 일부를 독립적으로 분리하여 재사용 가능하게 만드는 방법입니다. 모듈을 사용하면 코드의 유지보수와 관리가 용이해집니다. ES6에서는 import와 export 키워드를 사용하여 모듈을 정의하고 사용할 수 있습니다.모듈 정의모듈은 파일 단위로 정의되며, export 키워드를 사용하여 모듈 외부로 내보낼 수 있습니다.기본 내보내기 (default export)기본 내보내기는 모듈 당 하나만 가질 수 있으며, export default 키워드를 사용합니다.예제: math.js// math.jsexport default function add(a, b) { return a + b;}예제: main.js// main.jsimport add from './math.js';console.log.. 2024. 8. 14. [JavaScript 문법] 13일차: 맵과 셋 Map 객체Map 객체는 키-값 쌍을 저장하며, 키의 타입에 제한이 없습니다. 객체와 달리 Map은 삽입 순서를 기억합니다.Map 생성Map 객체는 new Map()을 사용하여 생성할 수 있습니다.let map = new Map();요소 추가set 메서드를 사용하여 요소를 추가할 수 있습니다.map.set('name', 'Alice');map.set('age', 25);console.log(map); // Map { 'name' => 'Alice', 'age' => 25 }요소 접근get 메서드를 사용하여 요소에 접근할 수 있습니다.console.log(map.get('name')); // 'Alice'console.log(map.get('age')); // 25요소 삭제delete 메서드를 사용하여 요.. 2024. 8. 13. 이전 1 2 3 4 5 6 7 8 ··· 11 다음 반응형