자바스크립트 기본 - 함수(function)

함수선언식

function 키워드, 함수이름, 괄호안에 넣은 매개변수를 차례대로 써서 만든 함수.

function hello(){
  console.log("hello")
}

hello()

 

함수 내부에서 함수 외부의 변수에 접근 및 수정이 가능하다.

let msg = "hello"

function hello(){
  msg = "bye"
  console.log(msg)
}

console.log(msg) // "hello"   
함수 호출 전 

hello()    	// "bye"  
함수 호출

console.log(msg) // "bye" 
함수 호출 후

 

함수 내부에 외부 변수의 이름과 동일한 변수가 선언되어 있다면,

함수에서 외부 변수를 사용할 수 없습니다.

 

let msg = "hello"

function hello(){
  let msg = "bye"
  console.log(msg)
}

hello()    // "bye"
함수안에 선언된 지역변수 msg를 출력합니다.

console.log(msg) // "hello"
전역변수 msg를 출력합니다.

 

전역 변수는 같은 이름을 가진 지역변수에 의해 가려지지 않는다면, 모든 함수에서 접근이 가능합니다!

변수는 연관있는 함수 내에 선언하고, 전역 변수는 가능한 사용을 지양하는 것이 좋습니다!

프로젝트 전반적인 환경에서 범용으로 사용될 데이터라면 전역 변수에 저장하는것이 유용할 때도 있다!

 

parameter( 매개변수 )

let laser = "파괴의 광선"

function upgrade(skill , damage){
  skill = `받아라! ${skill}!!!`
  console.log(`${skill} : ${damage}데미지`)
}

upgrade(laser , 99999) // "받아라! 파괴의 광선!!! : 99999데미지"

console.log(laser) // "파괴의 광선"

upgrade함수는 skill 파라미터로 변수laser의 값을 인자로 받아 복사해서 사용합니다.
함수 내에서 일어난 변화는 함수 밖 변수 laser의 값에 영향을 주지 않습니다.

 

defalut parameter ( 매개변수에 기본값을! ) 

위 함수에서 upgrade 함수의 인자를 하나만 전달해도 또는 전달하지 않아도 함수는 실행됩니다.

대신 전달받지 못한 인자는 undefined가 됩니다.

upgrade() //  받아라! undefined!!! : undefined데미지

매개변수에 값을 전달하지 않았을 때!

인자로 받을 기본값을 설정할 수 있습니다!

매개변수에 오른쪽에 --->  = 기본값 의 형식으로 써주면 됩니다!

function upgrade(skill = "달팽이 껍질 투척" , damage = 333){
  skill = `받아라! ${skill}!!!`
  console.log(`${skill} : ${damage}데미지`)
}
let lasor = "파괴의 광선"

upgrade(lasor) // 받아라! 파괴의 광선!!! : 333데미지
하나의 인자만을 전달했기 때문에 damage매개변수는 기본값인 333을 인자로 받아 출력합니다.


function upgrade(skill = "달팽이 껍질 투척" , damage = damageBook()){
  skill = `받아라! ${skill}!!!`
  console.log(`${skill} : ${damage}데미지`)
}

upgrade() // 받아라! 달팽이 껍질 투척!!! : random데미지

default parameter의 값에 함수도 넣을 수 있습니다.
랜덤한 데미지를 리턴하는 함수 damageBook이 있다면 기본값으로 넣으면 좋겠네요

 

 

함수 내부에 매개변수 기본값 설정하기

매개변수의 기본값을 설정하고자 할 때 논리에 따라 

함수 선언부에서 default parameter를 사용하는 것이 아니라,

함수 실행 도중 if문, OR( || )연산자, nullish coalescing operator 를 사용하여 설정해줘야 할 때도 있습니다!

function upgrade(skill){
  if(skill === undefined){
    skill = "달팽이 껍질 투척"
  }
  skill = `받아라! ${skill}!!!`
  console.log(skill)
}
upgrade()  //받아라! 달팽이 껍질 투척!!! --> if문을 사용했습니다.

function upgrade(skill){
  skill = skill || "달팽이 껍질 투척"
  skill = `받아라! ${skill}!!!`
  console.log(skill)
}
upgrade()  //받아라! 달팽이 껍질 투척!!! --> OR연산자를 사용했습니다.

function upgrade(skill){
  skill = skill ?? "달팽이 껍질 투척" 
  skill = `받아라! ${skill}!!!`
  console.log(skill)
}
upgrade() // 받아라! 달팽이 껍질 투척!!! --> nullish coalescing operator를 사용했습니다.

 

OR연산자 , defalut parameter , nullish coalescing operator 의 차이점

위 3가지 방법을 사용할 때 주의할 점이 있습니다!

 

