JS

[JS][Udemy] JavaScript Functions 1

winter17 2023. 3. 20. 18:57

1.  Functions

  • 코드의 중복을 줄이는 데 유용
  • 코드를 읽기 쉽게 만듦

 

► Process

 1. Define

function funcName() {
	// do something
}
function singSong () {
	console.log('DO')
    console.log('RE')
    console.log('MI')
}
>> console창에 singSong입력하면 위와 같은 함수 출력

 2. Run

funcName(); // run once
funcName(); // run again
// console창에 다음과 같이 입력하면
singSong()

// 다음과 같이 출력됨
>> Do
>> RE
>> MI

- 함수 정의 전에 호출을 해도 작동은 되지만 함수 정의 후 호출하는 방식으로 진행할 것!

 

 ► Arguments 

  • 인수는 함수를 실행할 떄 괄호 안에 전달하는 것
  • 매개변수는 일종의 플레이스홀더로서 함수를 정의할 때 용도에 따라 정해줄 수 있음
  • 입력에 따라 출력값이 달라짐
  • 인수가 없으면 undefined 출력
function greet(person) { // person자리가 parameter매개변수
	console.log(`Hi, ${person}!`)
} 

greet('winter') // winter자리가 arguments인수

>> Hi, winter!

 

 

 ► multiple arguments

  • 인수 순서가 중요함
  • 숫자, 문자, 다양한 타입이 인수가 될 수 있음
  • parameter와 argument 수가 일치하지 않아도 됨
function greet(firstName, lastName) {
	console.log(`Hey there, ${firstName} ${lastName[0]}.`)
}

// 순서가 중요! : firstName: 'George', lastName: 'Clonney'
greet('George', 'Clooney')

>> Hey there,  George C.
function repeat(str, numTimes) {
	let result = ''; // result 빈 문자열 변수 생성
	for (let i = 0; i < numTimes; i++) { // 입력받은 수 만큼 반복
    	result += str; // 매개변수인 str자리에 인수가 합쳐지는 결과를 불러오도록
    }
    console.log(result)
}

repeat('$', 5)
>> $$$$$

 

 ► Return

  • console.log 값은 단순 출력값
  • return은 값을 함수 밖으로 내보낼 수 있고 함수 실행을 중단시킴 (저장, 캡처 가능)
  • return 선언 다음 console.log를 실행시키려고 해도 실행 불가능 
  • 하나의 return만 반환함
// console.log
function add(x, y) {
	console.log(x + y)
}

add(9, 4)
>> 13

let total = add(9, 4)
>> 13

// console.log는 캡쳐 가능한 값이 아닌 단순 출력값
total
>> undefined
// return
function add(x, y) {
	if (typeOf x !== 'number' || typeOf y !== 'number') {
    	return false;
    }
	return x + y;
}

add(9, 'a')
>> false

add(add(1, 5), 9)
>> 15

 ►  Practice

  • 리스트의 마지막 요소 반환하기
function lastElement(array) {
    if (array.length < 1) {
        return null
    } else {
        return array.slice(-1)[0]
    }
}

lastElement([3,5,7]) //7
lastElement([1]) //1
lastElement([]) //null
  • 주어진 문자열의 첫 글자만 대문자로 바꿔서 반환하기
function capitalize(str) {
    return str[0].toUpperCase() + str.slice(1)
}

capitalize('eggplant') // "Eggplant"
capitalize('pamplemousse') // "Pamplemousse"
capitalize('squid') //"Squid"
  • 주어진 리스트의 합을 구하기
function sumArray(array) {
    let total = 0
    for (let i = 0; i < array.length; i++) {
        total += array[i]
    }
    return total
}

// 위 방법이 클래식하지만 앞으론 FOR..OF 명령문을 사용하도록 하자
function sumArray(array) {
    let total = 0;
    for (let i of array) {
      total += i;
    } return total;
}

sumArray([1,2,3]) // 6
sumArray([2,2,2,2]) // 8
sumArray([50,50,1]) // 101
  • 1 ~ 7까지의 숫자중 하나를 입력받아서 입력 받은 수와 요일이 일치하는 경우 해당하는 요일 구하기
// 딕셔너리 형태로 숫자와 요일 저장
const day = {1: 'Monday', 2: 'Tuesday', 3: 'Wednesday', 4: 'Thursday', 5: 'Friday', 6: 'Saturday', 7: 'Sunday'}

function returnDay(num) {
    if (num <= 0 || num >= 8) { // 0이하 8이상인 경우는 null 반환
        return null
    } else {
       return day[num] // 딕셔너리day에서 [num]키를 통해 값을 찾기
    }
}