본문 바로가기
반응형

javascript107

[JavaScript 문법 ] 6일차: 함수 기초 함수란?함수는 특정 작업을 수행하는 코드 블록입니다. 코드를 재사용하고, 코드의 구조와 가독성을 개선하는 데 도움이 됩니다.함수 선언함수 선언은 function 키워드를 사용하여 함수를 정의하는 방법입니다. 기본 문법function 함수이름(매개변수1, 매개변수2, ...) { // 실행될 코드}예제function greet(name) { console.log('Hello, ' + name + '!');}greet('Alice'); // 'Hello, Alice!'함수 표현식함수 표현식은 함수를 변수에 할당하는 방법입니다. 기본 문법const 함수이름 = function(매개변수1, 매개변수2, ...) { // 실행될 코드};예제const greet = function(name) { consol.. 2024. 8. 6.
[JavaScript 심화 시리즈] 6일차: JavaScript의 이벤트 루프와 비동기 처리 이해하기 6. 이벤트 루프와 비동기 처리이벤트 루프란 무엇인가?이벤트 루프(Event Loop)는 JavaScript의 비동기 처리를 가능하게 하는 메커니즘입니다. JavaScript는 싱글 스레드 언어이지만, 이벤트 루프를 통해 비동기 작업을 처리할 수 있습니다.이벤트 루프의 동작 방식이벤트 루프는 콜 스택(Call Stack)과 태스크 큐(Task Queue)를 사용하여 작업을 관리합니다.1. 콜 스택콜 스택은 함수 호출을 관리하는 스택입니다. 함수가 호출되면 스택에 푸시(push)되고, 함수 실행이 완료되면 스택에서 팝(pop)됩니다.2. 태스크 큐태스크 큐는 비동기 작업(예: 타이머, 이벤트 리스너 등)이 완료되었을 때 콜백 함수를 저장하는 큐입니다.3. 이벤트 루프이벤트 루프는 콜 스택이 비어 있는지 확.. 2024. 8. 6.
[JavaScript 문법] 5일차: 반복문 반복문이란?반복문은 특정 조건이 참일 때까지 코드 블록을 반복해서 실행하는 구조입니다. JavaScript에서 반복문을 사용하면 반복적인 작업을 자동으로 수행할 수 있습니다.for 문for 문은 가장 일반적인 반복문으로, 반복 횟수가 명확할 때 사용합니다.기본 문법for (초기화; 조건; 증감) { // 반복해서 실행될 코드}예제for (let i = 0; i while 문while 문은 조건이 참인 동안 코드 블록을 반복해서 실행합니다.기본 문법while (조건) { // 조건이 참인 동안 반복해서 실행될 코드}예제let i = 0;while (i do...while 문do...while 문은 코드 블록을 먼저 실행한 후 조건을 평가합니다. 조건이 참인 동안 코드 블록을 반복해서 실행합니다.기본 문.. 2024. 8. 5.
[JavaScript 최신 기능 시리즈] 5일차: JavaScript 클래스와 상속 이해하기 5. 클래스와 상속클래스란 무엇인가?ES6에서 도입된 클래스(Class)는 JavaScript에서 객체 지향 프로그래밍(OOP)을 구현하는 새로운 방법입니다. 클래스는 프로토타입 기반 상속을 더 명확하고 간결하게 작성할 수 있게 해줍니다.클래스 선언클래스를 선언하는 방법은 다음과 같습니다.1. 기본 클래스 선언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.`); }}const alice = new Person('Alice', 30);alice... 2024. 8. 5.
[JavaScript 심화 시리즈] 5일차: JavaScript 모듈과 패키지 관리 이해하기 5. 모듈과 패키지 관리모듈이란 무엇인가?모듈은 코드의 재사용성과 유지보수성을 높이기 위해 코드를 독립적인 단위로 분리한 것입니다. 모듈 시스템을 사용하면 코드의 복잡성을 줄이고, 각 모듈을 개별적으로 개발하고 테스트할 수 있습니다.ES6 모듈ES6에서는 자바스크립트에서 모듈을 표준화하기 위해 import와 export 키워드를 도입했습니다.1. 모듈 생성모듈 파일 math.js를 생성합니다.// math.jsexport function add(a, b) { return a + b;}export function subtract(a, b) { return a - b;}2. 모듈 가져오기다른 파일에서 math.js 모듈을 가져와 사용합니다.// main.jsimport { add, subtract } f.. 2024. 8. 5.
[JavaScript 최신 기능 시리즈] 4일차: JavaScript 화살표 함수 이해하기 4. 화살표 함수화살표 함수란 무엇인가?화살표 함수(Arrow Function)는 ES6에서 도입된 새로운 함수 선언 방식으로, 보다 간결한 문법과 함께 this 바인딩의 차이를 가지고 있습니다. 화살표 함수는 특히 콜백 함수나 간단한 함수를 작성할 때 유용합니다.화살표 함수의 기본 문법화살표 함수는 function 키워드 대신 => (화살표)를 사용하여 선언합니다.1. 기본 문법// 일반 함수function add(a, b) { return a + b;}// 화살표 함수const add = (a, b) => { return a + b;};// 더 간결한 형태 (단일 표현식)const add = (a, b) => a + b;console.log(add(2, 3)); // 출력: 52. 매개변수가 하.. 2024. 8. 4.
[JavaScript 심화 시리즈] 4일차: JavaScript 비동기 프로그래밍: 콜백, 프로미스, async/await 이해하기 4. 비동기 프로그래밍: 콜백, 프로미스, async/await비동기 프로그래밍이란?비동기 프로그래밍은 작업이 완료될 때까지 기다리지 않고, 다른 작업을 계속해서 수행할 수 있도록 하는 프로그래밍 방식입니다. JavaScript는 싱글 스레드 언어이기 때문에 비동기 프로그래밍을 통해 사용자 경험을 향상시킬 수 있습니다.콜백 함수콜백 함수는 비동기 작업이 완료된 후 호출되는 함수입니다. 이는 비동기 작업을 처리하는 기본적인 방법입니다.1. 콜백 함수 예제function fetchData(callback) { setTimeout(function() { let data = "서버에서 가져온 데이터"; callback(data); }, 1000);}function displayData(data) .. 2024. 8. 4.
[JavaScript 기초 시리즈] 4일차: JavaScript 함수와 스코프에 대해 알아보자 4. 함수와 스코프함수란 무엇인가?함수는 특정 작업을 수행하는 코드 블록입니다. 함수를 사용하면 코드의 재사용성을 높이고, 코드를 더 깔끔하고 구조화된 방식으로 작성할 수 있습니다.함수 선언과 호출1. 함수 선언함수를 선언하는 방법은 다음과 같습니다.function sayHello() { console.log("Hello, World!");} 2. 함수 호출함수를 호출하여 실행할 수 있습니다.sayHello(); // 출력: Hello, World! 3. 매개변수와 인수함수는 매개변수를 받을 수 있으며, 호출할 때 인수를 전달할 수 있습니다.function greet(name) { console.log("Hello, " + name + "!");}greet("Alice"); // 출력: Hello.. 2024. 8. 4.
[코딩 테스트] 3일차: 함수와 객체 함수함수는 재사용 가능한 코드 블록으로, 특정 작업을 수행하기 위해 작성됩니다. 함수를 사용하면 코드의 가독성과 재사용성을 높일 수 있습니다.함수 선언과 호출JavaScript에서의 함수 선언과 호출// 함수 선언function greet(name) { return "Hello, " + name + "!";}// 함수 호출let greeting = greet("Alice");console.log(greeting); // "Hello, Alice!"Python에서의 함수 선언과 호출# 함수 선언def greet(name): return "Hello, " + name + "!"# 함수 호출greeting = greet("Alice")print(greeting) # "Hello, Alice!"매개변수와.. 2024. 8. 3.
[JavaScript 최신 기능 시리즈] 3일차: JavaScript 디스트럭처링 할당 이해하기 3. 디스트럭처링 할당디스트럭처링 할당이란 무엇인가?디스트럭처링 할당(Destructuring Assignment)은 배열이나 객체의 값을 개별 변수로 쉽게 추출할 수 있게 해주는 ES6의 새로운 문법입니다. 이 문법을 사용하면 코드의 가독성과 작성 편의성이 크게 향상됩니다.배열 디스트럭처링배열 디스트럭처링을 사용하면 배열의 요소를 개별 변수에 할당할 수 있습니다.1. 기본 배열 디스트럭처링let fruits = ['Apple', 'Banana', 'Cherry'];let [a, b, c] = fruits;console.log(a); // 출력: Appleconsole.log(b); // 출력: Bananaconsole.log(c); // 출력: Cherry2. 기본값 지정배열의 요소가 없는 경우 .. 2024. 8. 3.
반응형

티스토리툴바