본문 바로가기
반응형

javascript58

배열 중복 제거 Set Set은 unique값만 저장할 수 있도록 하기 때문에 array에 넣게 되면, 중복되는 값이 사라집니다. Set 을 이용하는 것 대신에 Array.from 도 가능합니다. const array = ['0', 1, 2, '0', '0', 3]; [...new Set(array)]; Array.from(new Set(array)); // ['0', 1, 2, 3] Filter filter는 array 내의 각 element 에 조건을 주어, true 값을 return 한 element 만 모아서 새로운 array 를 만드는 것입니다. 반대로 중복값만 가져올 수도 있습니다. const array = ['0', 1, 2, '0', '0', 3]; array.filter(item, index) => ar.. 2021. 6. 30.
객체에서 키 이름 변경 map객체, 구조 분해 할당, 스프레드 연산자를 이용하여 키를 변경할 수 있습니다. let arr = [{ old: "value01" }]; let result = arr.map(({ old: newKey, ...rest }) => ({ newKey, ...rest })); 위와 같이 간략하게 가능하지만 위 방식은 문자열 이름은 설정할 수 없습니다. arr.map(x => { let y = {}; y['full-name change'] = x['old']; return y; }) 위와 같이 하면 문자열로 키를 설정할 수 있습니다. 2021. 4. 26.
객체의 모든 속성이 null이나 빈값인지 확인 var obj = { x: "123", y: "aa", } var obj2 = { x: null, y: "aa", } const isEmpty = (object) => !Object.values(object).every(x => (x !== null && x !== '')); console.log(isEmpty(obj)); // false console.log(isEmpty(obj2)); // true object.value()로 객체의 모든 속성값을 배열로 반환합니다. 그리고 Array.every()로 배열을 확인합니다. 2021. 3. 29.
XMLHttpRequest (XHR) 진행상황 모니터링 다운로드 진행률 XMLHttpRequest요청이 처리되는 동안 발생할 수 있는 다양한 이벤트를 수신하는 기능을 제공합니다. 여기에는 주기적인 진행 알림, 오류 알림 등이 포함됩니다. var xhr = new XMLHttpRequest(); // 이벤트 리스너를 먼저 등록해준다 xhr.onload = () => { console.log(`The transfer is completed: ${xhr.status} ${xhr.response}`); }; xhr.onabort = () => { console.error('Download cancelled.'); } xhr.onprogress = (e) => { if (e.lengthComputable) { // 다운로드 진행률 계산 var percentComple.. 2021. 3. 22.
모듈 사용하기 import, export export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다. 먼저 아래와 같이 설정해 해당 스크립트가 모듈이란 걸 브라우저가 알 수 있게 해줘야 합니다. 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능합니다. // say.js export function hello() { alert('Hello!'); } 아래처럼 미리 함수를 선언하고 마지막에 한번에 내보내기도 가능합니다. // say.js function hello() { alert('Hello!'); } function bye() { alert('Bye!'); } export {hello, bye}; export 한 것들을 import 하는 법은 아래.. 2021. 1. 22.
옵셔널 체이닝(optional chaining) ?. 옵셔널 체이닝은 객체 프로퍼티에 에러없이 안전하게 접근하는 방법입니다. 만약 참초가 null이나 undefined라면 에러가 발생하는 대신 undefined를 리턴합니다. 중첩된 객체에서 옵셔널 체이닝 없이 하위 속성을 찾으려면 아래와 같이 해야합니다. first는 second에 접근하기 전에 Nullish가 아니라는 것을 검증하여 에러를 방지합니다. let nestedProp = obj.first && obj.first.second; 옵셔널 체이닝을 사용하면 아래와 같이 간결해집니다. let nestedProp = obj.first?.second; const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; console.log(adventurer.do.. 2020. 12. 8.
반응형

티스토리툴바