log_J

💡 async ? await ? ES2017에 도입된 비동기 처리 문법 Promise 로직을 더 쉽고 간결하게 사용할 수 있게 도와준다. Promise를 대체하는 기능은 아니고 보이는 문법을 다르게 하여 가독성을 높히고 유지보수가 편리하게끔 만든 문법 ✔ 사용법 function 키워드 앞에 async / 비동기 처리 앞에 await 를 붙여 사용한다. 1) async async를 붙인 함수는 promise를 리턴하는 비동기 함수가 된다. async를 붙인 함수의 return 값은 promise의 resolve 함수의 argument와 같다. /* 함수 선언식 */ async function helloAsync() { return 'hello Async' } /* 함수 표현식 */ const helloAs..

💡 콜백 지옥 (Callback Hell) ? 자바스크립트는 비동기 작업을 처리할 때, 콜백 함수를 사용한다. 만약, 비동기 작업의 결과를 가지고 콜백 내부에서 또다른 콜백 함수를 사용한다면 어떻게 될까? 위 사진처럼 콜백의 콜백이 중첩되면서 코드의 가독성이 나빠지고 유지보수도 어려워진다. 이러한 문제를 "콜백 지옥" 이라고 한다. 그렇다면 위 코드처럼 콜백지옥에서 벗어나려면 어떻게 해야하는 걸까? 💡 Promise Promise는 비동기 처리에 사용되는 객체이다. 콜백 패턴이 가진 단점을 보완하고 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. ✔ Promise의 3가지 상태 프로미스는 비동기 작업의 결과를 약속한다. 프로미스 객체를 생성하면, 비동기 작업은 진행중이거나, 성공하거나, 실패..

구조 분해 할당 (Destructuring Assignment) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식 비 구조화 할당 이라고도 부른다. 배열 : Index를 활용한 구조 분해 할당 객체 : Property의 Key값을 활용한 구조 분해 할당 배열의 구조분해 #1. 기본문법 var/let/const [변수명1, 변수명2] = [할당값1, 할당값2]; let [a,b] = [10,20]; console.log(a); // 10 console.log(b); // 20 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 대입한다. 동일한 Index를 가지는 변수명에 분해되는 배열의 해당 Index 값이 할당된다. 예를들어 위 코드의 a,b값을 서로 바꾸..

Truthy와 Falsy Javascript의 조건식에서는 Boolean 값이 아니어도 True 또는 False로 인식되는 값들이 있다. Truthy : 참 같은 값 빈 배열 [ ] 빈 객체 { } 0이 아닌 Number ( 42, -42, Bigint, float...) Infinity 비어 있지 않은 String ("0", "false"...) Falsy : 거짓 같은 값 null undefined NaN 0 , -0 비어 있는 String ("") Boolean 값이 아니어도 true, false로 인식되는 Truthy, Falsy 한 값들을 사용해 논리연산자에서 단락회로평가가 발생하는 연산에 대해 알아보자. 단락회로평가(Short Circuit Evaluation)란? 💡 논리연산자 사용 시 피연..

