javascript/javascript50 자바스크립트 match() 함수 특정 문자 찾기 자바스크립트에서 문자열 내에서 특정 문자를 찾아야 하는 경우가 종종있다. 다양한 방법이 있는데, 오늘은 그 중에서 match() 함수를 활용한 방법을 정리해보려고 한다.match() 함수는 전체 문자열에서 찾고자 하는 문자를 매개변수로 전달하면 결괏값을 배열 형태로 반환해주는 함수다. 만약 찾고자 하는 값이 없으면 null이 반환된다. 사용방법은 매우 간단하지만 해당 함수는 어떠한 특징을 가지고 있는지 하나씩 살펴보도록 하자.match() 함수의 특징자바스크립트의 match() 함수는 문자열 메서드 중 하나로서, 대상 문자열 내에서 정규 표현식과 일치하는 부분을 찾아주는 기능이다. match() 함수는 주어진 문자열에서 정규 표현식과 일치하는 부분을 배열로 반환하는데, 이 때, 정규 표현식을 매개변수로 .. 2024. 5. 7. 자바스크립트 화살표 함수란 무엇인가 자바스크립트의 화살표 함수는 함수를 정의하는 또 다른 방법 중 하나다. 보통 익명 함수라고도 한다. 이름에서도 유추할 수 있듯이 함수 형태는 이름이 없고, 중간에 화살표를 사용해 간결하게 작성하는 방법이다. 화살표 함수는 () => {} 와 같은 형식으로 작성이 되며, 기존의 함수 작성 방법보다 훨씬 더 간결한 형태라고 할 수 있다.화살표 함수는 과연 쓸만한 함수인지... 함수의 특징과 활용 사례 등을 살펴보자.화살표 함수 (익명 함수)화살표 함수는 ES6(ECMAScript 2015)에서 도입된 새로운 형태의 함수 문법이다. 기존의 함수 형태보다 표현식이 더 간결하고 가독성이 좋으며, 주로 콜백 함수나 간단한 함수를 작성할 때 많이 사용된다.문법화살표 함수는 () => {} 형태로 작성되며, 화살표 왼.. 2024. 5. 5. 자바스크립트 reduce() 함수의 특징과 활용 오늘은 자바스크립트의 reduce() 함수에 대해 정리해보려고 한다. reduce() 함수는 배열을 순회하면서 요소의 값을 누적시켜 합을 구할 수 있도록 도와주는 기능이다. 일반 for문을 사용하여 누적을 해도 되지만 누적을 위해 만들어진 함수라고 하니 어떤 특징과 장점들이 있는지 알아보자.reduce() 함수의 개념과 특징자바스크립트의 reduce() 함수는 배열의 각 요소에 대해 지정된 콜백 함수를 실행하고, 그 결과를 하나의 값으로 축약하는 함수다.reduce() 함수는 배열을 순회하면서 각 요소를 처리하고, 그 결과를 누적하면서 최종값을 반환하는 구조다.함수의 특징누적된 반환값reduce() 함수는 배열의 각 요소에 대해 지정된 콜백 함수를 지정하고, 그 결과를 누적하여 하나의 값으로 반환한다.초.. 2024. 4. 29. 자바스크립트 filter() 함수의 특징과 활용에 대한 내용 자바스크립트를 개발하다 보면 배열 객체를 다루는 일이 정말 많다. 배열 안의 특정 요소를 필터링하거나 특정 조건에 부합하는 요소만 따로 추출해 처리해야 하는 경우가 많다. 이러한 상황에 적합한 함수가 바로 filter() 함수다. 함수 명 그대로 필터를 시켜주는 기능을 하는데, 배열을 기준으로 특정 조건에 부합하는 요소만 모아서 반환시켜 주는 방식이다.그렇다면 filter() 함수는 어떤 특징이 있는지, 어떤 상황에 활용되는지 자세히 살펴보도록 하자.filter() 함수의 개념과 특징filter() 함수는 배열의 각 요소에 대해 제공된 함수를 호출하고, 그 함수가 true를 반환하는 요소로 새로운 배열을 생성해 반환하는 기능이다. 이 함수는 주어진 조건에 따라 배열을 필터링하는 데 유용하게 사용된다.조건.. 2024. 4. 27. 자바스크립트 some() 함수의 개념과 사용 방법 자바스크립트를 개발하다 보면 for문을 사용하여 로직 처리해야 하는 경우기 정말 많다. 기본 for문을 제외하고 정말 다양한 종류의 반복문 처리하는 기능이 있는데, 오늘은 그중에서 some() 함수에 대해서 정리해보려고 한다. 배열 객체를 기준으로 루프를 돌며 반복 처리한다는 개념은 같지만 내부적으로 처리되는 방식이 조금 다르다는 점이 있다. some() 함수는 어떤 차이가 있는지 개념과 특징, 사용법 등을 알아보자.some() 함수의 개념과 특징some() 함수는 배열의 각 요소에 대해 제공된 함수를 호출하고, 그 함수가 적어도 하나에 대해 true를 반환할 때 반복문을 종료하고 최종 결괏값을 true로 반환하게 된다. 그렇지 않으면 마지막 요소까지 확인하면서 true가 없다면 false를 반환한다.조.. 2024. 4. 26. 자바스크립트 querySelector와 querySelectorAll 개념과 활용 오늘은 자바스크립트의 내장 함수인 querySelector에 대해서 정리해 보려고 한다. querySelector 함수는 document 요소를 간단하게 조회 및 조작할 수 있는 기능이다. 자바스크립트 기반의 개발을 하게 된다면 자주 사용하는 함수이지만 습관처럼 사용하는 것보다 기능을 조금 더 깊이 있게 배우고 익혀두는 것이 좋다. querySelector 자바스크립트의 querySelector 함수는 객체 DOM을 통해 HTML 내에서 요소를 선택하는 데 사용되는 기능이다. 이 함수는 css 선택자를 사용하여 요소를 선택하고 반환한다. 1. 요소 선택 querySelector를 사용하여 HTML 내에서 원하는 요소를 선택할 수 있으며, 선택자를 사용하여 단일 요소를 선택하며, 해당 요소가 여러 개 존재.. 2024. 4. 16. [javascript] 천단위 콤마 찍기 (add comma) 오늘은 자바스크립트 개발을 하면서 정말 많이 사용하는 콤마 찍는 기능에 대한 내용을 정리해 보려고 한다. 기능은 정말 간단하지만 사용 빈도가 매우 많고 다양하기 때문에 한번 정리해 두면 두고두고 활용할 수 있는 유용한 기능이다. 자바스크립트의 순수 기능이기 때문에 해당 함수는 자바스크립트 기반의 라이브러리에서는 모두 호환이 된다. 특히 SPA (React, vue, React 등) 자바스크립트 기반이라면 모두 활용이 가능하다. 천 단위의 콤마 함수 천 단위의 콤마 함수는 일반적으로 숫자를 입력받아 천(1000) 단위마다 쉼표(,)를 추가하여 표현하는 기능의 함수다. 이 함수는 주로 금액이나 숫자를 사용자에게 표시할 때 사용되며, 숫자의 가독성을 높이고 이해하기 쉽게 도와준다. 기능은 매우 간단하지만 이러.. 2024. 4. 16. [자바스크립트 + Chart.js] Radar Chart 만들기 (레이더 차트) 안녕하세요. 오늘은 자바스크립트와 Chart.js를 활용하여 Radar Chart를 만들어 보려고 합니다. 레이더 차트는 보통 제품이나 서비스들을 비교해야 하는 경우, 사람의 분석 능력 비교, 이상치를 식별해야 하는 경우 등에서 활용할 수 있습니다. 저는 아직까지 레이더 차트를 사용해 본 적은 없지만 한 번쯤은 사용해보고 싶었기 때문에 이렇게 포스팅을 통해서라도 학습을 하고자 했습니다. 차트 관련 라이브러리들은 사용법이 워낙 간단하고 데이터 세팅만 잘해준다면 어렵지 않기 때문에 한 번만 학습해 놔도 필요한 상황이 온다면 활용하기 좋을 것 같습니다. 레이더 차트 동일한 지점에서 시작하는 축에 표시된 3개 이상의 정량적 변수의 2차원 차트 형태로 다변량 데이터를 표시하는 그래픽 방법입니다. 차트의 형태는 거.. 2023. 2. 15. [자바스크립트 + Chart.js] 폴라 차트 (Polar Chart) 만들기 안녕하세요. 오늘은 자바스크립트와 Chart.js를 활용하여 Polar Chart를 만들어 보려고 합니다. Polar Chart란 원형에서 각 축과 반경축을 사용하여 시각화하는 차트입니다. 지난번 포스팅의 파이 차트와 유사하면서 다른 느낌의 차트입니다. 어떻게 다른지 예제를 통해서 알아보고 파이 차트와 비교까지 해보도록 하겠습니다. 1. Polar Chart 예제 import Chart.js 우선 Chart.js 라이브러리를 cdn 방식을 통해 연동해 줬습니다. HTML canvas 요소 추가 다음은 HTML 영역에 canvas 태그 요소를 추가해 줍니다. Chart.js는 canvas를 기반으로 차트를 그리기 때문에 반드시 canvas 태그로 생성해 줘야 하며, 자바스크립트에서 canvas를 호출할 값.. 2023. 2. 14. [자바스크립트 + Chart.js] Pie 차트 예제 만들기 (Pie Chart, Doughnut Chart) 안녕하세요. 오늘은 자바스크립트와 Chart.js를 활용하여 Pie 모양의 차트와 Doughnut 모양의 차트를 만들어 보려고 합니다. 요즘 차트 만드는 것을 많이 하다 보니 계속 차트 관련 글을 작성하고 있는데요. 차트 만드는 게 처음에는 조금 어려운 것 같아도 하다 보면 시각적인 효과가 크다 보니 재미있기도 하고 배우는 것도 금방인 것 같아요! 지난번에는 막대 차트와 라인 차트를 만들었고, 오늘은 이어서 Pie와 Doughnut 차트를 만들려고 합니다. 두 모양 모두 원 모양으로 Pie는 피자 조각처럼 생겼고, Doughnut은 가운데가 뚫려있는 도넛의 모양을 하는 차트입니다. 이런 모양의 차트는 유사한 데이터의 비중을 서로 비교할 때 적절한 것 같아요! 그럼 Pie 차트와 Doughnut 차트는 어.. 2023. 2. 12. 이전 1 2 3 4 5 다음 728x90
