자바스크립트의 다양한 빌트인 메소드와 기능을 설명하는 튜토리얼을 다룹니다.
또한 다양한 상황에 사용할 수 있는 예제와 설명을 통해 바로 실제 상황에 적용할 수 있는 스크립트를 제공합니다.
원본: Understanding and Utilizing the JavaScript Set Object 자바스크립트의 Set 객체(집합)는 고유한 값의 모음이며, 각 값은 객체 내에서 한 번만 나타날 수 있습니다. 이 포스트에서는 Set 객체를 사용하는 목적, 사용 방법, 다른 자료구조와의 차이점을 알아보겠습니다. 스크립트를 작성하다 보면 종종 고유한 값의 컬렉션을 관리해야하는 시나리오를 마주하게 됩니다. Array나 Object로 이러한 상황을 처리할 수도 있지만 Set 객체는 … Read more
원본: 4 가지 자바스크립트 배열 검색 방법 자바스크립트에는 배열에서 항목을 검색하는 다양한 방법이 있습니다. 이 중 적합한 방법을 선택하는 것은 사용 사례에 따라 다릅니다. 예를 들면, 특정 조건을 충족하는 배열의 모든 항목을 가져오고 싶을 때, 조건을 충족하는 항목이 있는지 확인하고 싶을 때, 특정 값이 배열에 있는지 확인하고 싶을 때, 아니면 배열에 있는 값의 인덱스를 찾고 … Read more
원본: Exploring Array Find in JavaScript Array.find() 메소드는 ECMAScript 2015(ES6)에 도입되어 모든 최신 브라우저에서 지원되는 메소드입니다. 이 메소드는 배열내의 모든 요소를 검색하여 일치하는 첫 번째 요소를 리턴하거나 찾지 못한 경우 undefined를 리턴합니다. 리턴 값은 동적으로 array, string, number, object 등의 모든 자바스크립트 타입이 될 수 있습니다. 배열 내의 항목을 찾는 기능 면에서는 Array.filter() 메소드와 비슷하지만 … Read more
원본: 자바스크립트 배열 거꾸로 뒤집기: reverse() 메소드 이 포스트에서는 자바스크립트의 배열을 거꾸로 뒤집는 두 가지 방법에 대해 알아보겠습니다. Array 객체의 reverse() 메소드는 마지막 항목을 첫 번째 항목으로 만들고, 첫 번째 항목을 마지막 항목으로 만들어 배열을 반대로 바꿉니다. 그 사이에 있는 다른 항목들도 역시 각각 반전됩니다. reverse() 메소드 사용 방법을 알아보기 전에 메소드를 사용하지 않고 자바스크립트 … Read more
원본: JavaScript indexOf Polyfill 자바스크립트의 indexOf() 메소드는 배열이나 문자열 내 요소의 위치를 찾는 편리한 도구입니다. 이 메소드는 빌트인 메소드지만 상황에 따라 구현을 커스터마이징해야 할 때도 있습니다. 이렇게 polyfill을 만드는 것은 교육적이면서도 실용적일 수 있습니다. 이 포스트에서는 indexOf의 개념을 알아보고, polyfill 생성이 왜 중요한지 설명하고 실제로 구현해 보겠습니다. indexOf() 메소드의 이해 polyfill 생성에 대해 알아보기 전에 … Read more
원본: 자바스크립트 배열에 항목이 있는지 확인 – Array.includes() 자바스크립트의 메소드를 사용하면 특정 요소가 배열에 있는지 확인할 수 있습니다. 또한 이를 이용해 문자열 내에 하위 문자열이 있는지 확인할 수도 있습니다. 찾고자 하는 항목이 배열이나 문자열에 있으면 true를 리턴하고 항목이 없으면 false를 리턴합니다. 이번 포스트에서는 자바스크립트의 includes() 메소드를 사용하여 특정 항목이 배열 내에 있는지, 문자열 내의 하위 … Read more
원본: JavaScript toLowerCase() – How to Convert a String to Lowercase and Uppercase 이 포스트에서는 자바스크립트 문자열을 소문자 및 대문자로 변환하는 방법을 설명합니다. 또한 단어의 첫 글자만 대문자로 만드는 방법과 문장의 모든 단어의 첫 글자를 대문자로 만드는 방법도 알아보겠습니다. toLowerCase 사용 방법 이 메소드는 문자열을 소문자로 변환합니다. 사용 구문은 다음과 같습니다: 위의 구문에서 보이는 바와 … Read more
원본: JavaScript Sort Array – How to Sort an Array Accurately 개발을 하다보면 데이터를 정렬해야 하는 경우가 있습니다. 데이터 정렬 결과가 정확하지 않으면 전체 코드 오작동이나 버그가 발생할 수 있으므로 항상 정확히 정렬해야 합니다. 이번 포스트에서는 자바스크립트에서 배열을 정렬하는 방법을 알아보고, sort() 메소드와 관련된 몇 가지 단점과 보다 정확한 결과를 얻을 수 있는 방법을 살펴보겠습니다. … Read more
자바스크립트에서 공백 제거 목적으로 문자열의 내용을 치환하는 작업은 그리 쉽지 않습니다. 하지만 String 객체의 빌트인 메소드를 사용하면 간단히 원하는 내용을 다른 내용으로 변경할 수 있습니다. 이 포스트에서는 다양한 빌트인 메소드를 사용하여 문자열 내의 공백 문자를 제거하는 방법을 알아보겠습니다. trim() 메소드로 공백 제거 자바스크립트 문자열의 공백을 제거하기 위해 trim() 메소드를 사용할 수 있습니다. 이는 문자열의 시작 … Read more
원본: How to Trim Strings in JavaScript form 필드에서 문자열을 다룰 때 문자열의 시작과 끝에 있는 공백은 제거하는 것이 좋습니다. 이번 포스팅에서는 자바스크립트의 공백(whitespace)과 개행 문자(LF: line feed, CR: carriage return)에 대해 설명하고, 문자열의 시작/끝에 존재하는 공백과 개행 문자를 제거하는 방법을 알아보겠습니다. 공백과 개행 문자 실제 trim() 메소드에 대해 알아보기 전에 이 기능이 어떤 특수 … Read more
원본: Replace All String Occurrences in JavaScript 자바스크립트에서는 특정 문자열을 모두 다른 문자열로 바꾸는 간단한 방법이 없습니다. 이 포스트에서는 문자열 치환을 위해 문자열을 분할한 후 결합하는 방법과 String.replace() 메소드에 정규식을 사용하는 방법으로 모든 문자를 치환하는 방법을 알아보겠습니다. 또한 한번에 문자열의 모든 문자를 바꿀 수 있는 새로운 replaceAll() 메소드도 알아보겠습니다. replaceAll() 메소드는 사용하기 가장 편리한 방법이지만 … Read more
원본: 자바스크립트 String endsWith 메소드 자바스크립트로 개발을 하다보면 주어진 문자열의 끝 문자를 확인해야 하는 상황이 있을 수 있습니다. String 클래스의 endsWith() 메소드는 주어진 문자열이 특정 문자열로 끝나는지 여부를 확인합니다. 이 메소드는 주어진 문자열의 끝에서 단일 또는 여려 분자를 검색하고 해당 문자가 발견되면 true를 리턴합니다. endsWith 문법 구문 메소드의 문법 구문은 다음과 같습니다: 매개변수 매개변수로 다음의 … Read more
원본: 자바스크립트 String startsWith 메소드 자바스크립트의 startsWith() 메소드는 이름에서 알 수 있듯이 주어진 문자열이 특정 문자열로 시작하는지 확인합니다. 문자열이 특정 문자열로 시작하면 true를 리턴하고 그렇지 않다면 false를 리턴합니다. startsWith 문법 구문 이 메소드의 문법 구문은 다음과 같습니다: 여기서 string은 검사할 문자열 입니다. 이는 “searchString”과 “position” 두 개의 매개변수를 받습니다. 매개변수 메소드는 매개변수로 searchString과 position을 받습니다. … Read more
원본: addEventListener 메소드 – 자바스크립트 이벤트 리스너 예제 코드 자바스크립트의 addEventListener() 메소드를 사용하면 버튼을 클릭하여 이벤트가 발생할 때 호출할 함수를 지정할 수 있습니다. 이 포스트에서는 addEventListener() 메소드를 사용하는 방법을 알아보겠습니다. 이벤트와 이벤트 핸들러의 이해 사용자 또는 브라우저가 페이지를 조작하면 이벤트가 발생합니다. 이를 활용해 웹 페이지 요소를 동적으로 변경할 수 있으므로 이벤트는 중요한 역할을 맡고있습니다. 예를 … Read more
원본: HTML Button onclick – JavaScript Click Event Tutorial 웹 사이트를 방문할 때 마다 링크나 버튼 같은 것을 클릭합니다. 링크는 페이지의 특정 부분이나 다른 페이지로 이동합니다. 반면 버튼은 자바스크립트 이벤트에 의해 조작되어 특정 기능을 실행하게 할 수 있습니다. 이 포스트에서는 두 가지 방법을 사용하여 클릭 이벤트를 실행하는 방법을 알아보겠습니다. 먼저 HTML 코드에서 바로 작성할 수 … Read more
원본: RegExp 정규 표현식 객체를 사용하여 이메일 검증하기 웹 개발자로서 사용자의 다양한 입력을 검증하는 것은 매우 중요한 작업입니다. 이 입력 값은 클라이언트와 서버 사이 통신의 시작점이 되기 때문에 모든 것이 올바른 값 이어야 할 필요가 있습니다. 또한 사용자 입력 값이 악의적일 수 있기 때문에 보안 요소도 고려해야합니다. 프론트 엔드에서 부터 입력 값의 유효성을 검사하여 문제를 최대한 … Read more
원본: How to Merge Arrays in JavaScript – Array Concat 자바스크립트로 배열 작업 시 여러 배열을 병합해야하는 경우가 있습니다. 이는 서로 다른 소스에서 온 관련 데이터를 하나의 단일 배열로 합쳐야 하는 경우를 예로 들 수 있습니다. 이렇게 배열을 합치는 방법은 여러가지가 있습니다. 이 포스트에서는 복잡한 방법부터 간단한 방법까지 3 종류의 방법을 알아보겠습니다. 1. Array.concat 메소드로 … Read more
원본: https://www.freecodecamp.org/news/how-to-add-numbers-in-javascript-arrays/ 자바스크립트의 배열은 하나의 변수에 여러개의 값을 순서대로 저장하고 다양한 방법으로 값을 조작하게 해주는 객체입니다. 이 포스트에서는 여러 가지 방법으로 주어진 배열에 있는 모든 숫자의 합계를 계산하는 방법을 알아보겠습니다. 다음 방법을 사용해 배열에 있는 모든 숫자의 합계를 찾는 방법을 알아보겠습니다: 자바스크립트 for 루프를 사용해 배열의 합계 얻기 가장 간단하게 배열에 있는 모든 숫자의 합을 … Read more
원본: https://www.freecodecamp.org/news/reduce-f47a7da511a9/ 자바스크립트의 reduce 메소드는 함수형 프로그래밍의 기본 중 하나입니다. 어떻게 작동하는지, 언제 사용해야 하는지, 어떤 일을 할 수 있는지 하나하나 살펴보겠습니다. reduce 메소드 기본 이 메소드로는 돈의 액수가 나열된 배열이 있고 그 금액을 모두 더하고 싶을 때 사용할 수 있습니다. 개발자 도구에서 코드를 실행하면 위의 화면과 같은 결과를 얻을 수 있습니다. 사용 방법: ES5 … Read more
원본: https://hackernoon.com/understanding-javascripts-array-slice-method 자바스크립트의 slice 메소드는 배열의 일부분을 얕은 복사본(shallow copy)으로 리턴합니다. 매개변수로는 start와 end 두 개의 값을 받으며 모든 배열에서 slice 메소드를 사용할 수 있습니다. 개발자 도구에서 다음의 간단한 예제를 확인해 보겠습니다: 이 메소드에는 start와 end 라는 두 가지 옵셔널 매개변수가 있습니다. 원하는 경우 둘다 사용할 수도 있고 start만 사용하거나 둘 다 사용하지 않을 수 … Read more