반응형 Language/JavaScript (Modern)29 [ES6+] arr.(findLast/findLastIndex) - 특정 조건에 맞는 배열의 값이나 인덱스 가져오기 이전부터 존재했던 배열 메서드인 .find() / .findIndex() 가 존재하였는데, 메서드명에서부터 알 수 있듯이 앞에서부터 스캔하는 게 아니라 뒤에서부터 스캔하는 방식이다. 재밌게도 최근에 나온 메서드이다.(ECMAScript 2023) find() / findIndex()와 사용방식이 다를 게 없기 때문에 상황에 맞게 사용만 해주면 된다. 원래 쓰던 것과 동일하므로 구문 설명은 생략하고 바로 예제만 보도록 하자. ▷ 예제 1) Array.prototype.findLast/findLastIndex 기본 사용법 const array1 = [5, 12, 50, 130, 44]; const found = array1.findLast((element) => element > 45); console.lo.. 2023. 9. 10. [ES6+] arr.with() - 특정 인덱스에 위치한 값 변경하기 배열의 특정 인덱스에 위치한 값을 바꾸는 Array.prototype.with() 메서드에 대해 알아보자. 이 함수는 ECMAScript 2023에 소개된 배열 메서드이다. 이 메서드의 역할은 제목과 본문 첫 줄에 적혀있는 것과 마찬가지로 지정된 인덱스에 위치한 값을 대체하고 새 배열을 반환하는 기능을 제공한다. 사실 무슨 기능인지는 알겠는데 어디서 활용할 수 있을지 감이 안 잡힌다. ▷ 구문 arr.with(index, value) index : 변경할 인덱스의 값을 의미하며, 음수로 사용 시 배열의 끝부터 역산한다. value : index에 위치한 값을 대체할 값을 의미한다. ▷ 예제 1) Array.prototype.with() 기본 사용법 const arr = [0, 1, 2, 3, 4, .. 2023. 7. 21. [ES6+] structuredClone() - 객체 "깊은" 복사를 도와주는 메서드 javascript 개발을 진행하게 되면 객체를 복사해서 사용하는 경우가 빈번하게 발생하는데, 방법에 따라 흔히들 알고 있는 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)가 존재한다. 이 게시글에서는 깊은 복사를 도와주는 메서드인 structuredClone()에 대해 알아보고자 한다. ▷ 구문 structuredClone(value) structuredClone(value, transferables) value: 복사할 대상인 원본 객체이다. 이는 구조화된 복제가 가능한 모든 유형을 포함한다. transferables: An array of transferable objects in value that will be moved rather than cloned to the retu.. 2022. 9. 26. [ES6+] 옵셔널 체이닝(optional chaining) 옵셔널 체이닝(optional chaining) 연산자 (?.)을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. ▷ 구문 obj?.prop obj?.[expr] arr?.[index] func?.(args) 옵셔널 체이닝 연산자는 결국 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식으로 사용할 수 있다. 즉, '앞'의 평가 대상이 undefined 나 null이면 평가를 멈추고 undefined를 반환한다. 예제를 통해 알아보자. 옵셔널 체이닝이 등장하기 이전 let user = {}; // 주소 정보가 없는 사용자 // 1. 에러 발생 alert(user.address.street); // TypeError: Cannot read prop.. 2022. 9. 23. [ES6+] nullish 병합 연산자 (??) nullish 병합 연산자는 왼쪽 연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. 개념은 대충 알겠고 예제를 통해 좀 더 자세히 알아보자. nullish 기본 사용법 let firstName = null; let lastName = undefined; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 console.log(firstName ?? lastName ?? nickName ?? "무명"); // 바이올렛 본문 시작할 때 설명한 것처럼 null이거나 undefined가 아닌 값이 나올 때 해당 값이 출력되는 구조이다. 우리가 흔히 사용하는 논리연산자는 OR을 의미.. 2022. 8. 31. [ES6+] Promise 메서드 사용하기 (ft. all/allSettled/race) Promise 메서드에 대해 알아보기 전에 만약 Promise를 모른다면 아래 링크를 통해 대략적으로 이해하고 오자. [ES6+] Promise란? - 비동기 처리를 위한 객체 [ES6+] Promise란? - 비동기 처리를 위한 객체 ES6부터 정식으로 지원해주기 시작한 Promise 객체에 대해 알아보자. Promise란 말 그대로 '약속(프로미스)'을 의미하는데, 이는 최종 결과를 반환한다기보다는 미래의 어떤 시점에 결과를 제공하겠 mine-it-record.tistory.com Promise 자체에서 제공하는 메서드에 대해 알아볼 건데, 전체적으로 알아보면 내용이 길어지니 알아두면 좋을 메서드에 대해서만 알아보고자 한다. 1. Promise.all Promise.all은 매개변수로 주어진 배열의 .. 2022. 7. 26. [ES6+] 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을 A.. 2022. 7. 26. [ES6+] at() - 문자열/배열의 특정 인덱스 위치에 있는 값 가져오기 (ft. 음수) 배열 또는 문자열에서 특정 인덱스에 위치한 값을 가져오는 방법은 매우 간단한데, 좀 더 복잡하게 뒤에서부터 몇 번째 같은 경우처럼 처리하기 난감한 상황들이 간혹 존재한다. (대체적으로 "전체 길이 - 1"로 처리를 해왔었던 것 같다.) 하지만 드디어 스크립트에서도 양수와, 음수를 가지고 특정 인덱스에 접근하는 걸 도와주는 메서드가 생겼다. 각각 String.prototype.at() 와 Array.prototype.at()이며, 한번 알아가 보도록 하자. ▷ 구문 .at(index) index: 반환할 배열 요소의 인덱스(위치)이다. 음수 인덱스를 전달할 때 배열 끝에서 상대 인덱싱을 지원한다. (즉, 음수를 사용하는 경우에는 배열의 끝에서부터 역으로 위치를 계산해서 가져온다.) 예제를 통해 알아보자. .. 2022. 7. 13. [ES6+] arr.fill() - 배열을 특정 값으로 채우기 (ft. 특정 인덱스 지정) 배열을 특정 값으로 채우는 Array.prototype.fill() 메서드에 대해 알아보자. 이 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채우는데, 매개변수를 통해 시작 인덱스와 끝 인덱스를 지정할 수 있다. ▷ 구문 arr.fill(value[, start[, end]]) value : 배열을 채울 특정 값 start : 시작 인덱스이며, 생략 시 기본 값은 0 end : 끝 인덱스이며, 생략 시 기본 값은 배열의 길이(this.length)이다. ▷ 예제 1) Array.prototype.fill() 기본 사용법 // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] const arr1 = Array(10).fill(0); arr1.fill(1, 2, 6); // .. 2022. 3. 4. 이전 1 2 3 4 다음 반응형
