우아한 테크러닝 3기 React & TypeScript 2회차 (1)

yujuck·2일 전
0
post-thumbnail

우아한 테크러닝 강의 2회차 (2020.09.03)

Javascript에서의 값

javascript는 거의 모든 것이 값이다. 숫자도, 객체도 함수도 값이다!

let x = 20;

x변수, 10이다.

javascript에서 값이라는 것은 모든 변수에 넣을 수 있다
=> 함수이기 때문에 변수에 넣을 수 있음!

javascript는 '식'과 '문'으로 나눌 수 있다.

실행했을 때의 결과가 값이면 이다.
ex) 1+10;, foo();, 1+10+foo();

실행했을 때 결과가 나오지 않는 것은 이다.
ex) if문, while문,...

또한 식 뒤에는 세미콜론(;)을 붙이고 문 뒤에는 붙이지 않는다.

Javascript 함수

Javascript의 함수는 모두 값을 반환한다.

명시적으로 return을 사용해서 반환을 하거나, 특정 return 값이 없으면 undefined를 반환한다.

Javascript에서 함수를 정의하는 방법은 함수 정의문함수 정의식이 있다.

함수 정의문

function foo() {
  return 0;
}

함수 정의식

const bar = function bar() {};
bar();

위에 bar();에서 쓴 bar는 함수명의 bar가 아니라 변수로 선언한 bar이다.
변수에 함수를 넣는 경우 함수의 이름은 없어지는 것과 마찬가지이다.

익명 함수

const bar = function() {};

함수를 값으로 취급하는 함수 이름을 생략할 수 있다.
하지만 재귀함수에서는 함수 이름이 꼭 필요하기 때문에 그때는 생략할 수 없다.

즉시 실행 함수(IIFE)

(function() {
  console.log('function')
})();

익명 함수를 값으로 사용하기 위해서는 익명함수를 ()로 감싸서 사용해야한다.
위의 형태는 즉시 실행 함수가 된다.

즉시 실행 함수를 사용하면 함수를 정의하고, 변수에 함수를 저장하고 실행하는 그 과정을 생략하고 즉시 실행이 된다.

위의 코드가

const app = function() {
  console.log('function')
};
app();

과 마찬가지인 코드가 된다.

고차함수 & 콜백함수

값을 넣는 위치에는 (당연히)값에 해당하는 모든 것을 넣을 수 있다!

값으로 취급하는 것은 모두 변수에 대입시킬 수 있다.
변수의 위치로는 인자, 리턴값 등등이 있는데 이 위치에 에 해당하는 모든 것을 넣을 수 있다는 의미와 같다.
따라서 에 해당하는 함수도 매개변수, 리턴값에 들어갈 수 있다.

그렇기 때문에 밑의 코드가 가능하다.

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

// High order function
// 입력도 출력도 함수
// 함수 호출을 y에 위임하고 있음.
// 콜백함수라고 함.
const y = foo(function() {});

High Order Function (고차 함수)

  • 함수를 파라미터로 전달 받는 함수
  • 함수를 리턴하는 함수
    위 2가지 중 하나 이상을 만족하는 함수

콜백함수
고차함수의 인자로 전달되는 함수. 함수 호출을 위임함.


화살표 함수

const bar = (x) => {};

ES6 이후 함수식을 만들 때 =>를 사용해서 만들 수 있는데 이렇게 만든 함수를 화살표 함수라고 한다.
한줄함수,람다식이라고도 하고, 보통 식에 참여할 때 사용한다.
화살표 함수는 항상 익명 함수이다.

const bar1 = x => x*2;

인자가 한개인 경우 ()를 생략할 수 있고,
return도 한줄로 끝나면 return을 생략할 수 있다.

0개의 댓글