익명의 개발노트

고차함수는 다른 함수를 반환하는 함수이다. const discounter = discount => { return price => { return price * (1-discount); }; }; const tenPercentOff = discounter(0.1); tenPercentOff(100); //90 아래와 같이 화살표함수를 이용해서 사용가능 const discounter = discount => price => price *(1-discount); discounter(0.1)(100) //90 이 방법은 두개의 다른 매개 변수를 가진 함수를 단일함수로 변환할때 유용하다고 한다. 출처: 자바스크립트 코딩의 기술

요약 1. Optional Chaining(?.) 2. Nullish coalescing Operator(??) 3. globalThis 4. Dynamic import 5. BigInt 6. String.prototype.matchAll 7. Promise.allSettled 1. Optional Chaining(?.) ?. 연산자는 왼쪽 연산자 값이 null이나 , undefined 일 경우 실행을 멈추고 undefined를 return하는 연산자이다. 장점으로는 존재하지 않을 수도 있는 값에 대하여 예외처리를 손쉽게 할 수 있다. const data = { user: { name: 'foo', getName() { return this.name } } } const user1 = data?.user..

전개연산자라고 알고 있는데, 나 또한 그렇게 알고 있었다. 하지만 ...은 연산자가 아닙니다. 연산의 개념은 식이 나타낸 일정한 규칙에 따라 계산하는 일이며, 연산자는 이것들을 행하기 위한 기호를 의미한다. 하지만 ...은 계산을 따로 하지 않기 때문에 연산자가 아니다. 구분 올바른 명칭 [1,...[2,3,4]] Spread elements { a: 1, ...{ b: 1 } } spread properties function abc(...args) {} rest parameter abc(...[1, 2, 3]) spread argument [x, ...xs] = [1, 2, 3] rest elements { x, ...xs } = { x: 1, b: 2, c: 3 } rest properties

Destructuring은 사전적 의미로 구조를 분해한다는 의미이다. 일반적으로 배열이나, 객체 처럼 구조를 가진 Object를 쪼개고, 쪼갠 값을 변수에 담아서 사용한다. 1. 배열 Destructuring const arr = [1,2,3,4,5]; const [ one, two ] = arr; console.log(one); //1 console.log(two); //2 이런 식으로 값을 쪼갤 변수를 먼저 만들고, 해당 배열을 일치시켜준다. 2. 객체 Destructuring 객체는 기본적으로 속성에 키, 값을 가진다. const obj = { id: 'dddd', pw: '1q2w3e', } const {id} = obj; console.log(id); //'dddd' 객체는 위와 같은 식으로 쪼..

1. 정의 : 함수의 실행을 중간에 멈추고 재개 할 수 있는 기능 2. 장점 1) 필요한 순간에 값을 계산하기때문에 불필요한 메모리를 낭비를 방지할 수 있다. 2) 실행을 멈추고 재 시작할 수 있기 때문에 멀티태스킹이 가능하다. 3. 사용법 1) function* 함수명(){} 으로 *를 사용하여 쓴다. 2) yield를 이용해서 함수를 멈출 수 있다. 3) yield 오른쪽에는 iterator값이 들어간다. 4) 결과값은 제네레이터 객체를 반환한다. 5) 제네레이터 객체는 next, return, throw 메서드를 가지고 있다. function* f1(){ yield 10; yield 20; return 'finished'; } const gen = f1(); 위 함수를 실행하려면, gen.next(..

1. promise란?? 사전적의미는 약속이다. 오브젝트 안에 오브젝트를 포함하는 자바스크립트 오브젝트의 특별한 형태이다. 프로미스에 접근할 수 있는방법은 .then()을 통해서 접근할 수 있다. function getFirstUser() { return getUsers().then(function(users) { return users[0].name; }); } 프로미스가 미래 시점의 데이터를 위한 것이고, 프로미스를 가지고 있기만 하면, 그 데이터가 미래시점인지 현재인지는 상관없다. why?? then을 통해서 부르기만 하면 되는 것임. 프로미스를 사용한다는 것은 비동기함수가 될꺼야, 라는 것을 의미한다. 그래서 리턴값을 지금 사용하든지, 아니든지, 나는 비동기함수야의 의미가 된다. 프로미스 특징은 ..

개인적으로 노드js, 리액트 보기전에 알고가면 좋다. 나는 반대로 해서 고생을 했다. -_- 1. Scope 1) let, const의 등장 2) immutable array var a =[1,3,4] var b = [].concat(a); 2. String 메서드 추가 1) startstartsWith 2) endsWith 3) includes 3. Array 관련 내용 추가 1) for in, for of 2) spread operator ( ... ) : ...배열명 하면 복사됨. 3) from : arguments나 HTML의 nodeList 타입같은 유사배열을 진짜 배열로 만들어줌. ex) Array.from(arguments) let arr = [100,200,300]; functioin su..

자바스크립트 프로토타입. 다른 블로그나 MDN을 봐도 무슨말인지 이해하기 힘들 것이다. 한마디로 정의하면, 인스턴스가 생성(instantiation)될 때 원형(original form), 즉 프로토타입(prototype)의 모양대로 인스턴스가 생성 인스턴스의 메소드는 Object.prototype.something으로 표현, prototype === 원형 프로토타입과 인스턴스의 관계는 붕어빵틀과 붕어빵의 관계라고 보면 된다. 프로토타입이 있어야 인스턴스를 만들 수가 있다는 말이다. 그럼 프로토타입은 무엇이냐?? 사전적의미는 원형이다. 자바스크립트는 함수형 언어이다. 우리가 쓰는 Array나 Object, 그안에 딸린 메서드 들도 전부 function Array(){}, function Object(){..

자바스크립트를 공부하면서 for문 안에 onclick 같은 이벤트 핸들러를 넣으면 그 수에 맞게 작동을 할 것같다. 하지만, 스코프 문제 때문에 그렇치 않음을 알 수있다. 흔히 볼 수 있는 예제를 보자. 출처 : https://stackoverflow.com/questions/6487366/how-to-generate-event-handlers-with-loop-in-javascript b1 b2 b3 b4 b5 b6 b7 b8 b9 b10 for(i=1; i

메모이즈라고도 불리운다. 기본 컨셉 : 한번불렸던거는 메모리에 저장해놓자. 재귀처럼 반복되는 결과를 메모리에 저장에서 다음에 사용시 같은 결과 나올때 결과가 빨리나오게 하는 기법.