본문 바로가기

전체 글127

[JavaScript] 프로퍼티(property) 뿌수기 프로퍼티(property)란?자바스크립트에서 객체엔 프로퍼티(property)가 저장된다.프로퍼티는 객체의 핵심 구성 요소로, 데이터(key, value)와 동작(함수)를 담을 수 있다.객체는 여러 개의 프로퍼티를 가질 수 있으며, 각 프로퍼티는 객체의 특성을 나타낸다.프로퍼티의 종류1. 데이터 프로퍼티 (Data Property)일반적인 키-값 형태의 프로퍼티로, 값을 읽거나 쓸 수 있다.const obj = { name: "John", // 키: "name", 값: "John" age: 30, // 키: "age", 값: 30 isStudent: false // 키: "isStudent", 값: false};console.log(obj.name); // "Jo.. 2024. 12. 11.
[JavaScript] Generator Function / 제너레이터 함수 Generator 함수 ES6에서부터 도입된 Generator 함수는 일반 함수와는 다르게 실행을 중간에 멈추거나 다시 시작할 수 있는 특수한 함수다. 이 함수는 끝에 별표가 있는 function* 키워드로 정의되며, yield 키워드를 사용하여 실행을 중단하거나 값을 반환할 수 있다. Generator 함수는 이터레이터(Iterator)를 생성하며, 호출 시 바로 실행되지 않고 이터레이터에 객체를 반환한다. 이후 next(), return(), throw()와 같은 인스턴스 메서드를 호출하여 단계적으로 실행을 제어한다. .next() : yield 표현식을 통해 yield 된 값을 반환한다..return() : 주어진 값을 반환하고 제너레이터를 종료한다. .next() : 제너레이터에 오류를 발생시킨다.. 2024. 12. 11.
[JavaScript] Class Class는 왜 나왔는가?ES6 이전에는 클래스 대신 프로토타입 체이닝을 통해 클래스 비스무리하게 구현해 왔었다.이후 ES6 버전에서 클래스가 추가되며 객체 지향 프로그로그래밍에서 사용되는 다양한 기능을 자바스크립트에서 사용할 수 있게 되었다. (엔진 내부적으로는 프로토타입 방식으로 작동되지만)1) 객체 지향 프로그래밍(Object-Oriented Programming)이란?객체 지향 프로그래밍이란 하나의 모델이 되는 청사진(blueprint)( = 클래스 Class)을 만들고, 그 청사진을 바탕으로 한 객체( = 인스턴스 Instance)를 만드는 프로그래밍 패턴을 말한다.* 클래스(Class)일종의 원형(original form)으로, 객체를 생성하기 위한 아이디어나 청사진을 말한다. 클래스명은 보통.. 2024. 12. 10.
[JavaScript] async 와 await / try...catch문 Async 와 Await의 등장Promise를 사용하여 콜백지옥에서 벗어난 줄 알았지만, then도 여러번 반복될 경우 콜백지옥과 비슷한 현상이 발생한다.이러한 현상에서 벗어나기 위해 ES2017에서 비동기 처리를 더욱 간결하게 구현할 수 있는 async와 await라는 문법이 도입되었다.'async'라는 키워드를 함수 앞에 붙여 비동기 함수라 선언하고, 'await'라는 키워드를 Promise 앞에 붙여 결과가 나올때까지 기다리도록 만든다.  즉, 동기적 처리방식인 자바스크립트에서 비동기 처리를 위해 async를 사용해 비동기 함수를 병렬적으로 실행하고 이를 await로 동기적으로 출력하는 것이다. await는 async 함수 안에서만 사용되며, Pormise가 이행될 때까지 기다리는 것이기 때문에 실.. 2024. 12. 10.
함수를 인라인으로 만든다 / 인라인 함수 함수를 인라인으로 만든다 "함수를 인라인으로 만든다"는 말은 함수를 선언하거나 정의하는 대신, 그 함수의 내용(혹은 로직)을 직접 코드에 삽입하는 것을 의미한다다. 즉, 함수 호출 대신 함수의 로직을 직접 사용하는 방식이다. 1. 인라인 함수의 기본 개념자바스크립트에서 "인라인으로 만든다"는 말은 주로 함수를 별도로 정의하지 않고 그 함수를 호출하는 자리에서 바로 함수 내용을 작성하는 것을 말한다. 2. 함수 정의 후 호출 (일반적인 함수 사용)// 함수 정의function sayHello(name) { console.log("Hello, " + name);}// 함수 호출sayHello("Alice"); 위 예시를 보면 sayHello()라는 함수가 먼저 정의되고, 그 다음 호출된다.위와 같은 방식으.. 2024. 12. 9.
[JavaScript] Promise, 자바스크립트 비동기 처리기 자바스크립트가 동기적으로 처리되기 때문에 비동기 처리를 위해 Promise를 사용한다는 것은 알았다.이제, Promise를 사용하는 방법과 async, await를 왜 사용하는지에 대해 알아보자. Promise란?Promise는 비동기 작업의 성공 또는 실패한 결과를 담고있는 객체이다.함수에 콜백을 전달하는 대신에 콜백을 첨부하는 방식으로 사용되는 것이다. 이 비동기 함수는 실행하기 전까지 단순 값을 담고 있기 때문에 아래 세 가지 상태를 가질 수 있다.1. 대기(Pending) :  비동기 함수가 아직 시작하지 않은 초기 상태2. 성공(Fulfilled) : 비동기 함수가 성공적으로 완료된 상태3. 실패(Rejected) : 비동기 함수가 실패한 상태 실행되기 전 Promise는 대기상태로 큐(대기열).. 2024. 12. 6.

티스토리툴바