안녕, 반가워 안녕, 반가워

자바스크립트로 웹 통신을 하는 코드를 작성하려면 비동기 실행을 다루어야 한다. 비동기 처리를 하기 위해서는 Promise 객체와 async/await 구문 등에 대한 이해가 필수적이다. 들어가기전에 동기 실행과 비동기 실행의 의미에 대해 이해하고 Promise 객체에 대해 공부해보도록 하자. 🔖 동기 실행의 의미 동기(Synchronous) 실행의 경우, 한번 시작한 작업을 완벽하게 완료할 때까지 다음 코드가 실행하지 않는다. 예제 코드에서 fetch 함수가 동기 실행을 한다고 가정한다면 전체 코드의 실행 순서는 다음과 같다. console.log('시작'); fetch 함수(리퀘스트 보내기) 리스폰스가 올 때까지 코드 실행이 잠시 '정지'되고, 리스폰스가 오면 필요한 처리 수행 console.log('..

자바스크립트 배열 메서드 [2편] 배열 요소 추가 메서드 📋 원본 배열을 수정! 불변성 깨트림 💔 ⚪ push() 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다. ⚪ unshift() 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다. ⚪ splice() 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. array.splice(startIndex, deleteCount, item1, item2, ...); ☑️ startIndex (배열의 변경을 시작할 인덱스) ☑️ deleteCount (배열에서 제거할 요소의 수 / 옵션 요소) ☑️ item1, item2, ... (배열에 추가할 요소 / 옵션 요소) > 참고 및 출처 :..

자바스크립트 배열 메서드 [1편] 배열 요소 삭제 메서드 📋 원본 배열을 수정! 불변성 깨트림 💔 ⚪ pop() 배열에서 마지막 요소를 제거하고 그 요소를 반환한다. ⚪ shift() 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환한다. 이 메서드는 배열의 길이를 변하게 한다. ⚪ splice() 메서드 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. array.splice(startIndex, deleteCount, item1, item2, ...); ☑️ startIndex (배열의 변경을 시작할 인덱스) ☑️ deleteCount (배열에서 제거할 요소의 수 / 옵션 요소) ☑️ item1, item2, ... (배열에 추가할 요소 / 옵션 요소) 📋 원..

👀 얕은 복사와 깊은 복사 도대체 무슨 말인지 이해가 안가요!?!? 우리가 아는 복사라는 단어의 뜻은 원본을 copy한다. 예를 들어 종이를 복사하게 되면 원본 종이가 그대로 존재하고, 복사본 종이가 생기는 것이다. 바탕화면에 '안녕'이라는 폴더를 복사하면 '안녕_복사본' 폴더가 생기는 것이다. 이해를 돕기 위해 간단한 예를 들어 들어 보았다. 깊은 복사란 우리가 알고 있는 복사의 개념이고, 얕은 복사란 덮어쓰기 되었다 라고 생각하면 이해하기 수월 할 것 같다. 📋 얕은 복사 Shllow Copy 얕은 복사는 바로 아래 단계의 값만 복사는 방법 📋 깊은 복사 Deep Copy 깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법 📔 얕은 복사와 깊은 복사에 대해 왜 이해를 하고 넘어가야 할..

Set 객체 Set 객체는 ES6에서 등장한 중복을 제거한 값들의 집합이다. 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있다. Set 객체 선언 // 매개변수 있을 경우 const iterable = [ 1, 2, 3, 3, 3, 4, '4', '안녕', ('이호', '35'), { 'a' : 1 }, 2, ]; let mySet = new Set(iterable); // 매개변수 없을 경우 let mySet = new Set(); 매개변수에 반복 가능한 객체가 전달된 경우, 그 요소는 모두 새로운 Set에 추가가 된다. 만약 매개변수를 명시하지 않거나 null을 전달하면, 새로운 Set은 비어 있는 상태가 된다. Set 객체 사용 1️⃣ add (특정 요소 추가 메서드) ad..

자바스크립크의 선언에는 var, let, const 딱 3가지 방법만 있다. 📌 ES6 문법부터 let, const 추가 됨 📋 변수 변수란 프로그램을 실행하는 도중에 임의의 값을 저장해 두고 읽을 수 있는 가상 공간을 말한다. 즉, 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇이라고 생각하면 된다. 📋 변수 선언 기본적인 변수 선언하는 방법이 아래와 같다. var a; "변할 수 있는 데이터를 만든다. 이 데이터의 식별자는 a로 한다." 📎 var var 는 변수를 선언하고, 선택적으로 초기화할 수 있다. ☑️ 변수 중복 선언 가능 ☑️ 변수 재할당 가능 ☑️ 함수 레벨 스코프 (function-level scope) ☑️ 변수 호이스팅 발생이 let과 const 와 다른 방식으로 작동 ☑️ va..

호이스팅(Hoisting) 함수와 관련된 여러 가지 성질들 중 호이스팅에 대해 알아보자. hoist 사전적 의미: 끌어올리다 무엇을 끌어올리느냐??? 변수 '선언'과 함수 '선언' 을 끌어 올린다. 호이스팅은 선언과 밀접한 관련이 있다. 자바스크립트 엔진은 코드를 실행하기 전 단계로 코드 전반에 걸쳐 선언된 내용들이 있는지 전체를 훑어 보고 발견하게 되면 위로 끌어 올린다. 함수 선언문은 통째로 올라가는 반면에 함수 표현식은 선언만 끌어 올렸다. 할당은 해당 사항이 아니다. 함수 선언문은 그 자체로 하나의 선언인 반면에 var b = 로 시작하는 문장들은 선언과 할당이 한 문장에 이루어 지고 있는 것으로 분리가 가능하다. 📌 함수 선언문과 함수 표현식 참고사이트 https://developer.mozil..

자바스크립트 데이터 타입 자바스크립트의 데이터 타입은 상대적으로 유연하다. 상황에 따라 데이터 타입이 변할 수 있다는 특징을 가지고 있다. 데이터 타입은 기본형과 참조형이 있고, 다음과 같은 종류가 있다. ✏️ 기본형과 참조형의 차이점에 대해 알아보자. 우리는 변수를 선언하고 할당하는데 두 타입의 대표적인 차이점은 다음과 같다. 👀 값이 그대로 할당된다는게 뭐예요? 실제 메모리 저장 공간은 두 개의 표처럼 별개의 저장 공간을 가지는 것은 아니다. 실제로 메모리에 값이 어떻게 저장되는지 이해를 돕기 위해 주소와 데이터로 구성된 아래 표로 표현하여 흐름 파악을 위한 추상화를 해보았다. Step1 변수 a를 선언하면 실제 메모리는 데이터를 담을 공간을 미리 확보한다. 아래와 같이 임의로 201 공간을 확보했다..