Today I Learned-06

wjddms0501·2022년 11월 22일
0

개발일지

목록 보기
14/23

2022-11-22(화)

<기본 매개변수>
:항상 같은 매개변수에 여러 번 반복해서 입력해야하는 걸 변수에 기본값을 저장해서 편리하게 해줌.
함수이름(매개변수, 매개변수=기본값, 매개변수=기본값)
(예시)

function hello(name, age) {
    console.log(`Hello, my name is ${name}. I'm ${age}.`)
}
hello('nana', 18)
Hello, my name is nana, I'm 18.

function hello(18, 'nana') {
console.log(`Hello, my name is ${name}, ${age}.`)
} // 이름과 나이 순서를 바꿔적어도 순서대로 나타남.

function hello(name, age=30) {
console.log(`Hello, my name is ${name}. I'm ${age}`)//age에 기본값을 저장해주고

hello('nana')
Hello, my name is nana, I'm 18. //이름만 지정해주면 자동으로 age값이 출력됨.

*주의할 점
매개변수는 오른쪽부터 지정해줘야함, 앞에만 또는 중간이 비워지게 지정해주면 undefined가 나옴.


<콜백(callback)함수>
:함수에 매개변수로 들어가는 함수. 밑 예시 메소드 외에도 다른 메소드들이 이 더 있음.

▶forEach( )

<script>
        const callbackProc = function(value, index, array)
        {
            console.log('value' + value);
            console.log('index' + index);
            console.log('array' + array);
        }
        
        const values = [19, 20, 30, 40, 50];

        values.forEach(callbackProc); //반복문 for문 처럼 array만큼 돈다.
    </script>

▶ map()
호출한 결과를 모아 새로운 배열을 반환한다.

<script>
        const numarray = [1, 2, 3, 4, 5, 6, 7, 8]

        const callback = function(value)
        {
            return 10 + value;
        }

        let arr = numarray.map(callback);

        console.log(arr);
    </script>

▶filter( ) 혼공스 p.224
filter()는 안에 있는 변수들을 지정된 조건에 맞게 모아 새롭게 배열해주는 메소드.

<script>
const numbers = [0, 1, 2, 3, 4, 5]
const evenNumbers = numbers.filter(function (value) {
return value % 2 ===0
})

console.log(`원래배열: ${numbers}`) = 0, 1, 2, 3, 4, 5
console.log(`짝수만추출: ${evenNumbers}`) = 0, 2, 4
</script>

▶sort( ) //책에는 나와있지 않음.
sort()의 형태 : function(a, b){return a - b}
밑 예제는 두 숫자의 차가 양수값이냐, 음수값이냐를 이용하여 숫자를 오름차순으로 정렬

const arr = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  return a - b;
});
document.writeln(arr + '<br>'); // [1, 2, 3, 10]

<화살표 함수>
map(),filter() 함수처럼 단순한 형태의 콜백 함수를 쉽게 입력하기 위해 화살표 함수를 사용함. 화살표 함수는 function 키워드 대신 화살표(=>)를 사용.
(매개변수) => {...}

*const evenNumbers = numbers.filter(function (value) {
return value % 2 ===0
}) 이 부분을 간략하게 줄이면
*const evenNumbers = numbers.filter((value)=>value%2===0)
위 코드로 줄여쓸 수 있음.
(예시)
numbers.filter((...)=>{...})

function이 화살표로 바뀜, function의 길이가 return값을 줄때보다 짧아서 더 간편하게 쓸 수 있음.

<타이머 함수>
특정 시간마다 또는 특정시간 이후에 콜백 함수를 호출.
▶ SetTimeout(함수, 시간) : 특정 시간 후에 함수를 한 번 호출
▶ clearTimeout(타이머_ID) : SetTimeout()함수로 설정한 타이머를 제거

function changeBackgroundColor () {
  document.body.style.background = 'red'
}

// 5초 후에 changeBackgroundColor 함수를 실행
var timeoutId = setTimeout(changeBackgroundColor, 5000)

//위와 같은 코드로 작성을 하게되면, 페이지가 로드되면서
setTimeout 함수가 실행되는 시점으로부터 5초 후 
changeBackgroundColor 함수가 실행되어 body 요소의 배경색이 빨간색으로 변경


clearTimeout(timeoutId); // 시작된 타이머를 취소
//타이머가 취소되기 때문에 배경색이 빨간색으로 변경되지 않습니다.

▶ SetInterval(함수, 시간) : 특정 시간마다 함수를 호출
▶ clearInterval(타이머_ID) : SetInterval()함수로 설정한 타이머를 제거

function alertMessage () {
  alert("I'm AlertMessage");
}

// 5초마다 alertMessage 함수를 실행
var intervalId = setInterval(alertMessage, 5000) //5000은 5초

function stopInterval (intervalId) {
  clearInterval(intervalId)
}

// 20초 후에 실행시켰던 interval 타이머를 종료
setTimeout(stopInterval, 20000, intervalId) //20000은 20초

//페이지 로드 후 5초마다 얼럿창을 띄우게 되고, 
0초후부터는 얼럿창을 띄우는 타이머가 종료되어
더 이상 타이머가 얼럿이 뜨지 않게 됩니다.

*타이머_ID는 SetTimeout()와 SetInterval() 함수를 호출할 때 리턴값으로 나오는 숫자.

참고자료 :
매개변수
콜백함수
콜백함수-sort()
타이머함수

profile
개발자 준비 중 :)

0개의 댓글