개발언어/JavaScript
-
JavaScript - nullish coalescing(널 병합)/ Optional Chaining개발언어/JavaScript 2023. 4. 15. 16:06
ES2020에서 추가된 ?? (널 병합(nullish coalescing)) 연산자와 ?. (옵셔널 체이닝(optional chaining)연산자 이다. 널 병합 연산자 &&(and)연산자 ture 값 일때 뒤로 넘어간다. const a1 = 'a' const b1 = a1 && 3; console.log(b1);//3 const a2 = 0 const b2 = a1 && 3; console.log(b1); //0 널 병합 연사자는 주로 ' || ' 연산자 대용으로 사용되며, falsy 값 (0, ' ' , false, NaN, null, undefined) 중 null과 undefined만 따로 구분한다. const a = 0; const b = a || 3; // ||연산자는 falsy값이면 뒤로 ..
-
NodeJS - NodeJS 실행을 위한 JavaScript 문법2개발언어/JavaScript 2022. 12. 26. 18:29
Promise Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. Promise는 프로미스가 생성된 시점에는 알수 없을 지도 모르는 값의 대리자로 비동기 연산이 종료된 이후에 결과값 과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 프로미스를 사용하면 비동기 메서드를 마치 동기 메서드가 반환하듯 값을 반환할 수 있다. 다만, 최종결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'을 반환한다. 프로미스는 다음중 하나의 상태를 가진다. 프로미스는 다음과 같은 규칙이 있다 먼저 프로미스 객체를 생성해야 한다. const condition = true; // true며 resolve, false면 reject const promise =..
-
JavaScript - 프로토타입 체인개발언어/JavaScript 2022. 12. 26. 14:25
프로토타입 객체도 또 다시 상위 프로토타입 객테로부터 메소드와 속성을 상속 받을 수 있고 그 상위 프로토타입 객체도 마찬가지이다. 이를 **프로토타입 체인(prototype chain)**이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이다. 정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 protorype이라는 속성에 정의되어 있다. JavaScript에서 객체 인스턴스와 프로토타입 간의 연결(많은 브라우저들이 생성자의 prototype 속성에서 파생된 __proto__속성으로 객체 인스턴스를 구현하고 있다.)이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색한다. 프로토타입 체인 const myObjec..
-
JavaScript - 프로토타입개발언어/JavaScript 2022. 12. 23. 16:21
프로토타입(protorype) 프로토타입은 원래 형태 쪼는 전형적인 예, 기초 또는 표준이다. 프로토타입 기반 언어 JavaScript는 프로토타입 기반 언어이다. 프로토 타입 기반 언어는 클래스 기반 언어에서 상속을 사용하는 것과 다르게, 객체를 원형(프로토타입)으로 하는 복제 과정을 통해 객체의 동작방식을 재사용 할 수 있게 한다. 그렇다면 JavaScript도 복제를 할까? 자바스크립트는 약간 다를다 복제가 아니라 프로토타입 링크를 통해 원형을 참조한다. 자바스크립트 객체의 프로토타입 링크 프로토타입 링크를 설명하려면, 우선 JavaScript의 객체에 대해 먼저 알아야한다. JavaScript에서 단순 원시 타입(simple primitive)인 문자열,숫자,불리언,null,undefined를 제..
-
JavaScript - 함수 바인딩개발언어/JavaScript 2022. 12. 23. 14:39
함수 바인딩 setTimeout에 메서드를 전달할 때 처럼, 객체 메서드를 콜백으로 전달할 때 'this 정보가 사라지는' 문제가 생긴다. 사라진 'this' 객체 메서드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라진다. setTimeout을 사용한 아래 예시에서 this가 어떻게 사라지는지 살펴보자 let user = { firstName: "John", sayHi() { alert(`Hello,${this.firstName}!`); }, }; setTimeout(user.sayHi, 1000); // Hello, undefined! this.firstName은 "John"이 되어야 하는데, alert창엔 undefined가 출력된다. 이런 현상이 나타나는 이유는 setTimeout..
-
JavaScript - 메서드와 this개발언어/JavaScript 2022. 12. 22. 17:25
메서드와 this 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여한다. 메서드 만들기 let user = { name: "John", age:30 }; user.sayHi = function(){ alert("안녕하세요!"); } user.sayHi(); //안녕하세요! 메서드는 아래와 같이 이미 저의된 함수를 이용해서 만들수도 있다. let user = { //... } //함수선언 function sayHi(){ alert("안녕하세요"); }; // 선언된 함수를 메서드로 등록 user.sayHi = sayHi; user.sayHi(); //안녕하세요 메서드 단축 구문 객체 리터럴 안에 메서드를 선언할 때 사용할 수 있는 단축 문법 //아래 두 객체는 동일하게 ..
-
JavaScript - 객체개발언어/JavaScript 2022. 12. 22. 14:15
JavaScript 객체를 만드는 방법 let user = new Object(); // '객체 생성자 '문법 let user = {}; //'객체 리터럴 문법' 중괄호{...}를 이용해서 객체를 선언하는 것을 객체 리터럴(object literal)이라고 부른다. 객체를 선언할 때 주로 이방법을 사용한다. 리터럴과 프로퍼티 delete 연산자 delete 연산자를 사용하면 프로퍼티를 삭제할 수 있다. delete user.age; 여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 프로퍼티 이름에 따옴표로 묶어 주어야 한다. let user = { name:"John", age: 30, "likes birds": true //복수의 단어는 따옴표로 묶어야 한다. }; 상수 객체는 수정될 수 있다. cons..
-
async와 await 그리고 유용한 Promise APIs개발언어/JavaScript 2022. 6. 10. 15:59
async / await promise를 계속 chaining하다 코드가 지저분해 지기 쉽상이다. 이런 것 위에 좀더 간편한 api로 async와 await을 사용하면 promise를 좀더 간편하고 간결하게 사용할 수 있게 해주고, promise가 좀 더 동기적으로 실행되는 것 처럼 보일 수 있도록 해준다. async와 await 새로운 것이 추가된 것이 아니라 기존에 존재하는 promise 위에 조금더 간편한 api를 제공하는 것이다. 이렇게 기존에 존재하는 것 위에 또는 기존에 존재하는 것을 감싸서 조금더 간편한 api를 제공하는 것을 syntatic sugar라고 한다. 예) JavaScript에서 class는 전혀 새로운 것이 아니라 prototype을 기본으로한 syntatic sugar이다. ..