혼공자바스크립트 함수 공부 중

혼자 공부하는 자바스크립트 공부 중이다.
01 ~ 04 Chapter 까지는 순조롭게 진행되다 05 함수 Chapter 에서 진행속도가 현저히 떨어졌다. 모르는 순간부터 하나씩 적으며, 따라쳐보자.

함수란?

코드의 집합이다. 기본 형태와 종류에 대해 알아보자.

함수의 기본 형태

익명함수

function () {}

좋은점
반복되는 코드를 한번만 정의해놓고 필요할 때마다 호출
전체 코드의 가독성이 좋아진다.
기능별로 수정이 가능하므로 유지보수가 쉽다.

선언적 함수

function 함수() {}

익명함수와 같은 기능 수행

---

함수 호출과 매개변수

let 함수 = function(매개변수받기){console.log(매개변수입력)}
함수(매개변수보내기)  //함수호출

함수 호출은 '함수()' 형태로 호출하며, 괄호안에 데이터를 넣어 함수로 전달기 가능하다.

매개변수 보내기 -> 매개변수 받기-> 매개변수 입력 -> 함수호출 순

매개변수 자료형

매개변수의 자료형에 따라 결과값이 달라진다.

// 최솟값 찾기 함수
function min(array){
	let output = array[0] // 배열 첫 번째 요소 변수 할당
    for(const item of array) // 배열 모든 요소 순회 
    	if(output > item){ // 모든 요소 중 할당된 변수 보다 크면
        	output = item  // 작은 요소값으로 할당
        }
        return output // if 문 종료 후 요소 리턴
	}

const testArray = [22,33,44,55,66] // 배열
console.log(`${min(testArray)}`) // 배열 중 최솟값 찾기 함수 호출

배열을 그대로 함수로 받았을 때, 최솟값을 탐색후 리턴

하지만 숫자로 받는다면, 에러를 불러온다.
숫자로 받으러면 가변 매개변수에 대해 알아야한다.

가변 매개변수 형태

function f(A, ...C) // 

숫자로 받은 매개변수가 배열로 들어오게 된다.
위에 최솟값 함수 매개변수를 숫자로 바꾸었을 때 구현 방법

function min(...array){ //가변 매개변수로 자료형 변환
	let output = array[0] // 배열 첫 번째 요소 변수 할당
    for(const item of array) // 배열 모든 요소 순회 
    	if(output > item){ // 모든 요소 중 할당된 변수 보다 크면
        	output = item  // 작은 요소값으로 할당
        }
        return output // if 문 종료 후 요소 리턴
	}


console.log(`${min(11,22,33,44,55)}`) // 배열 중 최솟값 찾기 함수 호출

배열과 숫자 같은 함수를 이용해 최솟값 구하기

구하기 전 알아야 할 것들

• Array.isArray() 메소드 = 자료형 배열 확인 메소드

• typeof 연산자 = 자료형 확인 메소드

  배열인지 숫자인지 확인 해주는 조건문이 필요.

console.log(Array.isArray([1,2,3])) //true
console.log(Array.isArray(1,2,3)) // false

console.log(typeof [1,2,3]) //object
console.log(typeof (1,2,3)) // number

typeof 로 배열을 확인 할 수도 있지만, isArray 메소드가 더욱 정확.

같은 함수 이용해 최솟값 구하기

밑에 구하려는 자료형 부터 확인!!

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(item of items){		//모든 요소들 순회
    	if(output > item ){		// 첫 번째 요소보다 크면
        	output = item		// 다음 요소에 할당
        }
    }
    
    return output //		값 리턴
    }
  
console.log(min([11,22,33,44,55])) // 함수 안쪽 배열로 호출
console.log(min(11,22,33,44,55)) // 함수 안쪽 숫자로 호출 

전개연산자

호출매개변수에 배열을 담은 변수 앞 ... 사용할 경우 숫자가 들어온다.

	const array = [1,2,3,4] // 변수 선언 후 배열에 할당
		console.log(array) // [1, 2, ,3, 4] 배열로 찍힘
		console.log(...array) // 1, 2, 3, 4 숫자로 찍힘

---

구 자바스크립트 이해하기

구 자바스크립트 가변 매개변수

function sample(){
	console.log(arguments)
    for(let i = 0; i < arguments.length; i++){
    	console.log(arguments[i])
    }
}

sample(1, 2)
sample(1, 2, 3)
sample(1, 2, 3, 4)

arguments 특수변수 이용해 가면 매개변수 구현

전개연산자

function sample(...items){
	console.log(items)
}

const array = [1, 2, 3, 4]
console.log(sample.apply(null,array))

전개 연산자를 구하기 위해 특이한 패턴 사용

기본 매개변수

function earnings (시급, 시간){
	시급 = 월급 || 9160
    시간 = 시간 || 40
    return 시급 * 시간
}

논리합 또는 삼항 연산자 사용해 구현