본문 바로가기

자바스크립트19

[JAVASCRIPT] this가 가리키는 객체 (메서드, 함수, 화살표 함수에서) this 1. 전역 컨텍스트에서의 this 전역 컨텍스트에서의 this는 전역 객체를 참조합니다. 전역 객체란 node 환경에서는 global 객체, 브라우저에서는 window 객체입니다. 2. 함수 안에서의 this 여기서도 여전히 전역 객체를 참조합니다. 함수 블록 안이라고 해서 컨텍스트가 좁혀지지 않습니다. function someFunc() { console.log(this) } someFunc(); // Window {0: Window, window: Window, self: Window, document: document, name: "", location: Location, …} 단, 엄격모드(use strict)에서는 함수 안에서의 this가 undefined입니다. 'use strict'.. 2024. 1. 5.
[JAVASCRIPT] 배열 vs 객체, 배열보다 객체를 써야 하는 경우, 배열을 객체로 바꾸는 방법(array to object) 배열 vs 객체 애플리케이션에서 데이터를 다룰 때에는 데이터의 특성과 용도에 맞게 적절한 자료구조를 사용해야 합니다. 배열과 객체는 모두 대량의 데이터를 다룰 때 활용할 수 있는 자료구조이며, (사실 자바스크립트에서는 배열도 객체입니다만) 내장 메서드를 활용하면 간단하게 양쪽 간에 형태를 서로 변환할 수 있습니다. 형태를 변환해주어야 하는 경우의 예로는 외부에서 가져온 데이터의 구조가 애플리케이션과 궁합이 맞지 않는 경우, 자체적으로 구현한 자료구조라고 하더라도 형식을 변환해 줌으로써 순간적인 성능 향상 등의 이점을 얻을 수 있는 경우 등이 있습니다. 배열을 객체로 바꿔줘야 하는 경우 배열 내의 요소에 접근하기 위해서는 우선 검색을 통해 데이터에 접근해야 합니다. 이때 배열 내의 각 요소를 특정할 수 있.. 2024. 1. 3.
[JAVASCRIPT] 문자열이 특정 문자열로 시작하는지(or 끝나는지) 확인하는 방법 - startsWith(), endsWith() startsWith(), endsWith() 문자열 파싱이나 검색은 알고리즘 문제에 나오는 단골손님입니다. 문자열과 관련된 기능을 자유롭게 다루지 못하면 문제 풀이의 시작조차 어려운 경우가 많습니다. 이 글에서는 자바스크립트 String에 있는 메서드들 중 startsWith과 endsWith에 대해서 살펴보겠습니다. 글 하단의 MDN 링크를 타고 들어가시면 다른 여러 메서드들을 보실 수 있습니다. 한글 번역이 잘 되어 있습니다. 1. startsWith 구문 startsWith(searchString) startsWith(searchString, position) 문자열이 searchString으로 시작하면 true, 아니면 false를 반환합니다. 두 번째 인자로 position값을 전달하면 탐색할 .. 2024. 1. 3.
[JAVASCRIPT] 랜덤 숫자(난수) 생성하는 방법 - Math.random() 난수 생성하기 자바스크립트에서 특정 범위 내에서 난수(무작위의 숫자)를 생성하는 방법에 대해서 살펴보겠습니다. 자바스크립트의 내장 객체 Math의 random() 메소드를 사용합니다. Math.random(); 0 이상 1 미만의 실수를 반환합니다. 예시 const getRandom = () => Math.random(); console.log(getRandom()); console.log(getRandom()); console.log(getRandom()); console.log(getRandom()); console.log(getRandom()); // 0.1042365462750956 // 0.3437076315867258 // 0.18289290463351882 // 0.98123156291040.. 2023. 12. 28.
[JAVASCRIPT] 캐싱 함수 만들기 / 데코레이터(decorator) 캐싱 함수(Caching function) 로직이 무겁고 호출이 잦은 함수는 캐싱기능을 활용하면 성능을 높일 수 있습니다. 단, 캐싱기능을 구현하려는 함수는 퓨어(pure) 해야 합니다. = input에 따른 output이 항상 일정함. = side effect가 없음. 예시 함수 someFunc는 비용이 높은 연산을 수행하고, 파라미터(num)에 따른 항상 동일한 값(num+1)을 반환한다고 가정하겠습니다. function someFunc(num) { console.log("Expensive"); // ... expensive code block return num + 1; } 함수를 실행시켜 보면 someFunc(1); // Expensive someFunc(1); // Expensive 첫 번째와 .. 2021. 8. 30.
[JAVASCRIPT] 중첩 객체에서 특정 프로퍼티의 합 구하기, 재귀함수 활용 중첩 객체에서 프로퍼티의 합 구하기 코딩 테스트에서 자주 활용되는 개념입니다. 간단해 보이지만 의외로 헤매는 경우가 많습니다. 아래와 같은 타입을 가지는 product 객체가 있다고 가정합니다. name: string; price: number; products 객체에는 product들이 아래와 같이 여러 중첩 객체로 포함되어 있습니다. const products = { fruits: [ { name: "apple", price: 1000, }, { name: "banana", price: 2000, }, ], clothes: { bottom: [ { name: "jean", price: 3000, }, ], top: { shirts: [ { name: "blue shirt", price: 3500, }.. 2021. 8. 19.
[JAVASCRIPT] 구조 분해를 사용하여 변수값 교환하기 변수값 교환 ES6의 구조 분해 문법(Desctructuring)은 객체의 프로퍼티나 배열의 요소를 변수로 쉽게 추출할 수 있게 해주는 문법입니다. 이 문법을 활용하면 두 개 이상의 변수의 값을 간단하게 교환할 수 있습니다. 구조 분해 없이 변수의 값을 교환할 때에는 주로 아래와 같이 구현합니다. let str1 = "One"; let str2 = "Two"; console.log(str1, str2); // One Two let temp = null; temp = str1; str1 = str2; str2 = temp; console.log(str1, str2); // Two One temp라는 새로운 변수를 활용해서 한쪽의 값을 임시로 저장한 후, 각 변수에 차례대로 값을 초기화해 주는 방식입니다. .. 2021. 8. 19.
[JAVASCRIPT] 정규식(regExp) - 한글 영어 숫자만 입력받기 2023. 03. 18 [수정] or로 잘못설명된 '|' 를 삭제하였습니다. 김코더님 감사합니다. 한글, 영어, 숫자만 입력받는 정규표현식 정규식(정규표현식)은 문자열을 처리하기 위한 패턴을 정의하는 표현식입니다. 문법은 조금씩 다르지만, 자바스크립트뿐만 아니라 다양한 프로그래밍 언어에서 지원합니다. 정규식을 적절히 활용하면 문자열을 다루는 코드의 가독성이 좋아지고, String 객체의 내장 메서드로는 해결할 수 없는 다양한 작업도 해낼 수 있습니다. 영문 아이디, 이메일, 전화번호 등 대부분의 테스트는 validator 패키지로 쉽게 해결할 수 있습니다만 영문아이디 - isAlphanumeric() 이메일 - isEmail() 핸드폰번호 - isMobilePhone() https://www.npmjs... 2020. 12. 23.
[JAVASCRIPT] 배열 내의 요소 무작위로 섞기(shuffle) 배열 랜덤 섞기 Shuffle 자바스크립트에서 배열 내의 원소를 무작위로 섞는 예시입니다. Math.random 메서드를 활용하여 배열의 요소들을 순회해야 합니다. shuffle 함수입니다. const shuffleArray = array => { for (let i = 0; i < array.length; i++) { let j = Math.floor(Math.random() * (i + 1)); // j는 0이상 i이하의 수 [array[i], array[j]] = [array[j], array[i]]; // i번째 요소와 j번째 요소의 값을 변경 } return array; }; i번째와 j번째를 바꾸는(swap) 코드는 아래와 같습니다. const temp = array[i]; array[i] =.. 2019. 11. 2.
[JAVASCRIPT] 배열 필터링하는 방법(걸러내기) - filter filter 자바스크립트 배열의 filter 메소드를 활용해서 요소를 필터링하는 방법입니다. 구문 result = arr.filter(callbackFn) 배열의 모든 요소를 순회하면서 콜백 함수(callbackFn)의 인자로 전달합니다. 콜백 함수가 true를 반환하면 요소가 유지되고 false를 반환하면 요소를 버립니다. 배열 arr const arr = [ 1, 2, 3, 4, 5]; arr를 필터링하여 arr2를 생성하겠습니다. const arr = [1, 2, 3, 4, 5]; console.log(arr); // [1, 2, 3, 4, 5] const arr2 = arr.filter(number => true); console.log(arr2); // [1, 2, 3, 4, 5] 배열의 요소에.. 2019. 8. 10.
[JAVASCRIPT] 배열 정렬하는 방법(숫자 오름차순/내림차순, 임의정렬) - sort sort 자바스크립트 배열 메소드 sort를 활용하여 요소를 정렬하는 방법입니다. 구문 arr.sort([compareFunction]); 원본 배열입니다. const arr = [5, 100, 20]; 비교함수를 전달하지 않을 때에는 숫자의 크기에 관계없이 문자열로 변환된 후 Unicode를 기준으로 정렬합니다. const arr = [5, 100, 20]; console.log(arr); // [5, 100, 20] arr.sort(); console.log(arr); // [100, 20, 5] 숫자가 문자열로 변환되어서 비교되기 때문에 숫자의 크기에 관계없이 1로 시작하는 100이 2로 시작하는 20보다 앞에 나옵니다. 숫자의 크기에 따라 정렬하기 위해서는 비교함수를 전달해야 합니다. 오름차순 정.. 2019. 8. 7.
[JAVASCRIPT] 배열에 요소 추가하는 방법 - push, unshift push / unshift 자바스크립트에서 기존 배열에 새로운 요소를 추가하는 방법입니다. 1. push 배열의 맨 뒤에 요소를 추가합니다. 추가한 요소를 포함한 배열의 길이를 반환합니다. 구문에 보이듯이 여러 개의 요소를 한 번에 추가할 수도 있습니다. arr.push(element1[, ...[, elementN]]) const color = ["red", "white"]; console.log(color); // ["red", "white"] color.push("black"); console.log(color); // ["red", "white", "black"] color.push("sky", "pink"); console.log(color); // ["red", "white", "black",.. 2019. 8. 7.


        
답변을 생성하고 있어요.