본문 바로가기

개발/Javascript11

자바스크립트 유용한 함수 모음 객체 키 이름 변경하기 ✏️ 객체 const originObj = { old1: '값1', old2: '값2', old3: '값3', old4: '값4', old5: '값5' }; const func = ({old1: new1, old2: new2, ...rest}) => { return {new1, new2, rest}; } const newObj = func(originObj); console.log(newObj); ✏️ 객체 배열 const originList = [{ old1: '값1', old2: '값2', old3: '값3', old4: '값4', old5: '값5' }, { old1: '값1', old2: '값2', old3: '값3', old4: '값4', old5: '값5' }]; con.. 2022. 8. 29.

javascript 객체 키 이름 변경 객체 키 이름 변경하기 (객체 배열) map 인자로 객체를 구조분해하여 다른 이름으로 변경하고 새로운 객체로 리턴한다. let origins = [{ old1: 'origins[0].old1', old2: 'origins[0].old2', old3: 'origins[0].old3' }, { old1: 'origins[1].old1', old2: 'origins[1].old2', old3: 'origins[1].old3' }]; let results = origins.map(({ old1: new1, old2: new2, ...rest }) => ({ new1, new2, ...rest })); 객체 키 이름 변경하기 (객체) let origin = { old1: 'origins[0].old1', old2.. 2022. 7. 8.

javascript 배열 내 중복 값 구하기 배열 내에서 중복 값을 추출하는 방법이다. 예를 들어 [1, 1, 2, 3, 5] 배열에서 중복 값인 [1] 을 구하는 방법이다. 중복 값을 구해야 하는 대상 배열이 객체를 요소로 갖는 배열이라면 객체에서 중복을 검사할 대상만 추출한다. (중복이 객체 내 값이 아니라 객체 자체라면 JSON.stringify() 등으로 변환하여 확인해야 한다.) // 데이터 let arr = [{ "name": "홍길동", "phoneNumber": "010-1111-1111" }, { "name": "김길동", "phoneNumber": "010-2222-2222" }, { "name": "고길동", "phoneNumber": "010-3333-3333" }, { "name": "서길동", "phoneNumber": ".. 2022. 6. 23.

javascript byte 수 계산 euc-kr byte 구하기 한글 한 글자당 2byte 기준 바이트 수 계산 function calcByteEuckr(str) { return str .split('') .map(s => s.charCodeAt(0))// 유니코드 값으로 변환 .reduce((prev, c) => (prev + ((c === 10) ? 2 : ((c >> 7) ? 2 : 1))), 0); // c 값이 0~127사이에 있으면 1바이트 } 최대 byte 만큼만 문자열 자르기 function getLimitedByteEuckrText(str, maxByte) { if (!str) return; let b; for (b = i = 0; (c = str.charCodeAt(i)); ) { b += (c === 10) ? 2 : .. 2022. 6. 21.

Object.freeze 객체 동결 / 객체 읽기 속도 Object.freeze() 객체에 새로운 속성을 추가하거나 제거할 수 없는 상태로 바꾸어 immutable한 Object를 만들 수 있다. 프로토타입 객체를 동결하는 함수 동결된 객체는 속성을 추가, 삭제하는 등 변경 불가 객체를 변경하려는 시도 시 TypeError 예외 발생 객체의 불변성 유지 얕은 복사(1 depth까지만)를 하므로 중첩된 객체는 동결되지 않음 Object.isFrozen() 메소드로 객체 동결 여부 확인 가능 const info = { name: 'Anna', age: 19 }; Object.freeze(info); info.age = 20; // 변경되지 않음 info.email = 'hello@gmail.com'; // 추가되지 않음 const vs. Object.freeze.. 2022. 5. 12.

ES6 Syntax 목차 Restructing(구조 분해 할당) Spread Operator(전개 구문) Default Parameters(기본 값 매개변수) Template Literal(템플릿 리터럴) Arrow Function(화살표 함수) for of ... loop 1. Restructuring(구조 분해 할당) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식 1-1. 객체 ✔ 구문 ES5 에서는 각 변수에 값을 할당해야 했다. var info = { myName: 'Anna', myAge: 10 }; var myName = info.myName; var myAge = info.myAge; console.log(myName, myAge);// Anna 10 ES6 에서는 중괄호 안에.. 2022. 5. 3.

TypeScript TypeScript 란? Javascript 를 기반으로 하여 정적 타입 문법을 추가한 프로그래밍 언어 JavaScript 의 상위 집합으로 Microsoft 에서 개발했다. 따라서 JavaScript의 모든 기능을 TypeScript 에서도 사용할 수 있다. ES6 신규 문법을 포함하고 클래스, 인터페이스, 상속, 모듈 등의 객체 지향 프로그래밍 패턴을 제공한다. TypeScript 컴파일러를 사용하여 TypeScript(.ts) 파일을 Javascript(.js) 파일로 변환하여 실행한다. TypeScript vs. JavaScript 🧐 속도, 안정성 자바스크립트는 동적 타입 언어로 런타임 속도는 빠르지만, 타입 안정성은 보장되지 않는다. 타입스크립트는 정적 타입 언어로 컴파일 시간이 길지만, 안정.. 2022. 4. 28.

자바스크립트 비동기 처리 / Promise / async / await / fetch 비동기 처리 구조 자바스크립트는 원래 싱글 스레드 기반 언어이며 동기적으로 실행된다. 호출 스택(Call Stack)이 하나여서 스택 내에 쌓인 작업을 순서대로 처리한다. 하지만, 시간이 오래 걸리는 코드가 있으면 그 작업이 끝나고 콜백할 때까지 기다렸다가 다음 작업을 처리하게 된다. 그 시간 동안은 대기해야 하므로 비동기적으로 처리하는 방법이 필요하다. setTimeout() 으로 일정 시간 동안 작업을 지연시키는 예시이다. 이 예제를 실행하면 3초 뒤에 '3초 지연!'이라는 문구를 찍는다. setTimeout(function() { console.log('3초 지연!'); }, 3000); 지금은 3초짜리 코드이지만, 서버에서 대량의 데이터를 받아오는 등의 처리가 필요할 때는 더 시간이 길어지게 된다.. 2022. 4. 20.

Promise 패턴 자바스크립트 동작 자바스크립트는 어떻게 동작할까? 자바스크립트를 사용할 거면 기본적인 동작 원리에 대해서는 알아야 한다고 생각했다. 간단하게 요약하면, 자바스크립트는 싱글 스레드 기반이고 콜백 큐를 사용한다. 자바스크립트 엔진 V8 자바스크립트 코드를 실행하기 위해서는 인터프리터 역할을 하는 자바스크립트 엔진이 필요하다. 대중적으로 알려진 엔진은 구글의 V8 엔진으로 크롬 웹 브라우저, Node.js 등에서 사용되고 있다. V8 엔진의 내부 구조를 간단히 나타내면 이렇다. Memory Heap 과 Call Stack 이 주요 구성요소이다. Memory Heap: 변수와 객체에 대한 메모리 할당이 일어나는 곳 Call Stack: 함수가 호출되면 순서대로 쌓이는 곳 자바스크립트는 기본적으로 싱글 스레드 기.. 2022. 4. 14.

javascript 함수형 프로그래밍 목차 함수형 프로그래밍 함수형 프로그래밍 기법 고차 함수 화살표 함수 클로저(Closure) 커링(Currying) 함수형 프로그래밍 연산할 대상이 함수가 되는 프로그래밍 패러다임으로 내부 데이터와 상태를 그대로 두고 여러 함수를 조합하여 작업을 수행하는 방식이다. 선언적 방식으로 구현되며 흐름 제어를 명시적으로 기술하지 않고 로직을 표현한다. 함수형 프로그래밍 특징 💡 명령형이 아닌 선언형이다. 명령형 프로그래밍은 무엇을 어떻게 할 것인가에 집중한다. ex) html, Lisp, Sql 등 // 배열 내 요소를 대문자로 바꾸는 코드 // 배열 내 요소를 i를 증가해주며 하나씩 접근하여 대문자로 바꾸고 새 배열에 담아준다. const arr = ['a', 'b', 'c']; const result = n.. 2022. 2. 6.

이전 1 2 다음

티스토리툴바