티스토리

기록
검색하기

블로그 홈

기록

yjh5166.tistory.com/m

정구 님의 블로그입니다.

구독자
0
방명록 방문하기

주요 글 목록

  • Map과 Set(JavaScript) Map 객체는 키와 값을 한 쌍으로 이루어진 컬렉션이다. Map 객체는 Map 생성자 함수로 생성한다. const map = new Map(); Map 객체는 데이터를 추가할 때 Map.prototype.set 메서드를 사용한다. // map 선언 const map = new Map(); // map 값 추가 #1 map.set('key1', 'value1'); map.set('key2', 'value2'); // map 값 추가 #2 map .set('key1', 'value1') .set('key2', 'value2'); console.log(map); // Map(2) { 'key' => 'value', 'key2' => 'value' } 또한, 중복된 키가 있을 때는 Map 객체에 새로운 키가 저.. 공감수 0 댓글수 0 2022. 2. 21.
  • 반복문(Loop / JavaScript) forEach() forEach 반복문은 배열에 사용하기 좋다. var arr = [10, 20, 30]; arr.forEach(function(value, index) { console.log('array index: ' + index + ' value : ' + value); }); 위 코드의 결과는 다음과 같다. array index: 0 value : 10 array index: 1 value : 20 array index: 2 value : 30 for in for in 반복문은 배열과 객체에 모두 사용할 수 있다. Vue.js의 v-for 디렉티브의 모티브가 되는 문법이기도하다. var arr = [10, 20, 30]; var obj = { num: 10, str: 'hi', arr: [],.. 공감수 0 댓글수 0 2022. 2. 21.
  • 옵셔널 체이닝(Optional Chaning / ?.) 옵셔널 체이닝 문법으로 객체의 속성 값이 유효한지 검증할 수 있고, 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 옵셔널 체이닝은 왜 필요할까? 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. 명세서에 옵셔널 체이닝이 추가되기 전에 이런 문제를 해결하기 위해 && 연산자를 사용하곤 했다. let user = {}; /.. 공감수 0 댓글수 0 2022. 2. 21.
  • 널 병합 연산자(Nullish coalescing operator / ??) 널 병합 연산자(Nullish coalescing operator)는 연산자(??)의 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. function printTitle(text) { let title = text ?? 'Cracking Vue.js'; console.log(title); } printTitle('Crack'); // Crack printTitle(); // Cracking Vue.js 논리 연산자 OR(||)과의 차이점은 OR은 null과 undefined를 포함한 0, '', NaN의 경우에도 falsy한 값으로 취급을 한다. function getCount(count) { return coun.. 공감수 0 댓글수 0 2022. 2. 21.
  • 개체 참조 및 복사 객체를 복사하면 '참조에 의해' 저장된다. 객체에 할당된 변수는 객체 자체가 아니라 '메모리의 주소' 즉 '참조'를 저장한다. 다음 코드를 살펴보자. const test = { a: 1, b: 2, c: 3 }; let test2 = test; delete test2.c; console.log(test2); console.log(test); 다음과 같이 test 객체의 값을 test2로 복사한 후 test2.c의 값을 delete 시켰다. 그리고 test2와 test를 각각 찍어보자. test2의 값을 할당할 때 있는 그대로 값을 복사하는 것이 아니라 메모리의 주소를 참조하기 때문에 test2의 데이터를 변경하면 test의 데이터에도 영향을 끼친다. 객체 변수가 복사되면 참조는 복사되지만 객체 자체는 복.. 공감수 0 댓글수 0 2022. 2. 21.
  • 비동기 프로그래밍에 관하여 - 3. async / await Promise를 사용하면 체이닝을 통해 순차적으로 코드를 수행할 수 있다. 다만, 체이닝이 길어지고 복잡해진다면 코드 가독성이 떨어질 수 있다. async와 await를 사용하면 마치 동기식 코드를 짜는거 마냥 간편하게 코드를 작성할 수 있다. async / await은 새로운 기능을 추가하는 것이 아니라 기존의 promise에서 간편한 api를 제공한다. 이와 같이 기존에 존재하던 기능 위에 편리한 기능을 감싸서 사용하는 것을 syntactic sugar라고 한다. 사람이 프로그래밍 언어를 조금 더 '달콤하게' 이해하기 쉽고 간결하게, 명확하게 도와주는 문법이라고 생각하면 될 것같다. async와 & await은 promise를 보다 깔끔하게 사용할 수 있는 방법이다. 그렇다고해서 promise가 나쁘.. 공감수 0 댓글수 0 2022. 2. 21.
  • 비동기 프로그래밍에 관하여 - 2. 프로미스(Promise) promise란 한국말로는 약속이다. 뜬금없이 무엇을 약속한다는 것일까? MDN에 정의된 promise의 설명은 다음과 같다. Promise는 프로미스가 생성된 시점에는 알려지지 않을수도 있는 값을 위한 대리자이다. 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 갑슬 반환할 수 있다. 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에서 결과를 제공하겠다는 '약속(promise)'를 반환한다. promise는 자바스크립트에서 제공하는, 비동기를 간편하게 처리할 수 있도록 도와주는 '오브젝트'이다. promise는 정해진 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행되었다면, 성공 메세지와 .. 공감수 0 댓글수 0 2022. 2. 21.
  • 비동기 프로그래밍에 관하여 - 1. 콜백(Callback) 자바스크립트는 동기적(synchronous)이다. 호이스팅이 된 이후 순차적으로 코드가 실행된다. 정해진 순서대로 코드가 실행되기 때문에 예측가능하다. 반대로 비동기적(asynchoronous)이라는 것은 언제 코드가 실행될 지 예측할 수 없다는 뜻이다. 가장 대표적인 예로 WebAPI인 setTimeout()가 있다. console.log(1); setTimeout(function () { console.log(2); }, 1000); console.log(3); setTimeout은 비동기적 함수이기 때문에 해당 함수를 처리할 때 까지 기다리는 것이 아니라 바로 다음 라인으로 넘어가서 코드를 실힝하게 되었다. 그리고 setTimeout안에 function() {console.log(2)}와 같이 어떤.. 공감수 0 댓글수 0 2022. 2. 21.
  • 화살표 함수(Arrow Function) 1. 화살표 함수의 선언 화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. 화살표 함수의 기본 문법은 아래와 같다. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다. // 함수 몸체 지정 방법 x => { return x * x } // single line block x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다. () => { .. 공감수 0 댓글수 0 2022. 2. 21.
  • 스코프에 관하여 (var, let, const) JS에서 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드는 다음과 같은 특징이 있어 주의를 기울여 사용하지 않으면 문제를 일으킨다. 1. 함수 레벨 스코프(Funtion-level Scope) 함수 단위의 블록 스코프만이 인정이 되어 지역 변수로 사용이 가능하다. 이 외의 변수는 모두 전역 변수가 되는 것이고, 이는 전역 변수를 남발할 가능성을 높힌다. 단적인 예로 for문의 변수 선언문에서 생성한 변수 또한 전역 변수로 생성이 되어 블록 외부에서 참조할 수 있다. var a = 0; for(var i=0; i 공감수 0 댓글수 0 2022. 2. 21.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.