독도갈매기의 개발 블로그

정규 표현식 정리하기 정규식 생성 First, 리터럴 방식 let Reg = /ab+c/; 정규식 리터럴은 스크립트가 불러와질 때 컴파일됩니다. 만약 정규식이 상수라면, 위와 같이 사용 하는 것이 성능을 향상시킬 수 있습니다. Second, 객체 인스턴스 생성 방식 let Reg = new RegExp("ab+c"); 정규식 객체인 RegExp의 생성자 함수를 사용해 인스턴스를 생성하는 방법도 존재합니다. 이 경우 리터럴 방법과 달리 정규식이 실행 시점에 컴파일됩니다. 정규식의 패턴이 변경될 수 있는 경우, 혹은 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우에는 생성자 함수를 사용하셔야 합니다. 둘의 차이점은? 위에서 설명되어 있듯이 리터럴 방식 같은 경우에는 스크립트가 불러와질 때 실행..

오늘은 JS에서 가장 의문이 드는 let, const를 설명해드리겠습니다. 보통은 'var쓰면 되는데 왜? let이나 const를 쓰라고 하는걸까?'라며 궁금하며 이해도 되지 않습니다. 저도 물론 이 셋의 차이점을 알아봐도 '차이는 알겠는데 왜 쓰는거지?' 라는 의문점은 사라지지 않았습니다. 그래서 오늘은 차이점에 중점을 두는 것이 아닌 왜 쓰는 걸까?에 중점을 두고 글을 작성하겠습니다. 메모리 할당 '변수 선언방식을 설명하는데 메모리할당?' 요런 생각 하실지도 모르겠지만 3가지 방식에서는 메모리 할당에서도 차이점을 말해주고 있습니다. console.log(a); var a = 10; // undefined 위같은 경우에는 a를 선언하기 전에 console.lo..

용어정리 Class 객체의 특성을 정의 Object Class의 인스턴스 Constructor 인스턴화 되는 시점에서 호출되는 메서드 Merhod 객체의 능력 Ex) 걷기, 짖기, 달리기 위 내용은 Mozilla에서 정의한 용어입니다. Class생성 간단한 설명 class Person { // 클래스 정의 constructor(name, age) { // 생성자 함수 생성 (Constructor) this.name = name; // 클래스 field 구성 this.age = age; // 클래스 field 구성 } say() { // 클래스 Method 생성 if (this.name) { console.log(`안녕 나는 ${this.name}이야`); } else { console.log(`안녕하세요..

spread와 rest는 어느곳에 쓰이는가? spread : 객체나 배열의 내부나 함수를 호출해주는 인자에서 사용합니다. rest : (destructuring으로 통해 값을 받아오는) 객체나 배열의 받아오는 변수나 (값을 받아오는) 함수 파라미터에서 주로 쓰입니다. Spread let Hong = { name : "홍길동", job : "도적", age : "29" } let Kim = { name : "김영희", job : "보험사 직원", age : "29" } let Hong2 = { father : {...Hong}, // Hong 객체의 속성들을 한줄로 모두 받아옴 mother : {...Kim}, // Kim 객체의 속성들을 한줄로 모두 받아옴 name : "홍철수", age : "6" } ..

구조분해할당이란 무엇일까? 배열의 인덱스 혹은 객체의 키를 기준으로 원하는 값만 빼내는 것을 구조분해할당이라고 합니다. 어떻게 사용할까? let Person = { firstname : "홍", lastname : "길동", age : 18, role : "학생", family : { mom : "김영희", father : "홍철수" } }위 같은 객체가 있고 필요한 값이 firstname, father이라면 저희는 이런 식으로 코드를 짤 수 있을것입니다. let firstname = Person.firstname; let father = Person.family.father console.log(firstname, father); // 홍 홍철수하지만 오늘 이 포스팅을 읽는다면 이 2줄의 코드를 한줄로..

이 포스팅은 이어지는 포스팅입니다. 전편을 먼저 읽고 오시는 것을 권장드립니다. Prototype Object 먼저 저번 코드를 가져오면 let Person = () => {} let kim = new Person()저희는 Person이라는 함수를 만들었고 이때 일어나는 일을 그림을 나타낸다면 ↓ 위 그림처럼 저희는 Person이라는 함수를 하나 정의했지만 실제 JS에서는 function Person() {}하나와 Person Prototype Obejct하나 총 두개가 만들어지죠 그걸로 끝나는 것이 아닌 Person의 property인 prototype은 Person Prototype Obejct의 constructor를 가르킵니다. 그와 반대로 Person Prototpye의 property인 con..

JS는 쉬운 언어가 아닌가? 처음 어떤 언어를 배우면 좋을까요? 할때는 많은 언어를 추천받습니다. 예를 들면, "객체 지향 언어를 배울거면 Java를 배워야지!"라던가 "뭔소리야 Java보다 더 좋은 언어인 C#이 있는데!"라던가 "C# 배울거면 기초가 되는 C/C++ 배워야지!"라던가 "처음 배우는거면 쉽게 쉽게 Python이나 Js는 어때?"이런 식으로 많이 얘기하지만 자바스크립트를 깊게 파려고 한다면 뭐랄까 엉켜있는 느낌이랄까 쉬운 언어라고는 느껴지지가 않는 언어입니다. 그럼 뭐 때문에 어려울까? 자바스크립트에서는 Prototype, DOM, 호출스택 등등 많은 개념들이 있지만 오늘은 Prototype을 알아보는 시간을 가져 보겠습니다. Prototype 흔히 말하는 객체 지향 언어에서는 Java,..

'='는 뭘까? var a '=' 0; let b '=' 0; const c '=' 0;많은 언어들이 그렇지만 자바스크립트 또한 =는 할당의 의미를 가지고 있습니다. 자바스크립트는 C/C++, C#, Java와는 다르게 변수를 선언할 때 변수 타입을 같이 선언하지 않습니다. 그 이유는 동적언어이기 때문인데 이와 관련한 개념은 기초 개념이나 자바스크립트에서 다시 한번 다루겠습니다. 그리고 위에서 말하는 할당의 개념이 명확히 구분되지 않는다면 제 포스팅중 변수란 무엇일까?를 보고 오시는걸 추천드립니다. 그렇다면 '==', '==='는 무엇일까? 앞에서 설명했듯이 '=' 하나는 할당을 의미하고 '==&#..