FE BE 개발 메모장/Javascript
var, let, const 차이점과 TDZ(작성중)
변수 선언 방식 var로 변수를 선언하는 방식에서는 큰 단점을 가지고 있다. var tg1 = '나는 var로 선언된 변수' console.log(tg1) // 나는 var로 선언된 변수 var tg1 = '나는 var로 선언된 변수가 아니다.' console.log(tg1) // 나는 var로 선언된 변수가 아니다. 위의 예제처럼 같은 변수명으로 한번 더 선언을 했음에도 불구하고, 값이 재할당이 되어 출력되는 것을 볼 수 있다. 코드량이 많아지게 된다면 해당 변수가 중복되어 값이 바뀔 우려가 있으며, 어디에 어떻게 쓰이는지 알기 어렵게 된다. 이러한 문제를 보완하기 위해 ES6에서 let과 const를 새로 추가되었다. 이 두 변수 선언방식의 공통점으로는 재선언이 되지 않는 다는 점이다. let or ..
Date 생성자
Date 생성자는 날짜와 시간을 표현하는 객체를 생성한다. Date객체에 내장된 다양한 메서드를 활용하면 날짜와 시간 처리를 간단하게 할 수 있다. 다음과 같이 Date 객체를 생성한다. let now = new Date(); console.log(now) // Wed Mar 17 2021 21:28:32 GMT+0900 (Korean Standard Time) Date 생성자의 인수로 날짜와 시간을 전달하면 그 날짜와 시간을 가리키는 Date 객체가 생성된다. let setDate = new Date(2022, 3, 3); console.log(setDate) // Sun Apr 03 2022 00:00:00 GMT+0900 (Korean Standard Time) Date 객체가 제공하는 주요 메소드..
ES-6 문법 정리
1. 변수(variable) const는 블록 범위이며 값이 지정되면 재선언 되거나 바꿀 수 없는 상수이다.(읽기전용) const variable = 'immutable(Constants), Block Scope' variable = "crytek"// Error let은 블록 범위이며 재선언 및 재할당이 가능하다. let variable = 'mutable, Block Scope' variable = 'Infinity Word' //'Infinity Word' 2. 지역 스코프 변수와 함수 for(let idx of arr){ console.log(idx) } for(let idx = 0; i < arr.length; i++){ let x = arr[idx] } x = 5; console.log(x) ..
구조 분해 할당
만약 함수에 객체나 배열을 전달해야하는 경우가 생기거나, 객체나 배열에 저장된 데이터의 일부만 필요한 경우가 생길 때에 어떤 문법을 사용해야 효과적일지 고민이라면 '구조 분해 할당' 이라는 것을 한번 알아보자 배열 분해 let ramen = ["Jin Ramen", "Shin Ramen"] //구조 분해 할당을 이용해 Aline에는 ramen[0]을 //Bline에는 ramen[1]을 할당했다. let [lineA, lineB] = ramen; console.log(lineA); // Jin Ramen console.log(lineB); // Shin Ramen spread Syntax로 나머지 요소 가져오기 배열 앞쪽에 위치한 값 몇개만 필요하고, 나머지는 한곳에 모아서 저장하고 싶다면, '...' 을..
Promise 메소드들...
Promise 메소드 Promise.all() Promise.all()은 요소 전체가 프로미스인 배열을 받고 새로운 프로미스를 반환한다. 모든 프로미스가 이행될 때 까지 기다렸다가 그 결과값을 담은 배열을 반환하지만, 주어진 프로미스중 하나라도 실패하면, Promise.all이 거부되고, 이행된 결과는 무시한다. let promise = Promise.all([....promises...]) Promise.allSettled() 최근에 추가된 메소드로, 모든 프로미스가 처리될 때까지 기다렸다가 그 결과(객체)를 담은 배열을 반환한다. let urls = [ 'https://api.github.com/users/iliakan', 'https://api.github.com/users/remy', 'https..
JSON에 대하여
JSON이란? JSON(Javascript Object Notation) 은 값이나 객체를 나타내주는 범용 포맷으로, 본래에 자바스크립트에서 사용할 목적으로 만들어졌다. 라이브러리를 사용하면 자바스크립트가 아닌 언어에서도 JSON을 충분히 다룰 수 있다고한다. 그래서 JSON을 데이터 교환 목적으로 사용하는 경우가 많다. 자바스크립트에서 제공하는 JSON 관련 메소드이다. JSON.stringify : 객체를 JSON으로 바꿔줍니다. JSON.parse : JSON을 객체로 바꿔준다. JSON.stringfy mySystem 이라는 객체에 JSON.stringfy를 적용해 보았다. let mySystem = { CPU: 'R7-3700x', RAM: 'DDR4 32GB', VGA: 'RX 6800', P..
async & await
async & await이란? 자바스크립트 비동기처리 방식은 처음에 callback방식을 썼었지만, 가독성이 떨어지고 콜백지옥에 쉽게 빠져 복잡한 코드가 되었기 때문에 그걸 개선한 Promise가 나오게 되었다. 그리고 최근에 Promise와 callback의 단점을 보완하여 나온 비동기처리 방식이 async와 await이다. async & await 기본문법 async 키워드는 항상 function 앞에 위치하여야한다. function 앞에 async가 붙으면 해당 함수는 항상 Promise를 반환하게 된다. async function funcName() { return 1; 또는 return Promise.resolve(1); } funcName().then(alert); // 1 프로미스가 아닌 값..
Promise
프로미스(Promise)란? 자바스크립트 비동기 처리에 사용되는 객체이다. 비동기 처리는 특정 코드의 실행이 완료될 때 까지 기다리지 않고, 다음 코드를 먼저 수행하는 자바스크립트의 특성을 뜻한다. 프로미스 3가지 상태 프로미스(Promise)를 사용할 때 반드시 알아야 하는 개념이 프로미스의 상태(states)이다. 이 상태는 프로미스의 처리 과정을 의미하는데, new Promise()로 프로미스를 생성하고, 종료될 때까지 3가지 상태를 갖는다. Pending(대기) : 비동기 로직이 아직 완료되지 않은 상태 new Promise() 메소드를 호출하면 대기 상태가 된다. new Pormise() 메소드를 호출하게 되면 콜백함수를 선언할 수 있고, 콜백함수는 reslove, reject 두 가지가 있다...