4주차 막차를 타봅니다...
올림픽에 빠져있어서 계속 미루다가 여기까지 와버렸습니다..ㅎㅎ;;
📗기본 미션
코드
<script>
function isLeapYear(year){
return (year%4 ===0) && (year % 100 !== 0) || (year % 400 === 0)
}
console.log(`2020 년은 윤년일까? === ${isLeapYear(2020)}`);
console.log(`2010 년은 윤년일까? === ${isLeapYear(2010)}`);
console.log(`2000 년은 윤년일까? === ${isLeapYear(2000)}`);
console.log(`1900 년은 윤년일까? === ${isLeapYear(1900)}`);
</script>
결과
📗선택 미션
코드
<script>
//변수를 선언합니다
let numbers = [273,25,75,52,103,32,57,24,76]
//처리
//1 홀수 출력
numbers = numbers.filter((x) => x%2 === 1)
//2 100 이하의 수만 추출
numbers = numbers.filter((x)=> x <=100)
//3 5로 나눈 나머지가 0인 수만 추출
numbers = numbers.filter((x) => x %5 === 0)
//출력
alert(numbers)
</script>출력
05-1 함수의 기본 형태
- 매개변수 : 함수를 호출할 때 괄호 내부에 들어가는 자료들
- 리턴 값 : 함수를 호출해서 최종적으로 나오는 결과
익명 함수
- 함수는 코드의 집합을 나타내는 자료형
function() {}
<script>
const 함수 = function(){
console.log('함수 내부의 코드입니다..1');
console.log('함수 내부의 코드입니다..2');
console.log('함수 내부의 코드입니다..3');
console.log('');
}
함수() -> 우리가 만든 함수도 기존의 alert(),prompt() 호출 가능
함수()
console.log(typeof 함수);
console.log(함수);
</script>선언적 함수
function 함수() { }
let 함수 = function() {}; => 가능
<script>
function 함수 (){
console.log('함수 내부의 코드입니다..1');
console.log('함수 내부의 코드입니다..2');
console.log('함수 내부의 코드입니다..3');
console.log('');
}
함수()
함수()
console.log(typeof 함수);
console.log(함수);
</script>매개변수와 리턴값
function 함수(매개변수, 매개변수, 매개변수) {
문장
return 리턴값
함수에 넣는 input이 매개변수 결과로 나오는 output이 리턴 값
리턴 값은 함수 내부에 return 키워드를 입력하고 뒤에 값을 넣어 생성
예제
<script>
function f(x){
return x*x
}
console.log(f(3));
</script>나머지 매개변수
function 함수 이름 (...나머지 매개변수) { }
함수의 매개변수 앞에 마침표 3개(...)를 입력하면 매개변수들이 배열로 들어온다.
- 호출할 때 매개변수의 개수가 고정적이지 않은 함수 가변 매개변수 함수
<script>
function sample(...items){
console.log(items);
}
sample(1,2)
sample(1, 2,3)
sample(1, 2,3,4)
</script>나머지 매개변수와 일반 매개변수 조합하기텍스트
function 함수 이름(매개변수, 매개변수, ...나머지 매개변수) {}
<script>
function sample(a,b,...c){
console.log(a,b,c);
}
sample(1,2)
sample(1, 2,3)
sample(1, 2,3,4)
</script>숫자 자료형은 typeof 연산자를 사용해서 쉽게 확인 가능
배열에 typeof 연산자를 사용하면 object(객체)라는 결과가 나옴
배열인지 확인하려면 Array.isArray() 메소드를 활용해야 한다
<script>
function min(first,...rests){
let output
let items
if(Array.isArray(first)){
output = first[0]
items = first
} else if(typeof(first) === 'number'){
output = first
items = rests
}
for(const item of items){
if(output > item){
output = item
}
}
return output
}
console.log(`min(배열): ${min([52,273,32,103,275,24,57])}`);
console.log(`min(숫자,...): ${min([52, 273, 32, 103, 275, 24, 57])}`);
</script>전개 연산자
배열을 전개해서 함수의 매개변수로 전달해주는 전재 연산자를 제공
함수 이름(...배열)
<script>
function sample(...items){
console.log(items);
}
const array=[1,2,3,4]
console.log('# 전개 연산자를 사용하지 않은 경우');
sample(array)
console.log('# 전개 연산자를 사용한 경우');
sample(...array)
</script>기본 매개변수
함수 이름(매개변수, 매개변수 = 기본값, 매개변수 = 기본값)
function sample(a = 기본값, b) { }
<script>
function earnings (name,wage=8590,hours=40){
console.log(`# ${name}님의 급여 정보`);
console.log(`- 시급 ${wage}원`);
console.log(`- 근무 시간 ${hours}시간`);
console.log(`- 급여 ${wage*hours}원`);
console.log('');
}
earnings('구름')
earnings('별', 10000)
earnings('인성', 10000, 52)
</script>05-2 함수 고급
콜백 함수
매개변수로 전달하는 함수 => 콜백 함수
콜백 함수(1): 선언적 함수 사용
<script>
function callThreeTimes(callback){
for(let i = 0; i<3; i++){
callback(i)
}
}
function print(i){
console.log(`${i}번째 함수 호출`);
}
callThreeTimes(print)
</script>콜백 함수(2): 익명 함수 사용하기
<script>
function callThreeTimes(callback){
for(let i = 0; i<3; i++){
callback(i)
}
}
callThreeTimes(function(i){
console.log(`${i}번째 함수 호출`);
})
</script>
콜백 함수를 할용하는 함수: forEach()
forEach() 메소드는 배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백함수를 호출
function(value, index, array){ }
배열의 forEach() 메소드
<script>
const numbers = [273,52,103,32,57]
numbers.forEach(function(value,index,array){
console.log(`${index}번째 요소 : ${value}`);
})
</script>콜백 함수를 할용하는 함수: map()
map() 메소드는 콜백함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수
배열의 map() 메소드
<script>
let numbers = [273,52,103,32,57]
numbers = numbers.map(function(value,index,array){
return value * value
})
numbers.forEach(console.log)
</script>콜백 함수를 할용하는 함수: filter()
filter() 메소드는 콜백 함수에서 리턴하는 값이 true 인것들만 모아서 새로운 배열을 만드는 함수
<script>
const numbers = [0,1,2,3,4,5]
const evenNumbers = numbers.filter(function(value){
return value % 2 === 0
})
console.log(`원래 배열: ${numbers}`);
console.log(`짝수만 추출: ${evenNumbers}`);
</script>화살표 함수
화살표 함수는 function 키워드 대신 화살표(=>))를 사용한다
(매개변수) => { } == (매개변수) => 리턴값
내부에서 this 키워드가 지칭하는 대상이 다르다는 등의 미세한 차이가 있다
<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>filter() 메소드는 배열을 리턴하므로 map()메소드를 적용할 수 있고, map() 메소드도 배열을 리턴하므로 forEach() 메소드를 적용할수 있다
- 리턴 값을 기반으로 해서 함수를 줄줄이 사용하는 것을 메소드 체이닝
타이머 함수
- setTimeout(함수, 시간) : 특정 시간 후에 함수를 한 번 호출합니다.
- setInterval(함수, 시간) : 특정 시간마다 함수를 호출합니다.
<script>
setTimeout(()=>{
console.log('1초후에 실행됩니다');
},1*1000)
let count = 0
setInterval(()=>{
console.log(`1초마다 실행됩니다${count}번째`);
count++
},1*1000)
</script>- clearTimout(타이머_ID) : setTimeout() 함수로 설정한 타이머 제거합니다.
- clearInterval(타이머_ID) : setInterval() 함수로 설정한 타이머를 제거합니다.
<script>
let id
let count = 0
id = setInterval(()=>{
console.log(`1초마다 실행됩니다${count}번째`);
count++
},1*1000)
setTimeout(()=>{
console.log('타이머를 종료합니다');
clearInterval(id)
},5*1000)
</script>
이렇게 해서 4주차 함수에 챕터가 끝났습니다!! 한주를 미뤄버리니까 하기가 너무 싫더라구요... 5주차 부터는 미루지 않으려고 합니다!
조건문 다음으로 싫어하는 파트 입니다.. 함수 종류도 많고 쓰는 방법도 너무 달라서 이게 그거고 저게 이건지 헷갈리더라구요.. 배울때 애먹었던 부분입니다 그치만 이렇게 다시 복습하니까 이건 이럴때 쓰는구나를 알게 되는거 같아요!! 좋은 시간이었습니다 ㅎㅎ ^^
