본문 바로가기

전체 글492

[ 모던 자바스크립트 스터디 ] 자주 사용하는 정규표현식 (아이디 사용가능, 이메일 정규표현식, 핸드폰 번호, 특수문자 표함여부) 이전 포스팅에서 다뤘던 정규표현식의 연장선으로 자주 쓸 것 같은 표현식들 기록해둔다. // 특정 단어로 시작하는지 검사 const url = 'https://google.com'; /^https?:\/\//.test(url); // 특정 단어로 끝나는지 검사 const url = 'https://google.com'; /com$/.test(url); // 숫자로만 이루어진 문자열인지 검사 const target = '12345'; /^\d+$/.test(target); // 하나 이상의 공백으로 시작하는지 검사 const target = 'HI!'; /^[\s]+/.test(target); // 아이디로 사용가능한지 검사 const id = 'abc123'; // 알파벳 대소문자 또는 숫자로 시작하고 끝.. 2022. 10. 22.
[ 모던 자바스크립트 스터디 ] 정규 표현식 학교 다닐때 배웠던 기억이 새록새록 나는 것 같다. const tel = '010-1234-567팔'; const regExp = /^\d{3}-\d{4}-\d{4}$/; regExp.test(tel); // false 정규 표현식 생성 두가지 방법이 있다. 정규표현식 리터럴과 RegExp 생성자 함수를 사용하는 것이다. 일반적으로는 정규 표현식 리터럴을 사용한다. const target = 'Is this all there is?'; const regexp = /is/i; regexp.test(target); -> true 여기서 정규표현식의 /(슬래시) 뒤 i 는 대소문자를 구별하지 않고 검색하는 플래그이다. test 메서드는 target 문자열에 대해 정규표현식 regexp 패턴을 검색하여 매칭 결.. 2022. 10. 22.
[ 모던 자바스크립트 스터디 ] 배열 평탄화 + 배열 고차 함수 배열 평탄화 ES10 에서 도입된 flat 메서드는 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화한다. [1, [2, 3, 4, 5]].flat(); // [1, 2, 3, 4, 5] [1, [2, [3, [4]]]].flat(Infinity); // [1, 2, 3, 4, 5] 인수로 평탄화할 깊이를 전달할 수 있는데, Infinity 를 넘기면 중첩 배열 모두를 평탄화 한다. 실제로 쓰일 일이 종종 있었던 것 같아 기록해 놓는다. 고차 함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다. 고차 함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 특히 배열은 유용한 고차 함수를 제공한다. Array.prototype.sort sort .. 2022. 10. 21.
[ 모던 자바스크립트 스터디 ] 클래스 자바스크립트의 클래스는 함수이며, 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 보여지게하는 문법적 설탕이다. 클래스와 생성자 함수와의 차이점을 몇가지 정리해보자. 클래스는 new 연산자 없이 호출할 수 없음 클래스는 extends 와 super 연산자 제공함 클래스는 호이스팅이 발생하지 않는 것처럼 동작함 클래스 내부 모든 코드는 strict mode 가 지정되어 실행됨 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enumerable]] 값이 false임 생성자 함수와 클래스는 프로토타입 기반의 객체지향을 구현했다는 공통점이 있지만, 클래스는 생성자 함수 기반 객체 생성방식 보다 견고하고 명료하다. 그렇기에 이 책에서는 클래스를 새로운 객체 생성 매.. 2022. 10. 14.
[ 모던 자바스크립트 스터디 ] 클로저(closure) MDN 에서 클로저는 아래와 같이 정의한다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } innerFunc(); } outerFunc(); const x = 1; function outerFunc() { const x = 10; innerFunc(); } function innerFunc() { console.log(x); // 1 } outerFunc(); 자바스크립트는 렉시컬 스코프를 따르는 프로그래밍 언어기 때문에, 두 코드의 실행 결과가 차이가 있는 것이다. 아마 예에전의 포스팅에서도 한번 다뤘었을텐데, 자바스.. 2022. 10. 14.
[ 모던 자바스크립트 스터디 ] 실행 컨텍스트 소스코드 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 소스코드 타입 설명 전역 코드 전역에 존재하는 소스코드로, 전역에 정의된 함수나 클래스의 내부 코드는 포함되지 않는다. 함수 코드 함수 내부에 존재하는 소스코드로, 함수 내부에 중첩된 함수나 클래스 등의 내부 코드는 포함되지 않는다. eval 코드 빌트인 전역함수인 eval 함수에 인수로 전달되어 실행되는 소스코드를 말한다. 모듈 코드 모듈 내부에 존재하는 소스코드를 말한다. 모듈 내부 함수, 클래스 등의 내부 코드는 포함되지 않는다. 소스코드를 왜 굳이 4가지 타입으로 나누었는가? 이 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이다. 더보기 전역 코드 전역 코드는 전역 변수를 관리하기 위해.. 2022. 10. 12.

티스토리툴바