반응형 Language/JavaScript94 [JavaScript] startsWith/endsWith - 대상 문자열이 특정 문자/문자열로 시작하는지 끝나는지 체크 String.prototype.startsWith()startsWith() 메서드는 대상 문자열이 특정 문자로 시작하는지 체크하는 메서드이다. ▷ 구문str.startsWith(searchString)str.startsWith(searchString, position)searchString : 문자열의 시작 지점에서 탐색한 문자열position : 탐색을 시작할 위치 (default 0) ▷ 예제 1 ) String.prototype.startsWith() 메서드 기본 사용법const str = '동해물과 백두산이 마르고 닳도록';console.log(str.startsWith('동'));// trueconsole.log(str.startsWith('동', 3));// falseconsole.log(st.. 2024. 5. 16. [JavaScript] console API에 대해 얼마나 알고있을까? console 자바스크립트 환경에서 코드의 결괏값을 출력하거나 테스트를 하기 위해 아마 나를 포함하여 대부분의 사람들이 console.log() 를 주로 사용하고 있을 것이다. 뭐 사실 현업에서도 그렇고 console.log()만을 사용함에도 딱히 불편함을 느끼거나 하는 것은 없다. 단순하게 console.log()만으로 충분해서 그것만 사용하는 걸까? 아니면 그것밖에 모르기때문에 그것만 사용하는걸까? 개인적인 생각으로는 그것만 아는 사람보다는 "익숙하지 않아서" 사용하지 않은 경우가 더 많다고 생각된다. 콘솔 API의 모든 기능을 알 필요는 없다고 생각되며, 가볍게 이런 게 있구나 정도로만 알아두는 것도 나쁘지 않다 생각된다. log level 딱! 이 정도만 알아둬도 일하는데 지장 없을 정도의 로그.. 2024. 1. 9. [JavaScript] 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.log(found.. 2023. 9. 10. [JavaScript] 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, 5]const .. 2023. 7. 21. [JavaScript] BF캐시 (Back Forward Cache) 사실 BF캐시 관련한 내용을 JavaScript 카테고리에 넣는 게 맞으려나 하고 망설여지지만 카테고리가 다양하지 못해 일단 여기에 넣어두고자 한다. BFCache BFCache란 뭘까? 이 녀석의 풀 네임은 Back Forward Cache이다. 즉, 이름 그대로 뒤로/앞으로 가기 버튼을 눌었을 때 화면을 바로 보여주기 위한 브라우저에서 발생하는 최적화 기능이다. 페이지를 이동할 때 페이지 전체의 스냅샷을 저장하는 캐시라고 생각하면 된다. BFCache는 무조건 발생하는 건가? 결론부터 말하자면 '무조건 발생하는 건 아니다'라고 말할 수 있다. 주요 브라우저인 크롬/사파리/파이어폭스 등 BFCache를 제공하지만 특히 크롬 같은 경우에는 BFCache에 최적화된 사이트만 캐싱하려고 노력하는 듯하다. 개.. 2023. 5. 30. [JavaScript] 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 returne.. 2022. 9. 26. [JavaScript] 옵셔널 체이닝(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 property .. 2022. 9. 23. [JavaScript] 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. [JavaScript] Promise 메서드 사용하기 (ft. all/allSettled/race) Promise 메서드에 대해 알아보기 전에 만약 Promise를 모른다면 아래 링크를 통해 대략적으로 이해하고 오자.[ES6+] Promise란? - 비동기 처리를 위한 객체 [ES6+] Promise란? - 비동기 처리를 위한 객체ES6부터 정식으로 지원해주기 시작한 Promise 객체에 대해 알아보자. Promise란 말 그대로 '약속(프로미스)'을 의미하는데, 이는 최종 결과를 반환한다기보다는 미래의 어떤 시점에 결과를 제공하겠mine-it-record.tistory.com Promise 자체에서 제공하는 메서드에 대해 알아볼 건데, 전체적으로 알아보면 내용이 길어지니 알아두면 좋을 메서드에 대해서만 알아보고자 한다.1. Promise.allPromise.all은 매개변수로 주어진 배열의 모든 Pr.. 2022. 7. 26. 이전 1 2 3 4 ··· 11 다음 반응형
