Study/JavaScript

[JavaScript_study] 렉시컬 환경(Lexical Environment)

* 실행 컨텍스트(Execution Context) 코드의 실행 순서와 스코프를 기억 자바스크립트 런타임안에 Call Stack이 있는데 Call Stack를 통해서 하나하나씩 코드의 실행순서를 기억한다. 자바스크립트는 단 하나의 싱글 컨텍스트 스택이 있다. 한번에 하나의 일만 처리 할 수 있다. * 어떻게 블럭안에 데이터가 있는지 없는지 확인하고 그리고 근접한 부모의 스코프를 찾는걸까??? 이유는 각각의 블록은 렉시컬 환경(Lexical Environtment)라는 내부 오브젝트를 가지고 있다. 그래서 각각 블럭 마다 어떤 변수들이 들어있는지 부모는 누구인지에 대한 정보를 가지고있는 오브젝트가 있다. 실행순서와 각각의 블럭에 대한 정보들을 한 오브젝트안에 데이터를 담아둔다. * 렉시컬 환경 내부 환경 ..

[JavaScript_study] 가비지 컬렉션 (garbage collection)

* 가비지 컬렉션 (garbage collection)이란? 메모리 관리 기법 중의 하나로, 프로그램이 동적으로 할당했던 메모리 영역 중에서 필요없게 된 영역을 해제하는 기능이다. C언어는 개발자가 직접 메모리를 관리를 해야함 C#, GO, JAVA, JavaScript는 우리가 메모리 관리를 해줄 필요가 없다. 다 쓴 메모리도 우리가 직접 청소해줄 필요가 없다. Garbage Collection(GC)이 있기 때문이다. 어떤 경우에 메모리가 그대로 남아있는지 어떤경우에 GC에 의해서 나의 메모리가 정리되는지 알고 있어야 효율적인 메모리 어플리케이션을 만들 수 있다. GC는 object를 참고하고 있는 사람이 있는지 없는지 확인을 하고 있다가 아무도 해당 object를 가지고 있지 않다면 쓰레기로 간주해..

[JavaScript_study] 스코프(Scope)

* 스코프(Scope) 변수를 참조할 수 있는 유효한 범위 // 식별자(변수, 함수, 클래스 이름)가 유효한 범위 선언된 위치에 따라 유효 범위가 결정됨 { } 블럭 안의 변수는 블럭 안에서만 유효 scope가 존재하는 이유?? 1.이름 충돌 방지 2.메모리 절약 변수는 최대한 필요한 곳에서 정의해야 한다. 코드 블럭: { }, if() { }, for() { }, function() { } * 스코프(Scope)예시 코드 블럭 외부에서는 블럭 내부의 변수를 참조할 수 없다. 함수 외부에서는 함수 내부의 변수를 참조할 수 없다. 함수 외부에서는 함수의 매개변수를 참조할 수 없다. // 블럭 외부에서는 블럭 내부의 변수를 참조할 수 ❌ { const a = 'a'; } console.log(a); cons..

[JavaScript_study] fetch api

* fetch api 사용법 fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject합니다. fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); * fetch api 특징 브라우저 api중 하나이다. 비동기의 대표적인 api이다. 서버와 통신할 수 있는 api이다. .json()메서드는 이름은 .json이지만 실제로는 Ob..

[JavaScript_study] JSON: JavaScript Object Notation

* JSON (JSON: JavaScript Object Notation) 서버와 클라이언트(브라우저, 모바일) 간의 HTTP 통신을 위한 오브젝트 형태의 텍스트 포맷 오브젝트를 JSON으로 변환할 수 있고 JSON을 오브젝트로 변환할 수 있다. stringify(object): JSON // object를 JSON형태로 변경 직렬화 Serializing: 객체를 문자열로 변환 parse(JSON): object // JSON을 object로 변경 역직렬화 Deserializing: 문자열 데이터를 자바스크립트 객체로 변환 function은 JSON안에 포함 되지 않는다. 객체의 property만 포함된다. * JSON 예시 코드 const poodle = { name: 'latte', age: 20, ..

[JavaScript_study] async/await

* async/await async 와 await 는 절차적 언어에서 작성하는 코드와 같이 사용법도 간단하고 이해하기도 쉽다. function 키워드 앞에 async만 붙여주면 되고 함수 내부에서는비동기로 처리되는 부분 앞에 await만 붙여주면 된다. async가 붙은 함수는 프로미스를 반환하고, 프로미스가 아닌 것은 프로미스로 감싸 반환한다. await 키워드를 만나면 프로미스가 처리(settled)될 때까지 기다린다. 그리고 프라미스가 처리가 완료되어 resolve(값) 되면 값만 따로 추출해서 리턴한다. await는 promise.then보다 좀 더 세련되게 프라미스의 result 값을 얻을 수 있도록 해주는 문법이다. promise.then보다 가독성 좋고 쓰기도 쉽다. 그냥 값을 return해..