반응형 Language200 [JavaScript] Array.from() - 유사 배열을 가지고 새로운 배열 만들기 Array.from() 메서드는 제목 그대로 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만들어주는 메서드이다. ▷ 구문Array.from(arrayLike[, mapFn[, thisArg]])arrayLike: 배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체.mapFn: 배열의 모든 요소에 대해 호출할 맵핑 함수 (배열의 map 메서드와 동일하다 생각하면 된다.)thisArg: mapFn 실행 시에 this로 사용할 값유사 배열이란 length 속성과 인덱싱 된 요소를 가진 객체를 의미하며, 반복 가능한 객체는 Map, Set 등 객체의 요소를 얻을 수 있는 객체를 의미한다. (Set을 Array... 2022. 7. 26. [JavaScript] Array.isArray() - 배열(Array)이 맞는지 판별/확인하기 Array.isArray() 메서드는 제목 그대로 배열인지 확인하기 위한 메서드이다. 배열인지를 확인할 때 instanceof나 typeof 대신에 Array.isArray()를 사용하는 것이 더 정확한 결과를 얻을 수 있다. ▷ 구문 Array.isArray(obj) obj: 검사할 객체 ▷ 예제 1) Array.isArray() true/false 판별 // 모두 true 반환 Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); Array.isArray(new Array('a', 'b', 'c', 'd')); Array.isArray(new Array(3)); // Array.prototype은 스스로도 배열입니다 Array.isAr.. 2022. 7. 13. [JavaScript] at() - 문자열/배열의 특정 인덱스 위치에 있는 값 가져오기 (ft. 음수) 배열 또는 문자열에서 특정 인덱스에 위치한 값을 가져오는 방법은 매우 간단한데, 좀 더 복잡하게 뒤에서부터 몇 번째 같은 경우처럼 처리하기 난감한 상황들이 간혹 존재한다. (대체적으로 "전체 길이 - 1"로 처리를 해왔었던 것 같다.) 하지만 드디어 스크립트에서도 양수와, 음수를 가지고 특정 인덱스에 접근하는 걸 도와주는 메서드가 생겼다.각각 String.prototype.at() 와 Array.prototype.at()이며, 한번 알아가 보도록 하자. ▷ 구문.at(index)index: 반환할 배열 요소의 인덱스(위치)이다. 음수 인덱스를 전달할 때 배열 끝에서 상대 인덱싱을 지원한다. (즉, 음수를 사용하는 경우에는 배열의 끝에서부터 역으로 위치를 계산해서 가져온다.) 예제를 통해 알아보자.▷ 예제.. 2022. 7. 13. [TypeScript] Type VS Interface TypeScript에서 Type Alias와 Interface의 각각의 특징을 통해 공통점과 차이점에 대해 알아보자. 1. 선언 type PositionType = { x: number; y: number; }; interface PositionInterface { x: number; y: number; } // object const obj1: PositionType = { x: 10, y: 1, }; const obj2: PositionInterface = { x: 20, y: 2, }; 일반적으로 객체 타입을 선언하는 거에 있어서 둘이 동일한 방법으로 사용할 수 있다. 선언 부분에서의 둘의 차이점은 인터페이스는 당연하겠지만 객체에서만 사용이 가능하다는 점과, Index Signature의 사용 유무.. 2022. 6. 8. [TypeScript] 인터페이스(interface) (ft. Intersection) javascript에는 지원하지 않던 인터페이스에 대해 알아보자. Typescript에서 인터페이스는 타입 체크를 한다거나, 클래스에 사용한다거나 등의 역할을 가지고 있다. 몇 가지 특징과 사용법에 대해 알아보자. 1. 타입 체크용 인터페이스 여기서의 인터페이스는 typescipt에서 제공하는 type 이랑 동일한 역할을 한다. interface Point { x: number; y: number; } function printCoord(pt: Point) { console.log("The coordinate's x value is " + pt.x); console.log("The coordinate's y value is " + pt.y); } let point: Point = { x: 100, y: .. 2022. 6. 8. [TypeScript] 클래스(Class) 기존에 모던 javascript에서도 클래스가 있다는 것을 알고 있을 것이다. (모른다면 아래 게시글을 보고 어느 정도 익혀 오자) [ES6+] 클래스(Class)문법에 대하여 [ES6+] 클래스(Class)문법에 대하여 ES6부터는 자바스크립트 또한 Class문법을 사용할 수 있게 되었다. 자바스크립트에서의 Class는 함수라는 것을 알아두고 클래스(Class)문법에 대해 하나씩 알아가보자. 1. 클래스(Class) 정의 1-1. 클래 mine-it-record.tistory.com 이번 게시글에서는 Typescript가 지원하는 클래스는 역시 기반이 Javascript이기 때문에 Typescript에서 만의 고유한 확장 기능에 대해서만 정리하고자 한다. 1. 클래스 정의와 접근제한자 우선 접근 제한자.. 2022. 6. 8. [JavaScript] element.(after/before) - 특정 element 앞뒤로 요소 추가 및 이동하기 after(), before() 메서드는 말 그대로 특정 element의 앞뒤로 요소를 추가하거나 이동시켜주는 메서드이다. 이전 게시글에서 element.insertAdjacentElement() 메서드에 대해 정리했었는데, [JavaScript] element.insertAdjacentElement() - 특정 element를 기준으로 노드 삽입하기 및 이동하기 (ft. insertAd insertAdjacentElement() 메서드는 특정 element를 기준으로 앞뒤, 자식으로의 처음, 마지막 위치로 노드 삽입을 하게 도와주는 메서드이다. ▷ 구문 targetElement.insertAdjacentElement(position, element) po.. mine-it-record.tistory.c.. 2022. 6. 7. [JavaScript] element.insertAdjacentElement() - 특정 element를 기준으로 노드 삽입하기 및 이동하기 (ft. insertAdjacentHTML, insertAdjacentText) insertAdjacentElement() 메서드는 특정 element를 기준으로 앞뒤, 자식으로의 처음, 마지막 위치로 노드 삽입 또는 이동을 하게 도와주는 메서드이다. ▷ 구문 targetElement.insertAdjacentElement(position, element) position: 상대적인 위치를 나타내는 문자열로, 다음 문자열 중 하나만 사용 가능하다.(대소문자 구분을 하지 않는다.) beforebegin: targetElement의 앞 afterbegin: targetElement 자식 요소의 첫 번째 위치 beforeend: targetElement 자식요소의 마지막 위치 afterend: targetElement의 뒤 element: 특정 elemet를 기준으로 poisiton에 알.. 2022. 6. 7. [TypeScript] 타입추론(Type Inference)과 타입표명(Type Assertion) 타입 추론과 타입 표명에 대해 알아보자. (영어의 뜻을 해석하다보니 타입 표명, 타입 단언 등 뭐 어쨌든 다 동일한 뜻이다.) Type Inference 타입 추론이란 TypeScript에서 명시적인 타입 표기가 없을 때 타입 정보를 제공하기 위해 사용되는 것이다. 그냥 쉽게 말하면 자동으로 타입을 결정해주는 것이라고 보면 된다. let x = 3; // let x: number let y = "4"; // let y: string 이런 식으로 javascript처럼 사용하면 typescript는 자동적으로 타입을 추론하여 알맞은 타입을 결정한다. 그리고 여러 타입을 동시에 사용할 경우 최적 공통 타입을 알아서 계산해준다. let x = [0, 1, null]; // let x: (number | nul.. 2022. 6. 2. 이전 1 2 3 4 5 ··· 23 다음 반응형
