본문 바로가기

✨ Front-end/자바스크립트(JS)29

[JavaScript] Distructuring의 개념과 사용 방법 Distructuring이란? ~의 구조를 파괴하다. 라는 의미이며, 기존 변수 할당 방식을 마치 배열처럼 선언해 분할할당하도록 하는 기능이다. Array 분할 할당 ex1) ex2) Object 분할할당 2023. 9. 21.
[JavaScript] Spread 연산자의 개념과 사용방법 Spread 연산자 스프레드 연산자는 이터러블 오브젝트와 엘리먼트를 하나씩 분리하여 전개할 때 쓰이는 연산자이다. 전개한 결과를 변수에 할당하거나 호출하는 함수의 파라미터 값으로 사용할 수 있다. 함수 파라미터 매개변수로 값을 받을 때마다 각각 하나씩 출력되며, 보다 많은 매개변수를 넣으면 아래와 같이 undefined가 뜬다. Rest파라미터 호출받는 함수 파라미터에 function(...rest)와 같이 spread 연산자로 파라미터를 작성한 형태를 rest 파라미터라고 한다. ex1) ex2) ex3) ex4) Array-Like Array는 아니지만, Array처럼 사용할 수 있는 Object를 Array-Like라고 한다. 순차적으로 작성되야하는데, 10과 zoo가 0, 1이 아니라 undefi.. 2023. 9. 21.
[JavaScript] ES6 화살표 함수 arrow arrow 함수란? ES6에서 도입된 새로운 함수 표현 방식이다. 화살표 함수는 함수를 간결하고 명료하게 작성할 수 있도록 도와주며, 주로 익명 함수의 선언과 사용에 활용된다. 파라미터 매개변수 왼쪽과 같이 function(one, two) 가 (one, two) => 로 바뀌게 되는 것이다. 만약 function add(one , two) 나 function add2(one, two), function add3(one, two) 처럼 함수 명을 간단하게 없애버리고, 익명으로 대체하여 변수에 넣어주기 편하다. 파라미터가 하나일 경우 ( ) 를 생략할 수 있으며, 만약 파라미터가 없을 경우 ( ) 만 쓰고 함수 선언 가능. 객체 {key : value} 형태의 Object를 반환하기 위해서는 소괄호 ( ).. 2023. 9. 21.
[JavaScript] 정규 표현식(RegExp) RegExp란? Regular Expression 의 줄임말로, 정규 표현식을 나타내는 자바스크립트의 내장 객체이다. 조건 1. 5~8자 이내여야 한다. 2. 반드시 영문(대, 소문자)로 시작해야한다. 그 외 나머지는 영문(대, 소문자) 또는 숫자로 만들 수 있다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var patt = new RegExp("^[a-zA-Z][0-9a-zA-Z]{4,7}$") ^ : 문자열의 시작 지점을 나타낸다. [a-zA-Z] : 첫 번째 문자는 영어 대문자 또는 소문자로 시작해야 한다. [0-9a-zA-Z] : 나머지 문자는 숫자 또는 영어 대문자 또는 소문자로 이뤄져야한다. {4, 7} : 총 길이는 4에서 7자 사이여야 한다. $ : 문.. 2023. 9. 1.