패스트캠퍼스/자습

우아한 테크 코스 2일차 정리

sunnykim91 2020. 9. 3. 22:22

 

- 함수도 값이다. 그래서 변수에 할당 하는게 가능하다.

--> 자바스크립트는 거의 모든게 값이다.

 

 

자바스크립트의 함수는 값을 반환하게 되어있다.

 

반환 방법 : 명시적으로 return을 쓰거나 undefined를 반환

 

 

fuction foo() {

	return 0;

}

함수정의문

 

const bar = function bar() {

};

함수 표현식

 

bar();

 => 위에서 앞쪽 bar이다. (안쪽 bar()는 모름, bar이란 이름은 생략 가능)

 

 

(function() {

})()

: 앱이 실행될 때 한번만 실행됨, 즉시실행함수

 

function foo(x) {
   x();
   return function() {
   
   };
}

const y = foo(function() {

})

형태도 중요하다. 원래 형태와 다른 모습을 가졌다고해서 다른게 아니다. 

함수도 값이기 때문에 return이나 인자값으로도 사용이 가능하다.

 

 

함수를 실행하는 순간 함수를 만들어내는 테크닉 -> 1급함수 = HOF 

(HOC : 입력도 컴포넌트 출력도 컴포넌트)

 

 

const foo = function foo() {
	//안쪽함수가 자기자신을 호출해야할때는 이름이 있어야함.(재귀호출을 위해서 필요, 대부분 생략)
};

 

 

const foo = function () {

};

// 화살표 함수
const bar = () => {

}

// 자바스크립트의 코드는 식과 문 이다. 
// 식은 코드를 실행하면 한줄 실행했을때 값으로 마무리가 되면 식
// 문은 값이 아닌것, if문, 반복문 등 
// 마지막에 ; 이 있느냐 없느냐 , 문에는 마지막에 ;이 붙지 않는다.

 

화살표 함수

const bar x => x * 2;

console.log(bar(10));

// 20
const x = 10;   // 값자체는 계산 불가 하지만,
const y = () => 10;   // 여기서는 값이지만, 계산할 수 있는 코드를 쓸 수 있음

console.log(x, y());

 

const y = (x, y) => {
   return x * 2;
}

// 인자가 2개 이상부터는 괄호를 써야한다. 한개이면 괄호 생략가능
// 여러줄을 쓰고 싶으면, return을 명시적으로 써줘야한다.

 

 

 

fuction foo() {
   this.name = 10;
}

const y = new foo();

if(y instanceof foo) {
   // 객체의 형태를 확인하는 것   
}

--> ES6에서 클래스가 등장 

--> new를 붙여도, 안붙여도 동작은 함 

 

class bar {
   consturctor() {
      this.name = 10;
   }
}

console.log(new bar());

class가 문법적 설탕이다. 라는 말이 있긴하지만, prototype과 다른부분도 존재한다.

-> class로 만들면 new를 붙여줘야 동작함.

 

 

 

 

const person = {
   name: '김민태'
   getName() {
      retrun this.name;
   }
}

console.log(person.getName())

const man = person.getName;

console.log(man()) // error발생 , getName의 this는 window를 가르킴

 

** 화살표함수로 사용하면 bind필요 없음, 또한, React에서 class형보다 함수형을 사용하기떄문에 this bind를 사용할 일이 적다.

** call, apply 꼭 학습할 것.

 

 

클로저

function foo(x) {
   return function bar() {
       return x;
   }
   // 클로저 : 값을 보호할때 주로 사용
}

const f = foo(10);

console.log(f())   // 10
const poerson= {
   age: 10
}

person.age = 500;

// age가 500이 될 수 없으므로, 제한을 두기위한 코드로 아래 코드



function makePerson() {
   let age = 10;
   
   return {
      getAge() {
         return age;
      }
      setAge(x) {
      	age = x > 1 && x < 130 ? x : age;
      }
   }
}  // 모듈패턴

let p = makePerson();
console.log(p.getAge())

모듈패턴으로 age값을 보호하기 위하여 클로저를 사용한다.

 

 

 

비동기


setTimeout(function (x) {
   console.log('앗싸')
   setTimeout(function(y) {
      console.log('웃싸');
   },2000)
}, 1000);

 

Promise

 

const p1 = new Promise((reslove, reject) => {
   setTimeout(()=>{
      resolve('응답');
   },1000)
   resolve(); // then안에 기술된 함수 호출, 성공했어
   reject(); // catch안에 기술된 함수 호출, 실패했어
});

p1.then(function(r) {
	console.log(r)
}).catch(function() {

})

// 응답, 응답

 

async await

const delay = ms => new Promise(resolve => setTimeout(resolve, ms))

async function main() {
   console.log('1');
   await delay(2000);   
   console.log('2');
}

main();

// 1찍고 2초뒤 2

인간의 생각하는 뇌구조와 동일하게 동작하는 

await : Promise객체가 있으면, resolve가 호출됬을때 reslove함수가 반환하는 값을 return값으로 넘겨주는 

 - async await문에서 try catch문을 쓰게 되었음. 

 

 

리덕스

 

//index.js

const store = createStore();

console.log(store.getState());
//redux.js

export function createStore() {
   let state;
   const getState = () => ({...state});
   return {
      getState
   };
}

클로저를 활용한다.

 

 

//index.js

function reducer(state, action) {         // 상태를 바꾸는 애
   if(action.type === 'abc') {
      retrun {
         ...state,
         abc: 'OK'
      }
      // state.abc = 'OK'; state 기존것을 쓰는게 아니라 새로운 것을 만들어서 리턴하는 개념
   }
   
   return state;
}

const store = createStore(reducer);

function update(){
   console.log(store.getState());
}

store.subscribe(update)
store.dispatch({ type: 'abc' });
//redux.js

export function createStore(reducer) {
   let state;
   const listeners = [];
   const getState = () => ({...state});
   
   const dispatch = (action) = {
      state = reducer(state,action);
      listeners.forEach(fn=> fn());
   }
   // reducer를 직접 호출하는 것이 아니라 dispatch를 통해서 한다.
   // state = reducer(state, {
   //    type: 'abc'
   // });
   
   const subscribe = (fn) => {
      listeners.push(fn);
   }
   
   return {
      getState,
      dispatch,
      subscribe,
   };
}

 

 

 

반응형