272_자바스크립트에서 데이터 중복 없는 Set 사용하기 [적용] 중복 없는 유저 ID 배열을 사용하고 싶을 때 여러 데이터에서 중복되는 값을 제외하고 싶을 때 [문법 1] 메소드 의미 반환 new Set(반복가능한객체*) Set 객체 초기화 객체(Set) 세트.add(값) 값 등록 객체(Set) 세트.has(값) 값 존재 여부 확인 진리값 세트.delete(값) 값 삭제 진리값(삭제 여부) 세트.clear() 값 전체 삭제 없음 세트.values() 각 값을 반환 객체(Iterator) 세트.forEach(콜백) 각 값에 대한 처리 실행 없음 * 생략 가능 [문법 2] 속성 의미 타입 세트.size 요소의 수 숫자 [내용] Set 객체는 여러 값을 다룬다. 하지만 배열이나 Objext와는 달리 인덱스(..

271_자바스크립트에서 맵(Map)과 키(Key) 사용하기 [적용] 키와 값을 세트로 사용하고 싶을 때 연관 배열을 사용하고 싶을 때 [문법 1] 메소드 의미 반환 new.Map(반복가능한객체*) 맵 객체 초기화 객체(Map) 맵.set(키, 값) 맵에 키와 값의 세트를 등록 객체(Map) 맵.get(키) 키를 지정해 값을 가져오기 값 맵.has(키) 키의 값 존재 여부 확인 진리값 맵.delete(키) 키의 값 삭제 진리값(삭제 여부) 맵.clear() 키와 값 모두 삭제 없음 맵.keys() 키의 반복자 객체 객체(Iterator) 맵.values() 값의 반복자 객체 객체(Iterator) 맵.entries() 키와 값 배열의 반복자 객체 반환 객체(Iterator) 맵.forEach(콜백)_ 각 ..

270_자바스크립트에서 배열과 객체에 독자적인 메소드 추가하기 [적용] 배열에 셔플 함수를 추가하고 싶을 때 객체에 JSON 변환 메소드를 추가하고 싶을 때 [문법] 구문 의미 객체.prototype[심볼] = function() {} 객체에 독자적인 메소드 추가 객체[심볼]() 독자적인 메소드 실행 [내용] Array, Date, Object 등 기존의 객체(빌트인 객체)에 독자적인 메소드를 추가하고 싶을 떄는 다음과 같이 프로토타입(Prototype)과 심볼(Symbol)을 사용한다. JavaScript // 'myMethod' 이름의 심볼 생성 const myMethod = Symbol(); // 독자적인 메소드 추가 Array.prototype[myMethod] = function() { cons..

269_자바스크립트에서 유일한 데이터 사용하기(심볼) [적용] 중복되지 않는 데이터를 사용하고 싶을 때 빌트인 객체(Built-in Object)에 독자적인 이름을 사용한 메소드를 생성하고 싶을 때 [문법] 메소드 의미 반환 Symbol(문자열or숫자*) 심볼 생성 심볼 * 생략 가능 [내용] 심볼(Symbol)은 다른 데이터와 중복되지 않는 유일한 값을 사용한다. 이 특성을 이용해 ID를 관리하거나 빌트인 객체에 추가하는 독자적인 메소드 생성이 가능하다. 심볼의 생성은 new가 아닌 Symbol()을 사용한다. JavaScript const symbol1 = Symbol(); const symbol2 = Symbol(); console.log(symbol1 == symbol2); // 결과: false..

268_자바스크립트에서 iterator 정의하여 사용하기 [적용] 반복자를 정의하고 싶을 때 [문법] 구문 의미 function* 함수명() {} 제너레이터 정의 yield 값 값을 반환 [내용] 제너레이터를 사용해 반복자를 간단히 사용하는 방법이 있으며, 반복자를 정의할 수도 있다. 정의는 다음과 같이 function 선언에 *(에스터리스크,asterisk)를 추가한다. JavaScript // 제너레이터 정의 function* myGenerator() {} 반복자는 '반복자.next()'를 사용해 값에 차례대로 접근할 수 있다. 제너레이터는 yield를 사용해 다음 가져올 값을 지정한다. JavaScript // 제너레이터 정의 function* myGenerator() { yield '사자'; yi..

267_자바스크립트에서 반복 처리를 위한 반복자 사용하기 [적용] 반복 작업이 가능한 객체를 사용하고 싶을 떄 [문법 1] 메소드 의미 반환 객체[Synbol.iterator]() 반복자 가져오기 반복자 반복자.next() 다음 반복자 가져오기 반복자 [문법 2] 속성 의미 타입 반복자.value 현재값 임의 반복자.done 종료 여부 확인 진리값 [내용] 반복자(Iterator)는 여러 값에 순서대로 접근이 가능한 구조를 가진 객체로, 단어의 원형인 iterate는 반복한다는 의미를 가졌다. 반복자를 가지는 객체를 반복 가능한 객체(Iterable Object)라고 하며, 대표적으로 배열이 있다. 배열은 for...of를 사용해 순서대로 처리할 수 있으며, 반복 가능한 객체라면 같은 방식으로 for....

266_모듈형 자바스크립트 HTML에서 읽어오기 [적용] 모듈형 자바스크립트를 사용하고 싶을 때 [문법] 구문(HTML) 의미 ES 모듈을 사용하는 자바스크립트 불러오기 [내용] 모듈형 자바스크립트는 script 태그 type 속성에 module을 지정하여 불러올 수 있다. 지정하지 않으면 import와 export 등의 자바스크립트 코드 내부에 에러가 발생한다. HTML 인라인 코드에서도 모듈을 사용할 수 있다. HTML 구글 크롬 개발자 도구를 사용하면 MyClass.js 모듈을 확인할 수 있다. 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김

265_자바스크립트에서 모듈 가져오기 [적용] 모듈을 가져오고 싶을 때 서버의 모듈을 URL 지정하여 가져오고 싶을 때 [문법] 구문 의미 import { 모듈명 } from './파일명.js' 모듈 가져오기 [내용] import 는 모듈을 가져오는 선언으로 다음과 같은 형식을 사용한다. JavaScript import { 모듈명 } from '자바스크립트파일명.js'; import문의 from 내부에는 '.js' 확장자가 필수다. 위의 예시는 '자바스크립트파일명.js'로 표시하고 있지만, 실제 코드는 ./,/, ../ 등 주소 경로를 함께 표시해야 한다. JavaScript // 자바스크립트 파일에서 모듈 불러오기 import { 모듈명 } from '자바스크립트파일.js'; // 자바스크립트 파일에서..

264_자바스크립트에서 모듈 내보내기 [적용] 상수, 함수 등을 모듈로 내보내고 싶을 때 [문법] 구문 의미 export 모듈 모듈 내보내기 [내용] export는 모듈을 내보내기(외부에 공개) 위한 선언으로 export 선언한 데이터를 모듈로 공개한다. 클래스, 객체, 변수, 상수, 함수 등 여러 데이터 타입을 모듈로 사용할 수 있다. JavaScript // 상수 myConstnat 내보내기 export const myConstant = 2; // 객체 myObject 내보내기 export const myObject = { name: '사자', age: 18 }; // 함수 myFunction 내보내기 export function myFunction() { console.log('my task'); ..

263_자바스크립트 처리 파일 분할하기 (ES 모듈) [적용] 처리에 따라 파일을 분할하고 싶을 때 [내용] ES 모듈은 여러 자바스크립트의 파일을 의존 관계에 따라 불러오는 작업을 한다. 규모가 큰 프로그램이 하나의 자바스크립트 파일만을 사용하게 되면 기능별 구조의 파악과 분류가 복잡하고 어려워 버그의 원인이 되기도 한다. JavaScript class MyClass1 { // 10줄의 코드 } class MyClass2 { // 10줄의 코드 } new MyClass1(); new MyClass2(); ES 모듈을 사용하면 처리에 따라 자바스크립트 파일의 분할이 가능하다. 내보내는 모듈은 export를, 가져오는 모듈은 import를 사용한다. https://stonefree.tistory.com/4..