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

yujuck·2020년 9월 16일
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개의 댓글