181121 - TIL

---

주제: 자바스크립트

강의: 자바스크립트 부트캠프

날짜: 2018.11.21

강의자: 김민태님

---

map, filter - 배열을 순회하면서 함수에서 리턴한 값을 배열로 만들어서 리턴한다 

## map

a라는 형태의 데이터를 b라는 형태의 데이터로 바꿀 때 많이 사용한다

## filter

필터링. 리턴하는 배열은 바뀌지 않는다. 안의 함수가 true, false를 확인해서 true를 반환한 값만 모아서 배열로 리턴.

let idol = [

{ age: 10, type: '남성', name: '방탄소년단' },

{ age: 5, type: '남성', name: '샤이니' },

{ age: 14, type: '남성', name: '동방신기' },

{ age: 2, type: '여성', name: '2NE1' }

];

// 남성 아이돌 그룹을 추출한 후 LI 문자열 목록을 만드세요

let LIList = idol

                .filter(dol => dol.type === '남성’) //filter의 리턴값은 배열

                .map(dol => `<li>${dol.name}</li>`) //filter가 리턴한 배열을 map함수에서 사용

                .join('’); //map에서 반환한 배열에 join. 

//바로 앞에서 반환한 배열을 사용한다

함수가 총 세번실행. 마지막 join을 제외하고는 모두 배열을 리턴.

## stream , 데이터의 흐름 구조

데이터 -> 도구 

               도구

               도구

                

               결과

데이터는 도구(연산자, 함수)를 통해 결과로 간다.

소프트웨어에서 데이터가 결과로 가는 것을 데이터의 흐름, stream, 파이프라인이라고 한다.

중간에서 사용되는 도구를 플러그인, 미들웨어라고 부른다.

## 실행컨텍스트의 이 해

this - 컨텍스트 지시자, 지시어

컨텍스트 - 맥락.

코드 맥락상 this가 가르키고 있는것이 무엇인지에 대한 학습

//객체 리터럴방식

let counter = {

count: 0,

increment() {

this.count++;

}

};

let increment = counter.increment;//counter.increment를 참조만 할뿐 소유자정보까지 넘어가지 않는다.

counter.increment(); //실행맥락은 실행하는 순간의 소유자를 바라본다. 

counter.increment();

counter.increment();

increment(); // 실행시점에 소유자가 없기 떄문에 this가 전역에 바인딩 된다.

console.log(counter.count);

this는 함수안에 있거나 함수밖에 있거나.  함수밖에서 this는  window객체., window.this에서 window가 생략.

function Counter() {

this.count = 0;

this.increment = function() {

this.count++; //만드는 시점의 this의 소유자는 누군지 모름

}

}

let counter = new Counter(); //new연산자를 이용한 함수 호출시 빈 객체 생성.

let counter2 = new Counter();//이런식으로 new연산자를 사용하면 Counter함수 한개로 여러개의 counter를 만들어 낼 수 있다. 틀처럼 찍어 냄.

counter.increment(); //실행시점에 this의 소유자를 확인

counter.increment();

counter.increment();

console.log(counter.count);

let counter = {

count: 0,

increment() {

this.count++;

}

};

//setInterval(counter.increment, 100);

setInterval(function(){//이렇게 함수로 한번 감싸주면 소유자를 잃지 않는다.

counter.increment}

, 100);

setInterval(function() {

console.log(counter.count);

}, 1000);

##call

함수에만 있는 메소드. 함수를 호출해주는 메소드. 

인수를 줄 때 첫번째 인수의 컨텍스트를 지정할 수 있다. 

call과 apply는 똑같지만 받는 인수의 차이가 있다. 인수를 컴마로 지정. apply는 인수가 가변적일 때, 두번째부터는 배열로 넘겨줌

let counter = {

count: 0,

increment() {

this.count++;

}

};

let fakeCounter = {

count: 100

}

counter.increment.call(fakeCounter);//101 call을 사용해서 increment()안의 this를 fakeCounter로 만든다.

console.log(counter.count);//0

console.log(fakeCounter.count); //101

##bind

함수에서만 존재하는 메소드. bind(여기서 컨텍스트를 한번 지정해준다.)

## 화살표함수

화살표 함수는 실행 맥락이 존재하지 않는다. 화살표 함수는 실행컨텍스트가 없기 때문에 문법적 맥락에서 보여지는 this를 사용한다. bind, call, apply할 필요도 없다.

## 프로토타입

자바스크립트는 프로토타입 기반의 언어이다.

자바스크립트 객체의 최상위 객체는 Object(대문자로 시작한다!)

객체가 가지고 있는 많은 기능을 최상위 부모 객체인 Object안에 넣어놓고 객체를 만들어 사용할 때 __propto__라는 속성에 도구들을 넣어놓는다.

그래서 새로운 객체가 만들어질때 모든 객체는 __proto__가 참조된다(복사되는 것이 아니라 가르키는 것!), 객체가 만들어질때마다 복사되면 용량이 너무 든다

객체의 속성을 참조하려고 할 때 현재 내가 만든 객체에서 속성을 찾고 없으면 undefined가 아니라 __proto__안에서 속성을 찾는다. 

__proto__에도 없으면 undefined

함수도 프로토타입을 가지고 있다. (함수적 특성으로 약간 다르다)

let father = {

familyName: '김',

name: '서현',

blood: 'A',

sayName() {

return `${this.familyName} ${this.name}`;

}

};

let son = {

name: '유신',

blood: 'O'

};

let daughter = {

name: '미실',

blood: 'AB'

};

son.__proto__ = father; //son의 __proto__ 를 최상위 Object에서 father로 바꿈, father를 상속받는다.

daughter.__proto__ = father;

console.log(son.familyName, daughter.familyName); //실행시점에서 소유자는 son. this에 familyName이 없으면 프로토타입을 타고 father의 familyName을 찾아서 사용.

console.log(son.sayName(), daughter.sayName());

Object.create(부모로 받을 인자, 객체의 모양을 객체화 해서 넘겨준다)

//두번째 인자는 객체지만 객체 리터럴 방식이 아니다.

let son = Object.create(father, {

name: { value: '유신' }, //객체 안에서 값을 객체로 다시..조금 더 다양한 옵션을 사용하기 위해서 이렇게 작성 한다. 근데 이런식으로 잘 안씀ㅎㅎ;;

blood: { value: 'O' }

});

let daughter = Object.create(father, {

name: { value: '미실' },

blood: { value: 'AB' }

});

//재정의 override

부모객체의 특질을 받아서 새로 재정의 하는 것. 오버라이드.

## 함수의 프로토타입

__proto__가 아니라 prototype이라는 속성명을 가지고 있다.

function Parent(name, blood) {

this.familyName = '김';

this.name = name;

this.blood = blood;

}

Parent.prototype.sayName = function() { //프로토타입에 sayName을 만들어 넣음.

return `${this.familyName} ${this.name}`; //공유자원인 프토토타입에 만들어두면 사용하는 녀석들만 불러다 사용할 수 있다. 

}

let son = new Parent('유신', 'O’); //new연산자로 만들어진 빈객체의 __proto__는 Parent의 prototype으로 연결된다. 

let daughter = new Parent('미실','AB’);// new연산자로 여러개를 만들어도 함수를 바라보고 사용할 수 있다. 

console.log(son.familyName, daughter.familyName);

console.log(son.sayName(), daughter.sayName());

new 연산자로 함수를 호출하면  빈 객체를 만들고 this를 명시적으로 만든다. 

만들어진 객체의 __proto__를 함수의 .prototype에 넣는다. 

new연산자와 호출하는 함수는 대문자로 시작

빈객체를 만들어 내는 함수를 생성자함수, 생성자(constructor)라고 한다.

이 함수를 통해서 만들어진 객체를 인스턴스라고 한다. 

instanceOf 연산자를 활용해서 어떤 함수를 통해 만들어 졌는지 확인할 수 있다. 

## class 

객체처럼 생겼다. 

내가 생성자 함수를 만들어도 사용자가 new로 객체를 만들지 않으면 소용이 없다.

class를 사용해서 생성자함수라는 것을 표시해줌. 상속도 편리해지고 사용자도 한눈에 생성자라는것을 알 수 있다.

{} 사이에 컴마 사용이 없다.

노트 요약

---

---

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다