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()
타이머함수
