JavaScript 사용에 관련된 다양한 빌트인 메소드와 기능을 설명하는 튜토리얼을 다룹니다.
또한 다양한 상황에 사용할 수 있는 예제와 설명을 통해 바로 실제 상황에 적용할 수 있는 스크립트를 제공합니다.
원본: 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
원본: https://jsremote.jobs/tutorials/join/ 배열은 자바스크립트 프로그래밍에서 필수로 사용됩니다. 이러한 배열에는 다양한 메소드가 있는데 이 중 문자열을 하나로 합치는 기능은 반드시 알아야할 메소드 중 하나입니다. 이 포스트에서는 배열 원본을 변경하지 않고 모든 요소를 하나의 문자열로 리턴하는 join() 메소드에 대해 알아보겠습니다. join 메소드 자바스크립트의 join() 메소드는 배열의 모든 요소를 연결하여 하나의 문자열을 생성합니다. 이 배열 요소들은 쉼표나 기호 … Read more
원본: https://www.freecodecamp.org/news/javascript-split-a-string-string-to-array-js-method/ 문자열을 배열로 자르려면 자바스크립트의 split() 메소드를 사용할 수 있습니다. split 메소드의 기본 구문 optional-separator 매개변수는 문자열을 여러 조각으로 자를 위치를 알려주는 패턴입니다. optional-limit 매개변수는 잘려진 하위 문자열의 갯수를 제한하는 값 입니다. split 메소드 코드 예제 첫 번째 예제에서는 “I love shinyks.com” 문자열을 사용해 보겠습니다. 메소드에 optional-separator 구분자를 전달하지 않는 경우 전체 문자열을 하나의 … Read more
원본: 자바스크립트 배열에서 요소 제거 자바스크립트의 배열은 여러 값을 묶을 수 있고 그 값에 루프를 돌 수 있게 해줍니다. 이를 통해 다양한 방법으로 값을 추가하거나 제거할 수 있습니다. 하지만 단순한 Array.remove() 메소드는 존재하지 않습니다. 그 대신 자바스크립트 배열은 값을 정리할 수 있는 다양한 방법을 제공합니다. 예를 들면 pop() 메소드를 통해 배열의 끝부터, shift() 메소드로 배열의 … Read more
원본: https://careerkarma.com/blog/javascript-shift-unshift 자바스크립트의 shift() 메소드는 배열의 첫 번째 요소를 제거하고 뒤에 있는 요소들을 한 칸 씩 당깁니다. 반면 unshift() 메소드는 배열의 첫 번째 항목에 새 요소를 추가하고 원래 있던 요소들을 한 칸 씩 뒤로 밉니다. 이 메소드들을 사용하면 배열의 시작 부분에서 항목을 추가하거나 제거할 수 있습니다. push(), pop() 메소드는 배열의 끝에 요소를 추가/제거하는 반면 shift(), … Read more
원본: pop and push: Learning Javascript’s Array Methods 이 포스트에서는 배열에 항목을 추가하는 push() 메소드와 항목을 제거하는 pop() 메소드에 대해 알아보겠습니다. push pop 작동 방식 배열의 끝에 항목을 추가하려면 push() 메소드를 사용하고 배열의 끝에서 항목을 제거하려면 pop() 메소드를 사용합니다. 개발자 도구에서 다음의 예제 코드를 입력하고 console.log() 메소드를 통해 테스트할 수 있습니다. 여기서는 push() 메소드를 사용하여 … Read more
원본: https://www.freecodecamp.org/news/filter-arrays-in-javascript/ 대화형 앱을 만들다 보면 긴 목록을 필터링하는 버튼과 같이 동적인 기능을 넣어야 할 때가 있습니다. 또한 지정된 조건에 일치하는 항목만 리턴하도록 다수의 배열을 조작해야 할 수도 있습니다. 이 포스트에서는 자바스크립트 배열을 필터링하는 두 가지 방법을 알아보고 필터링된 요소로 이루어진 새 배열을 리턴하는 방법도 알아보겠습니다. for 문 으로 배열 필터링 ES6가 도입되기 전에는 배열을 … Read more
원본: splice 자바스크립트 배열 메소드 사용 방법 splice() 메소드는 자바스크립트 Array 객체의 빌트인 메소드입니다. 이는 배열의 요소를 제거하거나 새 요소로 교체하여 배열의 내용을 변경할 수 있습니다. 또한 이 메소드는 원본 배열을 수정하고 제거된 요소를 새 배열로 리턴합니다. 이 포스트에서는 splice() 메소드를 사용하여 배열 요소를 제거, 추가, 교체하는 방법을 알아보겠습니다. 먼저 배열 요소를 제거하는 방법을 알아보겠습니다. … Read more
원본: https://linuxhint.com/map-array-in-javascript-array-map-method/ 다른 프로그래밍 언어와 비슷하게 자바스크립트는 데이터를 저장하는 다양한 데이터 타입을 제공합니다. 이러한 데이터 타입 중에는 배열도 있습니다. 배열은 단일 변수에 여러 값을 저장하는 그룹을 의미합니다. 자바스크립트는 배열에 저장된 데이터를 관리, 구성, 접근할 수 있도록 Array 객체를 제공합니다. map 메소드 자바스크립트 Array의 map() 메소드는 원본 배열을 변경하지 않고 각각의 요소에 콜백 함수를 호출하여 새로운 … Read more
원본: 자바스크립트 삼항 연산자 – 문법과 사용 예제 자바스크립트에는 삼항 연산자(ternary operator)라는 연산자가 있습니다. 이 포스트에서는 이 연산자가 무엇이며 소스코드 작성 시 어떻게 사용하는지 알아보겠습니다. 삼항 연산자 이 연산자는 개발자가 정한 조건식을 기반으로 true 표현식과 false 표현식을 평가하는 조건 연산자입니다. 문법은 다음과 같습니다: 먼저 참 또는 거짓를 리턴하는 condition이 있습니다. 참에 해당하는 값에는 true가 있고 … Read more
원본: 자바스크립트의 null 병합 연산자란? null 병합 연산자(nullish coalescing operator)는 ES2020에서 도입된 자바스크립트의 새로운 논리 연산자입니다. 이 포스트에서는 이 연산자가 무엇이며 어떻게 작동하는지 알아보겠습니다. 자바스크립트에는 AND(&&), OR(||), NOT(!), Nullish Coalescing(??) 등의 연산자가 있습니다. null 병합 연산자는 널리쉬 연산자 라고도 부르고 이는 두 개의 피연산자 사이에 사용됩니다. 이 연산자를 이해하려면 “nullish”, “coalescing”, short-circuiting이 무엇을 의미하는지 알아야합니다. … Read more
원본: 자바스크립트의 옵셔널 체이닝 사용 방법 옵셔널 체이닝(optional chaining) 연산자는 중첩된 객체의 속성에 대해 액세스 검사를 수행하는 간결하고 안전한 방법입니다. 이 연산자는 ?. 으로 표시하여 구문의 왼쪽에 위치한 참조가 undefined 인지 null 인지 검사합니다. 참조가 undefined 이거나 null 이면 검사를 중지하고 undefined를 리턴합니다. 참조가 undefined 나 null이 아니라면 오른쪽에 위치한 다음 참조로 액세스 검사를 계속합니다. … Read more
원본: JavaScript Spread Operator 이 포스트에서는 자바스크립트의 스프레드 연산자(spread operator)에 대해 예제와 함께 알아보겠습니다. 스프레드 연산자는 ES6에서 새로 추가된 기능입니다. spread operator 스프레드 연산자(…)는 Array, 반복 가능한 객체 등의 요소를 전개하거나 펼칩니다. 예를 들면: 위 예제의 개발자 도구에서 console.log() 메소드에 전달된 …arrValue는 ‘My’, ‘name’, ‘is’, ‘Jack’을 전달한 것과 동일한 효과를 가집니다. spread operator 배열 복사 … Read more
원본: 자바스크립트의 객체 디스트럭처링 사용 방법 객체 디스트럭처링은 객체에서 속성을 가져오고 변수에 바인딩하는 자바스크립트의 유용한 기능입니다. 또한 디스트럭처링은 코드 한 줄로 여러 속성을 추출하고 중첩된 객체의 속성에 접근할 수 있으며 속성이 존재하지 않을 경우 기본 값을 할당할 수 있습니다. 이 포스트에서는 자바스크립트의 디스트럭처링을 사용하는 방법을 알아보겠습니다. 디스트럭처링 표현식의 필요성 ES2015 이전 환경에서 객체의 속성을 가져오려면 … Read more
원본: How to loop through objects in JavaScript (for…in) 자바스크립트 개발을 하다 보면 나열 가능한 자료형(enumerable dataset)에 루프를 도는 작업을 해야할 때가 있습니다. 이러한 자료형에는 Array, List, Map, 객체 등이 있습니다. 이 포스트에서는 자바스크립트를 사용하여 객체의 key/value 쌍에 대해 루프를 도는 4 가지 방법에 대해 알아보겠습니다. 자바스크립트 객체에서 루프를 도는 방법은 다음과 같습니다: for…in 구문 … Read more
원본: JavaScript for…of Loop 이 포스트에서는 자바스크립트의 for…of 구문을 사용하여 이터러블(iterable) 객체에 반복적으로 접근하는 방법을 알아보겠습니다. 자바스크립트 for…of 루프 ES6 에서는 다음과 같은 이터러블 객체를 반복적으로 접근할 수 있는 새로운 for…of 구문을 도입했습니다. 다음은 이 루프의 구문을 보여줍니다: variable: 각각의 반복적인 접근 때 마다 이터러블 객체의 속성이 변수에 할당됩니다. var, let, const를 사용하여 변수를 선언할 … Read more