본문 바로가기
Javascript

3. javascript3

Qhs 2024. 3. 6. 17:38

<함수고급> 

 

1. 콜백함수 

자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있는데, 이렇게 매개변수로 전달하는 함수를 콜백(callback)함수

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98

콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다

1-1.  콜백함수를 활용하는 함수 : for Each()

forEach()메소드는 배열이 갖고있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백함수를 호출 

          function(value, index, array){}

<script>
    const numbers = [273, 52, 103, 32, 57]

    numbers.forEach(function (value, index, array) { //매개변수로 value, index, array를 갖는 콜백 함수를 사용합니다.
        console.log(`${index}번째 요소 : ${value}`)
    })
</script>


<!-- [실행 결과]
0번째 요소: 273
1번째 요소: 52
2번째 요소: 103
3번째 요소: 32
4번째 요소: 57 -->

 

1-2. map()

콜백함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 메소드

<script>
    //배열을 선언합니다.
    let numbers = [273, 52, 103, 32, 57]

    //배열의 모든 값을 제곱합니다.
    numbers = numbers.map(function (value, index, array) { //매개변수로 value, index, array를 갖는 콜백 함수를 사용합니다.
        return value * value
    })

    //출력합니다.
    numbers.forEach(console.log) //매개변수로 console.log 메소드 자체를 넘겼습니다.
</script>


<!-- [실행 결과]
74529 0 Array(5)
2704 1 Array(5)
10609 2 Array(5)
1024 3 Array(5)
3249 4 Array(5) -->

numbers=~~ return value*value 실행하면서 numbers 배열은 [제곱 제곱 제곱 제곱 제곱] 으로 바꼈음

forEach 써서 numbers에 있는 value, index, array 가 출력됨.!!!!!!!! 

 

 

 

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let numbers=[273, 52,103,32,57]

numbers=numbers.map(function(value){return value*value})
 
numbers.forEach(console.log)
</script>
</head>
<body>
 
</body>
</html>
 

value 만 써도 다른쓴거랑 똑같이나옴! 

 

 

 

 

1-3 filter()

filter 메소드는 콜백함수에서 리턴하는 값이 true 인 것들만 모아서 새로운 배열을 만드는 함수 

 

 

 

1-4 화살표함수 =>

function 키워드 대신 화살표를 사용하며, 다음과 같은 형태로 생성하는 간단한 함수 

function(매개변수){리턴값}     ---->     메소드(매개변수)=>리턴값

1-5 메소드 체이닝

배열의 메소드를 연속적으로 사용 ! . 찍으면 됨

 

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let numbers=[0,1,2,3,4,5,6,7,8,9]

numbers
.filter((value)=> value%2===0)
.map((value)=>value*value)
.forEach((value)=>{console.log(value)})
</script>
</head>
<body>
 
</body>
</html>
// console.log(numbers) 는   numbers=[0,1,2,3,4,5,6,7,8,9] 나옴
// numbers 는 바뀐적이 없음
// numbers를 바꾸고싶으면 let numbers= numbers
// .filter ~~ 이렇게 하면됨

 

 

1-6  타이머함수 

setTimeout(함수,시간) 

setInterval(함수,시간)

 

1-7 

타이머를 종료하고 싶을 때

clearTimeout(타이머_ID)

clearInterval(타이머_ID)

 

 

 

2. 즉시 실행함수 

 변수의 이름 충돌을 막기 위해 코드를 안전하게 사용

 

블록과 함수 블록을 사용해 이름 충돌 문제 해결하기 (함수의 scope)

var 은 함수 블록일때만 해결됨. 블록에 var 있으면 해결되지않음. 

 

var 함수: 함수범위에서만 적용 

      블럭: 블럭 범위 밖까지 적용 

 

let 블록안에서 다시 정의안하면 밖에있는 값을 가져옴 

큰 범위에서 정의해야함 (전역함수) 

지역에서 정의 (지역함수) 지역내에 없으면 전역에 찾으러감.

다른 지역에 있는것은 불러올 수 없음.

 

 

※  let output=0

function (let i=0, i<10, i++){output+=i}

output을 함수 안에 넣을 경우 밖에서 불러올 수 없음 

불러오려면 바깥에 있어야함!! 

 

 

3. 엄격모드 'use strict' 

 문법 오류를 더 발생기키는 엄격모드로 실수를 줄이기위해 사용

 

4. 익명함수와 선언적 함수 

-익명 함수 : 해당 줄을 읽을때 생성

                   아래예시에서 'a'는 함수명이 아닌 변수이름임! 

                   let 익명함수 : a라는 변수를 선언한다 .

                   익명함수=function 어쩌구저쩌구 : a라는 변수는 ~~~ 익명함수이다. 

let a
a=function(){
console.log('1번째 익명 함수입니다.')
}

 

-선언적 함수 : 선언적함수는 순차적인 코드 실행이 일어나기 전에 생성됨. 

                      같은 블록 내에서는 어디서 실행해도 상관없음

function 선언적함수(){
console.log('1번째 선언적 함수입니다.')
}

+ let 익명함수, 선언적함수를 같은 이름 (a)을 쓰면 ( 물론 같은 이름을 쓰는건 어디서든 권장되지않음) 

let 익명함수: 선언행위

선언적함수: 선언행위 이므로 같은 이름으로 이중선언이 된다. 

또한, let 익명함수의 a는 변수, 선언적함수의 a는 함수이므로 덮어쓰기가 되지않음 

(함수끼리, 변수끼리는 덮어쓰기됨!)

 

 

 

▶ 선언적 함수와 익명 함수의 특징

  • 선언함수 : Hoisting의 대상.
  • 익명함수(Anontmous Function) : Hoisting의 대상이 아님.

'Javascript' 카테고리의 다른 글

6. javascript 6 (예외처리, Class)  (0) 2024.03.11
5. javascript 5  (0) 2024.03.08
4. javascript4  (0) 2024.03.07
2. javascript2  (0) 2024.03.05
1. javascript  (0) 2024.03.04

'Javascript' Related Articles

티스토리툴바