OR연산자는 인자를 전달 했음에도 그 값이 falsy값인 경우 기본값을 사용합니다...
OR연산자 --> ( null, undefined, 0, "", false ) --> 기본값 사용

function upgrade(skill){
  skill = skill || "달팽이 껍질 투척"
  skill = `받아라! ${skill}!!!`
  console.log(skill)
}
upgrade(null)		// 받아라! 달팽이 껍질 투척!!!
upgrade(undefined)	// 받아라! 달팽이 껍질 투척!!!
upgrade()		// 받아라! 달팽이 껍질 투척!!!
upgrade(0)		// 받아라! 달팽이 껍질 투척!!!
upgrade("")		// 받아라! 달팽이 껍질 투척!!!
upgrade(false)		// 받아라! 달팽이 껍질 투척!!!

 

default parameter는 인자가 undefined일 때만 기본값을 사용합니다.
default parameter --> ( undefined ) --> 기본값 사용

function upgrade(skill = "달팽이 껍질 투척"){
  skill = `받아라! ${skill}!!!`
  console.log(skill)
}
upgrade(null)		// 받아라! null!!!
upgrade(undefined)	// 받아라! 달팽이 껍질 투척!!!
upgrade()		// 받아라! 달팽이 껍질 투척!!!
upgrade(0)		// 받아라! 0!!!
upgrade("")		// 받아라! !!!
upgrade(false)		// 받아라! false!!!

 

nullish coalescing operator는 인자가 null이나 undefined일 때만 기본값을 사용합니다.
?? --> ( null, undefined ) --> 기본값 사용

function upgrade(skill){
  skill = skill ?? "달팽이 껍질 투척" 

  skill = `받아라! ${skill}!!!`
  console.log(skill)
}
upgrade(null)		// 받아라! 달팽이 껍질 투척!!!
upgrade(undefined)	// 받아라! 달팽이 껍질 투척!!!
upgrade()		// 받아라! 달팽이 껍질 투척!!!
upgrade(0)		// 받아라! 0!!!
upgrade("")		// 받아라! !!!
upgrade(false)		// 받아라! false!!!

위 코드처럼 매개변수에 기본값을 설정하는 여러 가지 방법을 충분히 이해한 후에 사용하세요!

falsy값에 대한 이해도 마찬가지로요!

 

 

return

한 개의 함수에서 여러개의 return문을 쓸 수 있습니다.

let grade = prompt("당신의 성적은?")

const isTopGrade = (grade) => {
  if(grade >= 99){
    return true
  }
  else{
    return false
  }
}

if(isTopGrade(grade)){
  console.log("들어오세요!")
}
else{
  console.log("안녕히 가세요..")
}

 

return만 명시하면 함수를 즉시 종료합니다.

위에서 만든 변수와 함수를 사용해 새로운 함수를 만들었습니다.

function goSecretRoom(grade){
  if(!isTopGrade(grade)){
    return
  }  
  console.log("비밀의 방에 입장했습니다.")
}

goSecretRoom(grade)//  위 함수는 return 단독사용 시 함수종료를 보여주기 위한 똥 코드입니다.

 

함수 내부에 아무것도 없거나, return만 있는 함수들은 undefined를 return합니다.

function nothing(){

}
function nothing2(){
  return
}

console.log(nothing())  // undefined
console.log(nothing2())  // undefined

 

자바스크립트는 return문 끝에 자동으로 ; 을 넣습니다.

return값을 여러줄에 걸쳐 작성하고 싶다면 괄호() 를 사용합니다.

안색이 창백한 코드

( ) 로 활력을 찾은 코드

 

 

함수 작명

함수는 어떠한 동작을 수행하는 코드를 모아놓은 것 이기 때문에 함수의 이름은 보통 동사입니다!

함수 이름은 간결하고 명확해야 하며, 동작기능을 설명할 수 있어야 합니다.

함수의 이름만 보고도 어떤 기능인지 가늠할 수 있어야 합니다!

 

동작을 설명하는 동사를 접두어로 붙여 작명하는게 관습입니다.

또 팀 내에서 합의된 접두사를 사용합니다.

 

 

1함수 1동작

하나의 함수는 하나의 동작만을 수행해야 합니다!!!

 

만일 한 장소에서 두 동작을 동시에 필요로 한다면,

나머지 2개의 함수를 호출하는 제3의 함수를 만들어 사용합니다!

 

함수가 길어지면 함수를 분리하여 작성하는 것을 고려 해볼 수 있습니다!

내가 만든 1개의 함수를 기능별로 쪼갤 수 있는지 생각해 보는게 좋겠네요!

이름만으로 어떤 동작을 하는지 알 수 있는 코드를 self-describing 코드라고 부릅니다!

 

 

 

 

기본이 중요하다.