JavaScript
-
타입스크립트(TypeScript) 란?JavaScript 2024. 11. 24. 15:55
타입스크립트(TypeScript)란? - 타입스크립트(TypeScript)는 마이크로소프트가 개발한 오픈소스 프로그래밍 언어이다. - 자바스크립트(JavaScript)의 상위 확장 언어이다. - 자바스크립트의 문법을 기반으로 하면서 정적 타입(static type)을 지원하여, 코드를 작성할 때 타입 오류를 사전에 검출할 수 있는 장점이 있다.- 최신 ECMAScript(ES) 기능을 사용할 수 있으며, 코드가 자바스크립트로 컴파일되어 브라우저나 Node.js 환경에서 실행할 수 있다. 타입 안정성: 변수, 함수 등의 데이터 타입을 명시할 수 있어 타입 오류를 컴파일 단계에서 발견할 수 있다.코드의 안정성과 유지보수성이 크게 향상된다. 개발 생산성 향상: 코드 자동 완성, 리팩토링 도구가 강화되어 대규모..
-
[js] 자바스크립트 json array 중복제거, 중복개수 카운팅하기JavaScript 2023. 1. 14. 15:43
//1. overlapArr json array 중복제거 let overlapArr = [ { id : 1, name : "이름A", age : 5 }, { id : 1, name : "이름B", age : 10 }, { id : 2, name : "이름C", age : 20 }, { id : 3, name : "이름D", age : 40 }, { id : 4, name : "이름E", age : 50 }, { id : 5, name : "이름F", age : 10 }, { id : 5, name : "이름G", age : 20 }, { id : 5, name : "이름G", age : 30 } ]; var deduplicationArr = overlapArr.filter((item1, idx1)=>{ ..
-
[js] 자바스크립트 동적 엘리먼트 onclick 함수에 파라미터 넣기JavaScript 2023. 1. 2. 13:31
let id = "member01"; let name= "name01"; //잘못된 방법 let returnHtml = "아이디"; //정상적인 방법 let returnHtml = "아이디"; //파라미터가 여러개일때 let returnHtml = "버튼"; /** * 아이디 출력 */ function fnGoDetail(id,name){ alert(id); } 동적엘리머트를 생상한 onclick 함수에 파라미터를 넣을땐 꼭 앞뒤에 \를 넣는다. 파라미터가 여러개일땐 let returnHtml = "";
-
자바스크립트 class 클래스, extends 상속, super 슈퍼 사용하기JavaScript 2022. 12. 10. 18:39
Class는 객체를 생성하기 위한 템플릿이다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화 한다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가진다고 한다. Class 특별한 함수이다. 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class 표현식 and class 선언 두 가지 방법을 제공한다. 1. Class 선언식 class Ruler { constructor(height, width) { this.height = height; this.width = width; } } Hoisting 함수 선언과 클래스 선언의 중요한 차이점은 함수의 경우 정의하기 하기 전에 호출할 수 있지만, 클래스는 반드시 정의한 ..
-
Javascript 에서 점점점 (…) Three dots이란?JavaScript 2022. 9. 21. 15:02
영어로는 three dots 로 일컫는다. 용도 - 보통 배열과 배열을 합칠 때 사용. - 오브젝트 끼리도 합칠 수 있다. 1. 배열과 배열을 합치기 let a = ['A', 'AA']; console.log(a); //결과 //[ 'A', 'AA' ] 그냥 배열을 출력 했을때는 우리가 예상한대로 나온다. let a = ['A', 'AA']; console.log(…a); //결과 //A AA …a를 출력 하면 []배열 안에 값이 있지 않고 []가 벗겨진채로 출력이 된다. let a = ['A', 'AA']; let b = ['B', 'BB'] console.log([…a, …b]); // 결과 // [ 'A', 'AA', 'B', 'BB' ] a,b배열이 합쳐진 상태로 출력이 된다. let a = ['..
-
[javascript] 목록 엘리먼트에 오름차순/내림차순 정렬 기능 넣기(with sort 함수)JavaScript 2022. 7. 2. 23:03
중요 포인트는 1. 배열을 자바스크립트 sort메소드로 정렬한다. 2. 제이쿼리로 엘리먼트를 그린다. 데이터의 형태 let dummy = [ {'dt' : "2022-01-04", 'team' : 'C'} , {'dt' : "2022-03-04", 'team' : 'B'} , {'dt' : "2022-02-01", 'team' : 'C'} , {'dt' : "2022-04-04", 'team' : 'D'} , {'dt' : "2022-01-04", 'team' : 'A'} , {'dt' : "2022-05-04", 'team' : 'A'} , {'dt' : "2022-06-04", 'team' : 'D'} , {'dt' : "2022-07-02", 'team' : 'C'} ] 처음 디폴트 목록 오름차순 ..
-
[javascript] 자바스크립트 some & every 메소드란?JavaScript 2022. 6. 18. 21:26
1. every every 메서드는 다음과 같이 사용한다. 배열.every( (요소, 인덱스, 배열) => { return 요소 } ,(옵션)함수 내부에서 사용될 this에 대한 값); every()는 배열의 각 엘리먼트에 대해서 테스트 함수의 반환 값이 모두 true인지 확인한다. 모든 case가 true일때, true를 반환한다. 하나라도 false이면 반환 값은 false다. 기존 배열 값은 변경되지 않는다. 배열에 대해서 배열 내의 모든 항목이 조건을 만족하는지 체크하며, 하나라도 false이면 false이다. 간단하게 and 조건이라고 생각하자. var objArr = [ {name: '철수', age: 10} , {name: '영희', age: 10} , {name: '바둑이', age: 2..
-
[javascript] 자바스크립트 map & reduce 메소드란?JavaScript 2022. 6. 10. 13:22
자바스크립트 내장 메서드 중에서 제일 강력하고, 알아두면 다양한 곳에 활용할 수 있는 것이 바로 map과 reduce이다. 1. map map 메서드는 다음과 같이 사용한다. 배열.map( (요소, 인덱스, 배열) => { return 요소 } ); map의 기본 원리는 간단하다. 반복문을 돌며 배열 안의 요소들을 1대1로 짝지어 준다. 매핑한다고 표현하며 어떻게 짝지어줄 것인가 정의한 함수를 메서드의 인자로 넣어주면 된다. 일단 주어진 배열을 그대로 매핑해보자. const oneTwoThree = [1, 2, 3]; let result = oneTwoThree.map((v) => { console.log(v); return v; }); // 콘솔에는 1, 2, 3이 찍힘 oneTwoThree; // [..