객체(Object)란? Javascript는 객체기반 스크립트 언어로 javascript를 이루고 있는 거의 모든 것은 객체이다. 객체(Object) : 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입 ❤️ 객체의 특징 중괄호를 사용해서 선언 { } 객체 내에는 key-value 쌍으로 자료를 넣을 수 있다. key-value로 묶인 한 쌍을 객체 property(프로퍼티) 라고 명명한다. 객체 프로퍼티는 개수 제한이 없다. key는 문자열로만 구성될 수 있으며, 따옴표를 쓰지 않는다. value에는 어떤 자료형이든 들어갈 수 있다. 객체를 복사하면 참조가 복사되고 객체는 복사되지 않는다. 객체 선언방법 1. 객체 리터럴 const person = { name : "oneyenee", a..

배열(Array)이란? 배열 (Array) : 이름과 인덱스로 참조되는 정렬된 값의 집합 요소 (Element) : 배열을 구성하는 각각의 값 인덱스 (Index) : 배열에서의 위치를 가리키는 숫자 배열의 특징 Element의 타입이 고정되어 있지 않다. Element끼리 타입이 서로 다를 수 있다. 배열 요소의 Index가 연속적이지 않아도 된다. 특정 배열 요소는 비어 있을 수도 있다. Array 객체로 다뤄진다. 배열 선언 방법 1. 대괄호 [ ] 를 사용하여 선언 const arr1 = []; const arr2 = ['apple', 'banana', 'kiwi']; 대괄호를 이용해 빈 배열을 생성할 수도 있고, 배열을 선언할 때 초기값을 설정해 줄 수도 있다. 2. new Array() 사용하..

💡 화살표 함수(Arrow Function) ES6부터 도입된 문법. function 키워드를 사용해 함수를 만드는 것보다 간단하게 함수를 표현할 수 있음 화살표 함수는 함수표현법을 조금 더 간결하게 쓰는 방법에 가깝다. // 함수 표현식 let hello = function() { return "안녕하세요"; } // 화살표 함수 let hello = () => "안녕하세요"; 화살표 함수의 문법 매개변수 매개변수가 한 개 일때는 소괄호 생략이 가능. 매개변수가 없거나 여러개일 땐 소괄호 생략 불가능. // 매개변수가 없을 경우 () => {...} // 매개변수가 한 개 일때, 소괄호 생략 가능 x => {...} // 매개변수가 여러 개 일때, 소괄호 생략 불가능 (x,y) => {...}​ 코드 ..

Javascript 함수란? 어떤 목적을 가진 작업들을 수행하기 위해 모인 코드들의 블럭 입력 -> 연산 -> return -> 출력 형태를 갖는다. 함수는 실제로는 또 하나의 객체(Object)로 변수나 배열에 할당시킬 수 있다. 함수를 변수에 할당 시킬 수 있다는 말은 무엇일까? 자바스크립트에서 함수를 선언하는 방법에 대해서 알아보자 함수 선언식 function hello() { return "안녕하세요" } hello(); // "안녕하세요" function 키워드를 사용해 함수를 선언한다 function 함수명 (파라미터) { return }; return이 불필요할 땐 생략 가능 함수 선언식으로 선언한 함수는 호이스팅이 발생한다. (호이스팅에 대한 설명은 관련 글이 아니기 때문에 생략) hell..

💡 형 변환(Type Conversion) : 프로그래밍에서 자료형을 다른 형태로 변경하는 것. 명시적 형 변환 사용자가 원하는 형태로 직접 데이터의 타입을 변경하는 것 # 1. to String String( ) 어떤 형태든 문자로 형변환 가능 (null, undefined ... ) String(111) // "111" String(Undefined) // "Undefined" String(NaN) // "NaN" String(true) // "true" ( ).toString() 2~36 사이의 값을 대입하면 숫자를 해당 진수로 변환한 문자열을 얻을 수 있음 일반적으론 인자없이 사용해서 문자열을 얻음 String()과 달리 null, undefined를 .toString() 할 경우 오류 발생 le..

자바스크립트의 자료형 원시타입? 비원시 타입? 원시타입(Primitive Data Type) : 값이 하나인 자료형. 변수에 값(value) 자체가 담긴다. 비원시 타입(Non-Primitive Data Type) : 여러 값을 한번에 담고 있는 자료형. 변수에 값는 담고 있는 보관함의 주소(reference)가 담긴다. 원시타입 자료형 (Primitive Data Type) # 1. 숫자형 (Number) 숫자형 데이터. 소수형, 정수형 등 따옴표없이 수학 연산이 가능한 모든 숫자 데이터는 Number타입으로 간주한다. 64bit 부동소수점으로 관리됨. 사실상 내부적으론 실수형으로 관리하고 있음. Infinity, -Infinity, NaN과 같은 형태도 숫자형으로 분류 NaN(Not a Number)..