에바니네

고차함수 - HOF

고차함수란 ? 하나 이상의 함수를 인수로 취하는 함수를 말합니다. 가장 기본적인 고차함수 프레임 function f(a){ console.log(a); function hof(b){ console.log(b) } return hof; } 위에서 볼 수 있듯이 인자로 3을 전달해주면 그대로 console.log(a)가 실행되면 3을 출력해주고, hof 함수를 반환하고 코드가 종료하는 것을 확인 할 수 있다. 여기서 중요한 것은 함수가 실행되고 내부함수를 반환을 해주는 것이다. 반환된 내부함수를 변수에 할당해주면 어떻게 될까 ? assignedhof 라는 변수에 f함수의 반환값을 할당하였다. 그리고 assignedhof 함수를 호출해보면 위에서 보았던 f함수 반환값으로 나왔던 함수가 그대로 적용되서 실행되는..

정규표현식 - Regular Expression

정규표현식이란 ? 문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴)입니다. 크게 다음과 같은 역할을 합니다. 1. 문자 검색 (search) 2. 문자 대체 (replace) 3. 문자 추출 (extract) 제가 사용했었을 때는 이메일, 패스워드 검사 정도로 사용해봤었고, 복잡한 문자 일치 기능 같은 것도 빠르게 수행할 수 있다고 합니다. 자바스크립트는 직접 빌드된 정규표현식을 지원하는 언어 중 하나이고, syntax가 좀 가독성이 떨어지나 익숙해지면 편하게 사용 가능할 것으로 보입니다. 정규식 생성 방법 생성자 함수 방식 const evanInfo = ` 010-1234-5678 ` const regexp_number = new RegExp("[0-9]{1,}","g") consol..

Javascript Data Practical

Import & Export 자바스크립트에는 두가지 내보내는 옵션이 있다. export default ( 기본 통로 ) // getType.js export default function getType(data){ return Object.prototype.toString.call(data).slice(8,-1); } // main.js import whatever from './getType' console.log(whatever([1,2,3]); 기본 통로는 몇가지 특징이 있는데, 하나의 파일(모듈)에서 하나의 데이터만 나갈 수가 있다. 그래서 예를 들면 getType 함수외에 다른 객체라던가 다른 데이터를 넘기려고 하면 에러가 나올 것이다. 그리고 import 할때 가져온 데이터를 원하는 이름으로 ..

자바스크립트 데이터 - Javascript Data

Object Method Object.assign() const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); const newObject = Object.assign({}, target, source); console.log(target); // expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget); // expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget === target); // true conso..

클래스 개념 - Class Concept

new 연산자와 생성자 함수(Constructor function) 보통 객체를 만들때 객체 리터럴로 만드는데, 그러다보면 유사하지만 value값이 다르거나 유사한 객체를 만드려면 일일이 만들어줘야 할 경우가 생깁니다. const jeongmin = { firstName : 'Jeongmin', lastName : 'Lee', getFullName: function(){ return `${this.firstName} ${this.lastName}` } } const evan = { firstName : 'Evan', lastName : 'Park', getFullName: function(){ return `${this.firstName} ${this.lastName}` } } 예를 들어 위에 코드 처럼..

함수 복습 - Fn Theory Recap

즉시 실행 함수 - IIFE ( Immediately-InvokedFunction Expression ) const a = 7; function double(){ console.log(a * 2) } double(); 위 코드는 평범한 함수 실행 코드이다. 하지만 이걸 IIFE로 써본다면 // 즉시실행함수 // IIFE, Immediately-Invoked Function Expression const a = 7; (function (){ console.log(a*2) })(); (function (){ console.log(a*2) }()); 위에 코드처럼 작성하게 되는데 특이점은 1. 전체 익명 함수문을 소괄호로 감싼다. 2. 그리고 감싼 소괄호에서 닫는 소괄호 앞뒤로 상관없이 ()를 넣어주고 세미콜..

NVM ( Node Version Management ) & NPM ( Node Package Manager )

NVM 을 설치해야하는 이유 ? 협업 및 다양한 프로젝트를 동시에 진행할때, 라이브러리, 프레임워크, 개발툴의 버전 호환 문제가 많은데 Local에서 다양한 버전의 Node.js 를 설치할 수 있다. use 커맨드를 활용한 간단한 Node version switching 버전 관리가 쉬워진다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 공식 홈페이지에서 LTS(Long Term Support)를 다운 받는 걸 추천한다. zsh: command not found: nvm 이렇게 pkg를 다운받고 설치해도 nvm --version 커맨드 입력해도 ..

DOM API & Method Chaining

DOM(Document Object Model) API(Application Programming Interface) // HTML 요소(Element) 1개 검색/찾기 const boxEl = document.querySelector('.box'); // HTML 요소에 적용할 수 있는 메소드 ! boxEl.addEventListener(); // 인수(Arguments)를 추가 가능! boxEl.addEventListener(1,2); // 1 - 이벤트(Event, 상황) boxEl.addEventListener('click', 2); // 2- 핸들러(Handler, 실행할 함수) // 이벤트가 발생시 그를 처리하는 함수를 핸들러라고 한다. boxEl.addEventListener('click',..