패스트캠퍼스
함수 [패스트캠퍼스 챌린지 03일차]
온다카키onthekaki
2021. 9. 8. 18:13
기명 함수 : function 함수이름 () {}
이름이 있는 함수
```jsx
function a() {
console.log(1234)
}
//함수 호출
a()
// 1234
```익명 함수 : function () {}
이름이 없는 함수
```jsx
let b = function () {
console.log(1234)
}
//함수 호출
b()
// 1234
```함수 호출 : 함수이름() or 변수이름()
선언된 함수 이름으로 호출할 수 있다
방식은 → 함수이름()
괄호 안에는 인수를 삽입하여 호출 가능함수를 변수에 왜 담아?
- 빌드업 고고
```jsx
function sum(x, y) {
console.log(x + y)
}
/*함수 호출*/
sum(1, 3) // 4
/*재활용 가능*/
sum(4, 12) // 16
```
- 콘솔로그 대신 리턴을 넣어보았다
```jsx
function sum(x, y) {
return x + y
}
sum(1, 3) // 콘솔 창에 암 것두 안 뜸
```
- 결과를 보고 싶나?
```jsx
function sum(x, y) {
return x + y
}
console.log(sum(1, 3)) // 4
console.log(sum(4, 12)) // 16
console.log(sum(1, 3)) + sum(4,12)) // 20
```
- 근데 좀 비효율적임. 함수를 여러번 동작시키잖아
> 함수가 실행될 때마다 로직을 동작시키면 그만큼 컴터 자원이 들어감.
여러 번 함수를 실행하는 건 비효율적임
함수를 사용할 때는 함수가 호출되는 횟수를 최대한 줄이는 게 중요
함수 결과가 반복적으로 사용되는 경우에는 변수에 담아서 쓰기
변수에 담아보자
```jsx
function sum(x, y) {
return x + y
}
const a = sum(1, 3)
const b = sum(4, 12)
console.log(a) // 4
console.log(b) // 16
console.log(a + b) // 20
```return '함수를 종료'하다
- 빌드업
```jsx
function sum(x, y) {
console.log(x)
return x + y
}
sum(1, 3)
// 1
// console.log(x)가 출력된 거임
```
- console.log(x)의 위치를 바꿔보았다. return 아래로.
```jsx
function sum(x, y) {
return x + y
console.log(x)
}
sum(1, 3)
// 아무 값도 나오지 않음.
// 콘솔로그가 리턴 아래로 이동해서
```
- return 은 함수를 종료한다는 의미로 쓸 수 있음
```jsx
function sum(x, y) {
if (x < 2) {
return
}
return x + y
}
console.log(sum(1, 3)) // undefiend
```
- 조건문 내부 return에 값을 줘보자
```jsx
function sum(x, y) {
if (x < 2) {
return 123
}
return x + y
}
console.log(sum(1, 3)) // 123
```
- x에 2 이상을 줘서 if문 패스해보자
```jsx
function sum(x, y) {
if (x < 2) {
return
}
return x + y
}
console.log(sum(7, 3)) // 10
```매개변수 일일이 지정하기 않고 Arguments 써보기
- 따로 매개변수를 지정하지 않아도 함수 내부에서 arguments라는 객체를 사용 가능
- 아주 많이 사용되는 방법은 아니지만...
- s 빼먹지 말기
- 그래서 굳이 왜 arguments를 쓰는 건데???
함수를 실행할 때 사용하는 인수가 너무 많아서
일일이 매개변수를 지정하기 힘들 때 이넘을 활용하면 됨
---
- 매개변수를 지우고 arguments 고고
```jsx
//function sum(x, y) 매개변수 지워보자
function sum() {
console.log(arguments)
return
}
console.log(sum(7, 3))
/*
Arguments(2) [7,3 등등]
0: 7
1: 3
*/
//콘솔에 7, 3이 배열 형태로 출력됨
```
- 인수 반환해보자
```jsx
function sum() {
console.log(arguments)
return arguments[0] + arguments[1]
// 아규먼츠 0번째랑 1번째 값 반환하겠다는 거임
}
console.log(sum(7,3)) //10
```
→ 일반적인 경우에는 arguments 객체에 '0번째 1번째' 이런 건 직관적이지 못해서 별로임
되도록이면 이름을 지정해서 그 인수가 어떤 의미인지 조금 명시적으로 나타내주는 게 굿굿
→ 그치만! 인수가 너무너무 많아서 매개변수 이름을 일일이 지정하기 힘든 경우에
arguments 객체를 통해 일괄적으로 관리해줄 수 있다규화살표 함수. 함수를 축약
- 두 코드는 동일한 내용
- 내가 아는 일반적 함수 표현
```jsx
const double = function (x) {
return x * 2
}
console.log('double ', double(7))
//14
/*
더블이란 변수에 익명의 함수를 할당해서 함수 표현 작성.
x는 이 함수의 매개 변수.
밖에서 데이터를 받아서 거기에 곱하기 2를 한 값을 리턴 키워드로 함수 밖으로 내보내버렷.
콘솔 로그. 인수 7을 가진 더블이란 함수 실행
*/
```
- 화살표 함수로 바꿔보면
```jsx
const doubleArrow = (x) => {
return x * 2
}
console.log('doubleArrow ', doubleArrow(7))
//14
```
- 두 코드의 차이점은 뭘까?
첫번째 녀석은, 펑션 키워드 사용
두번째 녀석은, 화살표 함수 사용. / 펑션은 없고 => 사용. ( 앞뒤로 띄어쓰기 있음 )
---
- 일반 함수와 화살표 함수의 가장 큰 차이점은 ? // 축약!
- 매개변수 하나일 때 매우 간단
매개변수 => 실행문
ex) x => x * 2
- 중괄호 주의 feat. 객체 데이터
- ({ 객체 데이터 })
- 일반적 함수 표현
```jsx
const doubleArrow = (x) => {
return x * 2
}
console.log('doubleArrow ', doubleArrow(7))
```
- 화살표 함수를 이용해보자
```jsx
const doubleArrow = x => x * 2
console.log('doubleArrow ', doubleArrow(7))
//14
```
- 이어서, 실행문을 중괄호로 감싸보자. 그냥 감싸보자 어떻게 되나
```jsx
const doubleArrow = x => { x * 2 }
console.log('doubleArrow ', doubleArrow(7))
/*
실행문 반환될 수 없음
undefined가 떴던가...
*/
```
- return 키워드를 넣으니까 도르마무!!!!
```jsx
const doubleArrow = (x) => {
return x * 2
}
console.log('doubleArrow ', doubleArrow(7))
```
---
- 중괄호 하면 생각나는 그것. 객체 데이터.
- 문자, 숫자, boolean, null, undefined, array[ ] 모두 잘 반환됨.
객체 데이터 빼고. 객체 데이터는 콘솔에 내용이 제대로 출력되지 않음.
- 그럼 중괄호 { } 를 사용하는 객체 데이터는 어떻게 하나?!!!
- 중괄호를 소괄호로 감싸면 축약해서 사용 가능 ({ 이렇게 })
```jsx
const doubleArrow = x => ({
name: 'Kaki'
})
console.log('doubleArrow ', doubleArrow(7))
// name: "Kaki"
```
---
## 화살표 함수 축약 과정
- 화살표 함수 사용 전
```jsx
const double = function (x) {
return x * 2
}
console.log('double ', double(7))
//14
```
- 화살표 함수
```jsx
const doubleArrow = (x) => {
return x * 2
}
console.log('doubleArrow ', doubleArrow(7))
```
- 리턴 키워드와 중괄호를 생략
```jsx
const doubleArrow = (x) => x * 2
console.log('doubleArrow ', doubleArrow(7))
```
- 매개 변수 하나면 소괄호도 생략 가능
```jsx
const doubleArrow = x => x * 2
console.log('doubleArrow ', doubleArrow(7))
/*
x => x * 2
매개변수 => 실행문
이 부분이 하나의 함수인 것임
익숙해지면 잘 쓰게 될 거다
*/
```
- 매개 변수 하나일 때만 화살표 함수 가능?? 노노. 매개변수 추가 가능
```jsx
const double = function (x, y) {
return x * 2
}
// 매개 변수 둘이어도 화살표 함수 가능
const doubleArrow = (x, y) => x * 2
```즉시실행함수 IIFE
> Immediately Invoked Function Expression
즉시 실행하는 함수 표현
- 즉시실행함수가 왜 필요한데요?
이렇게 한번 사용하고 말 함수라면 굳이 이름까지 만들어 호출할 필요가 없음
```jsx
const a = 7
function double() {
console.log(a * 2)
}
double();
//14
```
- 콘솔 창 에러 주의
세미콜론으로 코드 마무리 해주면 될 거야
---
- 빌드업
```jsx
function () {
console.log(a * 2)
}
/*
익명 함수. 이름이 없어서 실행할 수 없음.
*/
```
- #1 소괄호 두 개를 이용해보자. ( 함수 )( )
```jsx
(function () {
console.log(a * 2)
})();
//14
```
- #2 소괄호 위치 이동. ( 함수 ( )) 이 방법 추천
```jsx
(function () {
console.log(a * 2)
}());
//14
```호이스팅 Hoisting
> 함수 선언부가 유효 범위(scope) 최상단으로 끌어올려지는 현상
- 언제 유용?
JS는 함수의 이름만 봐도 대략적인 함수의 로직을 추측할 수 있기 때문에,
호이스팅이라는 현상을 이용해서 함수를 전체 코드의 최하단에 작성
---
복잡한 내용이 많은 함수를 실행하기 위해,
이 복잡한 함수를 위에서 아래로 읽어내려가는데
함수 호출까지 가기 전에 굉장히 많은 로직들을 거쳐야 하잖음
→베리 복잡하고 해석하기 좋지 않아
---
그렇다고 함수 선언을 맨날 밑에다만 작성하란 게 아니고,
코드 해석할 때 함수 호출이 위에 있고 함수 선언이 아래에 있어도 헷갈리지 말라구
---
- 빌드업. 함수 표현부터 시작
```jsx
const a = 7
const double = function () {
console.log(a * 2)
}
double()
```
- 함수 호출 위치를 함수 표현 위로 올려보자. 에러 뜸
```jsx
const a = 7
double()
const double = function () {
console.log(a * 2)
}
//typeError. double is not a function
```
- 함수 표현을 함수 선언으로 바꾸면?? 호이스팅!
```jsx
const a = 7
double()
function double() {
console.log(a * 2)
}
// 14
```타이머 함수
> setTimeout(함수, 시간) : 일정 시간 후 함수 실행
setInterval(함수, 시간) : 시간 간격마다 함수 실행
> clearTimeout() : setTimeout 함수를 종료
cleatInterval() : setInterval 함수를 종료
---
- 타이머 함수 굉장히 많이 사용하니까 잘 알아두기
- 시간에서 사용 되는 단위는 밀리세컨드. 1000ms = 1s
---
### setTimeout
- 빌드업 setTimeout
```jsx
setTimeout(function(){
console.log('Kaki')
}, 3000)
```
- 화살표 함수로 바꿔보자
```jsx
setTimeout(() => {
console.log('Persimmon')
}, 3000)
```
- 타이머 기능 종료해볼까 feat.addEventListener
```jsx
// html h1태그의 내용인 hello world를 누르면 종료되도록 만들어보자
const timer = setTimeout(() => {
console.log('Persimmon')
}, 3000)
const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
clearTimeout(timer)
})
```
---
### setInterval
- 빌드업 setInterval
```jsx
const timer = setInterval(() => {
console.log('Persimmon')
}, 3000)
//3초에 한번씩 문자 데이터가 출력됨
```
- 인터벌도 종료해보자
```jsx
const timer = setInterval(() => {
console.log('Persimmon')
}, 3000)
const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
clearInterval(timer)
})
```콜백 Callback
> 함수의 인수로 사용 되는 또다른 함수
간단히 말해서...
1. 인수로 사용 되는 함수는 콜백이다
2. 콜백은 특정한 실행 위치를 보장하는 용도로 굉장히 많이 활용된다
---
- 빌드업...
```jsx
function timeout () {
setTimeout(() => {
console.log('Start!')
}, 3000)
}
timeout()
// 3초 뒤에 Start! 출력
```
- 빌드업...start 뒤에 Done!이 나오게 하고 싶었다
```jsx
function timeout () {
setTimeout(() => {
console.log('start')
}, 3000)
}
timeout()
console.log('Done!')
/*설정된 3초의 시간 때문에
Done!이 먼저 나오고
Start!가 나옴
*/
```
- 콜백 이용하기
- 순서를...일단 적어보겠다 (헤롱헤롱)
- timeout() 이녀석 변화 과정
→ timeout(() ⇒ {}) 이게 콜백이라고요?
→ timeout(() ⇒ { console.log('Done!'}) 음...
- function timeout (){~~~ 이녀석 변화 과정
→ function timeout (cb){~~~
- cb() 이녀석 자리 정해주기
- 설명도...일단...
timeout 함수를 호출할 때 하나의 익명함수를 인수로 사용함
그리고 그 인수가 cb라는 매개변수로 들어감
cb라는 매개변수는 아직 호출되지 않은 함수잖어
그러니까 이놈을 실행하기 원하는 자리에다 소괄호를 열어 실행해주는 거다 이거임
```jsx
function timeout (cb){
setTimeout(() => {
console.log('Kaki')
cb()
}, 3000)
}
timeout(() => {
console.log('Done!')
})
```
https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online