패스트캠퍼스 환급챌린지 42일차 미션 (3월 13일) : 프론트엔드개발 강의 후기

오늘의 목표

JS 함수  중에

• 함수 복습
• 화살표 함수

를 시작했다!!!

 

오늘은 수요일 뚜둥- 

행복한 날이었다.

그래서 더 열심히 해보기로 한다아아!!

가보자고오오!!

 

 

 

자바스크립트 간단한 복습과 함께 새로운 내용들 학습!

 

function sum(x, y) {

  console.log(x + y)

}

 

sum(1, 3)

sum(4, 12)

 

+

 

function sum(x, y) {

  return x + y

}

 

sum(1, 3)

sum(4, 12)

 

 

조건을 만들어서 특정한 내용을 실행할 것인지 실행하지 않을 것인지를 이렇게 리턴 키워드를 통해서 함수 안에서 작성을 할 수가 있다는 거다. 그러면 콘솔 창에 이렇게 underfined라는 값이 나오는 것을 확인할 수가 있다.

 

 

화살표 함수

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 화살표 함수의 기본 문법은 아래와 같다.

화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.

또는 콜백 함수로 사용할 수 있다. 이 경우 일반적인 함수 표현식보다 표현이 간결하다.

 

function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this이다.

 

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다.

함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

콜백 함수 내부의 this는 전역 객체 window를 가리킨다.

 

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다고 하였다.

화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라 한다. 화살표 함수는 앞서 살펴본 Solution 3의 Syntactic sugar이다.

 

 

화살표 함수를 사용해서는 안되는 경우

>

화살표 함수는 Lexical this를 지원하므로 콜백 함수로 사용하기 편리하다. 하지만 화살표 함수를 사용하는 것이 오히려 혼란을 불러오는 경우도 있으므로 주의하여야 한다.

 

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드

 

https://bit.ly/48sS29N

패스트캠퍼스 [직장인 실무교육]