IT/JavaScript (15) 썸네일형 리스트형 Promise Promise A promise is an object that may produce a single value some time in the future JavaScript는 싱글 스레드 언어이다. 싱글스레드인 만큼 한 번에 하나의 작업 밖에 수행할 수 없다는 의미이다. 즉, 처리 시간이 오래 걸리는 동작을 수행하는 동안 다른 동작을 미리 수행 시키고, 동시에 동작이 되는 듯한 느낌을 주는 것이다. 이러한 비동기적 처리를 하기 위해 JavaScript에서는 Promise 를 활용한다. Promise states Promise는 3가지의 상태를 가지고 있다. 상태 는 프로미스의 처리 과정을 의미한다. Pending(대기): 비동기 처리 로직이 아직 완료되지 않았음. Fulfilled(이행): 비동기 처리.. Static Static Class 의 정적 메소드 를 정의한다. class를 new 키워드를 통해 생성하지 않아도 이름을 통해 접근 가능한 정적 메소드 를 정의한다. class Person { // static method static getName() { return "I am person" } } Static method 호출 위에서 설명 했듯이 new 키워드를 통해 생성하지 않아도 class의 이름을 통해 접근 가능하다. class Person { // static method static getName() { return "I am person" } } // I am person console.log(Person.getName()) 이처럼 정적 메서드는 특정 클래스 인스턴스가 아닌 클래스 전체에 필요한 기능.. Optional chaining Optional chaining Optional chaining 연산자(?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않는다. 연결된 객체 체인 내에 존재하는 속성 값을 읽을 수 있다. const user = {} console.log(user.addr.city) // TypeError: Cannot read property "addr" of undefined 위와 같은 상황에서 user 오브젝트 내에 addr 이라는 속성이 없는데 읽는 것을 시도하고 있으므로 에러가 발생한다. 이러한 오류를 방지하기 위해 Optional chaining 을 사용하기 이전에는 && 연산자를 사용했다. const user = {} console.log(user && user.addr && user.addr.cit.. Shallow copy && Deep copy Shallow copy 얕은 복사는 참조(주소)값을 복사한다. const obj = {} obj.a = 10 const newObj = obj newObj.a = 20 console.log(obj.a) // 20 console.log(obj === newObj) // true obj 객체를 새로운 newObj 객체에 할당했다. 하지만 참조 값을 할당했으므로 newObj의 값을 변경하더라도 obj의 값이 변경된다. 또한 === 연산으로 두 객체를 비교한 결과 값이 true 로 나온 것을 확인할 수 있다. 위의 결과로 확인할 수 있는 것은 obj 의 메모리 주소를 newObj가 동일하게 가리키므로 결국 하나의 객체를 공유하고 있는 것이다. Deep copy 깊은 복사는 값 자체를 복사하는 것을 의미한다. c.. Functional programming Pure vs Impure Functions Pure function은 input에 따라 output이 변경되지 않는 값을 내놓는다. 또한 함수 밖의 변수에 영향을 받지 않는다. const add = (a, b) => a + b 위에서 add 함수는 Pure function이다. 함수에서 받는 parameter a와 b에 따라서 항상 a + b 값을 결과로 반환하기 때문이다. const NUMBER = 42 const getNumber = (a) => NUMBER * a 위의 getNumber 함수는 Pure function이 아니다. 바깥의 NUMBER라는 변수의 영향을 받고 있기 때문에 항상 같은 결과값을 반환한다고 보장할 수 없다. 이러한 상황에서 우리가 debug를 할 때 다양한 어려움에 겪을 확.. Prototype Prototype JavaScript는 Prototype 기반 객체지향 프로그래밍 언어이다. ES6에서 Class가 도입되었으나 ES6의 Class가 기존의 Prototype 기반 객체지향 모델을 대체하는 것은 아니다. 사실 Class도 Function이며 기존 Prototype 기반 패턴의 일종이다. Prototype, Class JavaScript는 Class라는 개념이 존재하지 않는다. 대신 Prototype이라는 것이 존재한다. Class라는 개념이 없으므로 상속이란 기능도 존재하지 않는다. 따라서 Prototype을 기반으로 상속을 구현하여 중복을 제거한다. 여기서도 마찬가지로 ES6부터 Class가 도입됐다고 해서 JavaScript가 Class기반으로 바뀌는 것은 아니다. // Constru.. Lexical Environment Lexical Environment Lexical Environment: 실행중인 함수나 스크립트 전체, 혹은 코드블럭은 본인만의 Lexical Environment가 있다. 환경레코드, 외부 렉시컬 환경으로 구성. 환경레코드 지역변수를 객체로 저장. function, this경우 매개변수 포함. function add(a, b) { let number = 1 return a + b + number } add() // 환경레코드 => { number: 1, a: undefined, b: undefined }외부 렉시컬 현재 렉시컬 환경보다 상위의 렉시컬 환경. Script는 최상위 렉시컬 환경. Script 내부에서 호출된 함수나 코드블럭은 외부 렉시컳 환경으로 Scirpt 렉시컬 환경 참조. 렉시컬 환.. 이전 1 2 다음