1. concat() 연산자 사용 파라미터로 받은 배열이나 값들을 기존의 배열에 합쳐서 새로운 배열을 만들어 리턴 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8, 9]; arr1.concat(arr2, arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 9] arr1.concat(4, 5, [6, 7, 8], 9); // [1, 2, 3, 4, 5, 6, 7, 8, 9] 2. ... spread operator 전개 연산자 사용 spread operator는 원소들을 쪼개어 개별요소로 리턴한다. 이 쪼개진 개별 요소들을 인자로 가지는 새로운 배열을 생성하면 아래와 같다. const arr1 = [1, 2, 3]; cons..
JavaScript
들어가기전.. ES6 문법을 Node로 실행하기 https://www.daleseo.com/js-babel6-node/ Node를 사용하면 자바스크립트(.js)을 실행시킬 수 있다. 위 블로그에 설명이 잘나와있다.(나도 따라함...ㅎㅎ 사실Vue 프로젝트 안에서만 사용해봤기 때문에.. 신기하다..) https://www.daleseo.com/js-module-import/ >> Hello World! >>> CORN : 30 >>> Hello World! >>> CORN : 30 단일 객체 내보내기/불러오기 하나의 자바스크립 모듈 파일에서 단 하나의 객체를 내보내고 불러오는 방법을 알아보자 내보내기(export) 단일 객체를 내보낼 때는 export default 키워드를 사용한다. export defa..
매치된 부분을 캡처하기 정규 표현식의 유용함은 검색한 결과를 저장(capture)해 놓고, 이를 이용해서 다른 일을 하고자 할때 빛을 발한다. 매치된 부분 캡처하기(지역, 전역) 정규 표현식의 match()메서드는 일치하는 부분을 찾아내면 캡처된 값들의 배열을 반환하고, 일치하는 부분이 없으면 null을 반환한다. match()로부터 반환된 배열에는 항상 첫 번째 인덱스에 일치하는 내용 전체가 저장되어 있고, 그 뒤에 캡처된 내용이 순서대로 저장되어 있다. g 플래그가 설정된 전역 정규 표현식을 이용하면 match()메서드는 조금 다른 값을 반환한다. 전역 정규 표현식은 지역(local)정규 표현식과 달리 첫 번째 매치되는 문자열만 찾지 않고 모두 매치되는 문자열을 찾는다. 이 때 각 매치 결과 내에 포..
정규 표현식 컴파일하기 정규 표현식은 여러 단계의 처리과정을 거친다.두 가지 주요한 단계로 컴파일(compilation) 과 실행(execution)이 있다. 정규 표현식이 처음 만들어지면 컴파일이 일어나고, 컴파일된 정규 표현식으로 문자열 내의 패턴을 찾으려고 하는 것이 바로 실행(execution)이다.일부 브라우저는 정규 표현식들의 컴파일 결과를 캐시해 두는 경우가 대부분이다. 그렇기 때문에, 복잡한 정규 표현식을 다루는 경우 나중에 사용할 표현식을 미리 정의해 두면 좋은 속도 향상을 얻을 수 있다. 컴파일된 정규 표현식을 만드는 두 가지 방법 var regex1 = /test/i; var regex2 = new RegExp("test", "i"); console.log(regex1.toString..
정규 표현식 살펴보기 1. 정규 표현식에 대한 설명정규 표현식 => 텍스트내에서 일치하는 문자열을 찾기 위해 문자열의 패턴을 표현하는 방식정규 표현식은 이런 패턴을 정의할 수 있도록 용어(terms) 와 연산(operators)로 구성된다. 정규 표현식을 생성하는 방법 정규 표현식 리터럴을 이용하는 방법 RegExp 객체의 인스턴스를 생성하는 방법 var pattern = /test/; var pattern = new RegExp("test"); 보통 개발시점에 어떤 정규식을 이용할지 알고 있는 경우에는 정규 표현식 리터럴을 사용하고, 실행 중에 문자열을 이용해서 동적 으로 정규 표현식을 생성해야 할 때는 생성자(RegExp)를 이용한다. 정규 표현식과 함께 사용할 수 있는 플래그 i - 대소문자를 구별..
정규 표현식이 멋진 이유 만약, 우리가 특정 데이터가, 미국의 우편번호 형식이 맞는지 boolean 값으로 반환하는 함수를 만든다고 생각해보자. => 99999-9999 (다섯자리 - 네자리)정규표현식을 사용하지 않고, 우편번호 형식을 검사한다면 아래와 같이 짤 수 있다. function isThisAZipCode(candidate){ if(typeof candidate !== "string" || candidate.length != 10) return false; for(var n=0; n
2 실수하기 쉬운 것들 2-1. 객체 확장하기최악의 실수는 Object.prototype을 확장하는 것이다.이 것은 모든 객체가 추가된 프로퍼티를 받는 다는 것을 의미하고, 어떤 객체의 프로퍼티를 순회할 때 새로 추가한 프로퍼티가 같이 순회되어 문제가 될 수 있다.예제 코드(객체에 있는 모든 프로퍼티 이름(key)의 배열을 반환하는 메서드) Object.prototype.keys = function(){ var keys = []; for(var p in this) keys.push(p); return keys; }; var obj = { a : 1, b : 2, c : 3}; console.log(obj.keys().length == 3); // false 코드만 보면 테스트에 성공할 것 같지만, 실패한..
객체 지향과 프로토타입 프로토타입은 객체의 타입을 정의하는데 편한게 사용하는 수단이지만 실제로는 함수의 기능이다.자바스크립트에서 프로토타입은 객체의 프로퍼티를 정의하고, 객체의 인스턴스에 자동으로 적용되는 기능을 정의하는 편리한 수단이다. (청사진 역할, java 클래스와 비슷한 역할을 함) 1. 인스턴스 생성과 프로토타입 모든 함수에는 prototype 프로퍼티가 존재(생성자로 사용하지 않으면 필요 없음)1-1. 객체 인스턴스 생성객체 청사진으로서의 프로토타입 function Corn(){}; Corn.prototype.swingSword = function(){ return true; }; var corn1 = Corn(); console.log(corn1 === undefined); var corn..
4.4 가변인자목록 가변인자 목록 자바스크립트가 지닌 유연하고 강력한 기능 중 하나는 함수가 임의 개수의 인자를 받을 수 있다는 것이다. 몇 가지 예제를 통하여 유연한 인자 목록이 제공하는 장점을 알아보자. 임의 개수의 인자를 받는 함수에 여러 개의 인자를 제공하는 방법 함수 오버로딩을 구현하기 위해서 가변인자 목록을 활용하는 방법 인자 목록이 지닌 length 프로퍼티에 대해 이해하고 활용하는 방법 자바스크립트는 함수 오버로딩을 제공하지 않는다. 그렇기 때문에 오버로딩이 제공하는 장점과 유사한 장점을 얻으려면 인자 목록의 유연함이 필요하다. apply() 메서드를 이용해서 가변 길이의 인자를 전달하기 자바스크립트에서는 배열에서 최솟값이나 최댓값을 검색하는 기능이 없다. 유사한 기능으로..
1종객체(함수) 가지고 놀기_1자바스크립트에서 함수는 프로퍼티를 가질 수 있고, 메서드를 가질 수 있고, 변수나 프로퍼티에 할당이 가능하며 일반적으로 평범한 객체들이 할 수 있는 것을 모두 할 수 있다.var obj = {};var fn = function(){};=> 변수에 객체를 할당할 수 있듯이, 함수를 할당하는 것도 가능하다. 이 것은 함수를 객체의 프로퍼티에 할당해서 메서드를 만드는 데도 그대로 적용된다. var obj = {};var fn = function(){};obj.prop = “obj’s property”;fn.prop = “Fn’s property”;=> 일반적인 객체와 마찬가지로 함수에도 프로퍼티를 추가할 수 있다.함수 저장하기만약에 연관성을 지닌 함수들을 컬렉션에 저장하고 싶다고..
