자바스크립트의 혁명이라 할 수 있는 ECMAScript 2015(ES6) 이후 추가된 자바스크립트 최신 문법 중 자주 이용할 만한 기능들을 추려 정리해 보려 한다. 들어가기에 앞서 😡은 과거의 문법을, 😊은 최신 문법을 의미한다는 점을 참고해 봐주시길 바란다. 문자열 최신 문법 String.prototype.replaceAll()일치하는 모든 문자열을 replaceString.prototype.replace()는 처음 일치하는 문자열만 바꾸는 것이므로 과거에는 추가적으로 정규 표현식을 사용해 왔지만 이제는 그럴 필요가 없어짐.// 😡console.log("문자열에서 여러번 나오는 문자열을 한꺼번에 변경할 수 있습니다.".replace(/문자열/g,""));// 에서 여러번 나오는 을 한꺼번에 변..

먼저 UserList.js 파일을 생성하고 아래 소스를 코딩한다.import React from 'react'; // useRef 사용function UserList() { const users = [ { id: 1, username : 'aaa', email : 'hi@gmail.com' }, { id: 2, username : 'tester', email : 'tester@gmail.com' }, { id: 3, username : 'developer', em..

find는 이전 포스트에서 findIndex 등과 다룬적이 있습니다. 본 포스트와 같이 보시면 좋을 것 같습니다. developing-move.tistory.com/11 Javascript 배열 내장 함수 정리(indexOf, findIndex, find) indexOf는 내가 원하는 텍스트 위치를 알려준다. const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; const index = animals.indexOf('사자'); console.log('사자의 위치는 : ' + index); 하지만 i.. developing-move.tistory.com Find는 설정된 배열의 특정한 요소를 찾는다. Find는 조건을 통해 특정 값을 가져올 필요가 있을 때 주로 사용한다..

every는 ES6부터 지원하는 문법으로 특정 배열이 어떤 조건에 대해서 모두 만족하는 지를 체크한다. every는 다양한 용도로 활용이 가능한데 백엔드 뿐만 아니라 프론트엔드에서도 페이지 랜더링을 할 때 설정한 모든 조건이 만족하는 것을 체크하는 것 등에 쓰일 수 있다. 예를 들어 UI 페이지를 만들었을 때 회원 가입디 외어있고, 로그인을 했고 회원이 추천코드를 받았을 때만 보여주는 화면을 만든다고 하면 여러번의 if문 처리가 필요하다. 이럴 때 every를 쓰면 간단하게 표현할 수 있다. 예시 소스 'use strict' // 1보다 큰 수만 모아 놓은 배열 생성 const arr = [2, 3, 4]; const isBiggetThanOne = arr.every(key => key > 1); con..

shift 는 첫번째 원소를 배열에서 추출한다. const numbers = [10, 20, 30, 40]; const value = numbers.shift(); console.log(value); console.log(numbers); pop은 맨 마지막 원소를 배열에서 추출한다. const numbers = [10, 20, 30, 40]; const value = numbers.pop(); console.log(value); console.log(numbers); unshift는 shift의 반대 개념으로 배열의 맨 앞에 새 원소를 추가한. const numbers = [10, 20, 30, 40]; numbers.unshift(5); console.log(numbers); concat은 여러 개의..

splice는 배열의 특정 항목을 자를 때 사용한다. splice를 사용할 때 첫 번째 인자 값에는 시작점이고 두 번째 인자는 시작점부터 몇개까지 지울지를 적어준다. const numbers = [10, 20, 30, 40]; // 배열 선언 const index = numbers.indexOf(30); // 삭제할 인덱스 추출 let delList = numbers.splice(index, 1); // 삭제 리스트 console.log(numbers); // 삭제 후 배열 출력 console.log(delList); // 삭제 항목 출력 3행과 같이 splice한 항목을 변수에 담게 되면 삭제된 항목이 무엇인지 알 수 있다. slice 는 splice와 같이 배열을 잘라내는 용도로 사용되나 기존의 배열..