JavaScript
-
[Javascript] 제너레이터, generator웹/JavaScript 2023. 1. 13. 18:55
제너레이터 generator function* genFunction () { console.log('하나를 반환합니다.'); yield '하나'; console.log('둘을 반환합니다.'); yield '둘'; console.log('셋을 반환합니다.'); yield '셋'; } const genFunc = genFunction(); // 반복 수행해 볼 것 // 💡 아래의 코드가 블록의 코드에 대한 제어권을 가짐 console.log( genFunc.next() ); 함수 내 코드들을 모두 실행하지 않고 외부 호출자에게 제어권을 양도 - "계속할까요?" 이터러블과 이터레이터를 보다 간결하게 구현 가능 👉 MDN 문서 보기 I. 기본 사용법 1. 제너레이터 함수/메서드 선언 function ..
-
[Javascript] Set, Map웹/JavaScript 2023. 1. 13. 18:24
중복되지 않는 값들의 집합 표준 내장 객체 중 하나 💡 배열과의 차이: 동일한 값을 여러 번 포함할 수 없음 값들의 순서가 무의미함 I. 기본 사용법 // Set 생성 const set1 = new Set(); // add 메서드 - 요소 추가 set1.add(1); set1.add('A'); set1.add(true); console.log(set1); // 이미 포함된 요소는 추가하지 않음 set1.add(1); set1.add(true); console.log(set1); // 배열을 인자 넣으면 생성 + 초기화 // 중복된 요소 제거 const set2 = new Set([1, 1, 1, 'A', true]); console.log(set2); // has 메서드 - 요소 포함여부 ..
-
[Javascript] Symbol웹/JavaScript 2023. 1. 13. 17:46
다른 값과 절대 중복되지 않는 유일무이한 값 원시 타입 👉 MDN 문서 보기 👉 MDN 문서 보기 (영문 - 더 자세한 정보) I. 기본 생성과 활용 const mySymbol = Symbol(); console.log(typeof mySymbol, mySymbol); // 💡 new를 사용하지 않음 const mySmbol = new Symbol(); // ⚠️ 오류 발생! 문자열 값을 인자로 줄 수 있음 해당 심벌에 대한 설명일 뿐, 각 심벌의 값은 유일무이 const symbol1 = Symbol('hello'); const symbol2 = Symbol('hello'); console.log(symbol1, symbol2); // 래퍼 객체(Symbol)의 인스턴스 프로퍼티 console...
-
[Javascript] 프로퍼티 어트리뷰트, getOwnPropertyDescriptor,defineProperty,getDeepFrozen웹/JavaScript 2023. 1. 13. 09:07
I. 프로퍼티 어트리뷰트 property attributes 객체의 프로퍼티가 생성될 때 엔진에 의해 자동 정의되는 상태 💡 프로퍼티에는 두 종류가 있음 const person = { // ⭐️ 1. 데이터 프로퍼티들 fullName: '홍길동', ageInNumber: 25, // ⭐️ 2. 접근자 프로퍼티들 get name () { return this.fullName .split('') .map((letter, idx) => idx === 0 ? letter : '*') .join(''); }, get age () { return this.ageInNumber + '세'; }, set age (age) { this.ageInNumber = Number(age); } } console.lo..
-
[Javascript] Object, assign, key, values, entries, preventExtensions, seal, freeze, isFrozen웹/JavaScript 2023. 1. 12. 21:02
I. Object 클래스 👉 MDN 문서 보기 이제까지 배운 자바스크립트 객체들의 원형 console.log( new String('ABC') instanceof Object, new Number(123) instanceof Object, [] instanceof Object, (function () {}) instanceof Object, globalThis instanceof Object ); 각각 따로 출력해서 [[Prototype]]을 펼쳐 볼 것 생성자 함수 // 빈 객체 생성 console.log( new Object(), new Object(null), new Object(undefined), ); // 각 값에 적합한 래핑함수로 작용 console.log( new Object(1), new..
-
[Javascript] 스프레드, spread, 디스트럭쳐링, destructuring웹/JavaScript 2023. 1. 12. 20:17
I. 스프레드 spread 1. 기본 문법 const arr1 = [1, 2, 3]; const arr2 = [...arr1]; console.log(arr2); const arr1 = ['B', 'C']; const arr2 = ['D']; const arr3 = ['E']; const arr4 = ['A', ...arr1, ...arr2, ...arr3, 'F'] console.log(arr4); 2. 활용 a. 배열을 다수의 인자들로 펼침 const arr1 = [1, 2, 3, 4, 5]; console.log(arr1); // console.log(1, 2, 3, 4, 5); console.log(...arr1); console.log( Math.max(...arr1), Math...
-
[Javascript] 전역객체, 표준 빌트인 객체, 래퍼 객체, valueof, 빌트인전역프로퍼티, 빌트인전역함수, eval, isFinite,isNaN,parseFloat, parseInt,encodeURI,encodeURIComponent,decodeURI웹/JavaScript 2023. 1. 12. 09:14
I. 전역 객체 global object 언제 어디서든 들어마실 수 있는 공기와도 같은... 코드로 선언하거나 하지 않아도 전역 범위에 항상 존재하는 객체 👉 MDN 문서 보기 브라우저의 콘솔에 출력해 볼 것 console.log(this); console.log( this === window, window === self, self === frames ); Node.js에서 문서로 실행해 볼 것 console.log(this); // ⚠️ Node.js로 문서 실행시의 this는 전역 객체를 가리키지 않음 // 이후 모듈 관련 강에서 배울 것 console.log(global); ⭐️ globalThis 통일된 식별자 - 양쪽 모두에서 실행해 볼 것 console.log(globalThis); 💡 전역..
-
[Javascript] 객체의 스프레드, spread, 디스트럭쳐링, destructuring웹/JavaScript 2023. 1. 11. 13:35
I. 스프레드 spread 1. 기본 문법 const class1 = { x: 1, y: 'A', z: true }; const class2 = { ...class1 }; // 아래의 참조복사 코드와 다름! // const class2 = class1; console.log(class2); 2. 특정 객체의 프로퍼티를 포함하는 다른 객체 생성에 유용 const class1 = { a: 1, b: 'A', c: true }; const class2 = { d: { x: 10, y: 100 }, e: [1, 2, 3] }; const class3 = { ...class1, z: 0 } const class4 = { ...class2, ...class3, ...class2.d } console.lo..