Function

Sshu Sshu·2022년 7월 15일
0

JS

목록 보기
6/6

JS = procedural language 절차적인 언어 (함수가 굉장히 중요)

function = sub-program라고 불릴 정도로 프로그래밍에 있어 중요

주로 input 을 받아 처리 후 output을 제공하는 것을 함수라고 합니다.

  • 프로그램을 구성하는 빌딩블록
  • sub-program
  • multiple times
  • 값을 계산하거나 일을 수행함

1. Function declaration 함수 선언

  • 함수의 이름으로 input, output, parameters, return 값을 유추 가능해야함.
  • 하나의 함수는 한가지의 일만 가능하도록 만들어야 함.
  • doSomething과 같은 커맨드 형태, 동사로 무슨 일을 하는지 알려주는 이름을 지어야함.
  • 함수는 오브젝트이기 때문에 변수나 파라미터로 사용하고 리턴값으로도 받을 수 있음
function log(message){
	console.log(message)
}

2. Parameters 인자

primitive type → value전달

object type → ref 전달

function changeName(obj){
	obj.name='coder';
}
const ellie = {name:'ellie'}
changeName(ellie)

함수 안에서 오브젝트의 값을 변경하면 변경된 사항이 그대로 전달

3. Default parameters

function showMessage(message, from = 'unknown'){
	console.log(`${message} by ${from}`)
}
showMessage('Hi')

정의되지 않은 파라미터의 값을 if문이 아닌 ='' 로 축약해서 쓸 수 있음

4. Rest parameters

function printAll(...arg){
	for(let i =0;i<args.length;i++){
		console.log(args[i])
	}

	for(const arg of args){
		console.log(arg)
	}

	args.forEach((arg)⇒console.log(arg))
}
printAll('dream','coding','ellie')

...으로 배열로 전달

5. Local scope

let globalMessage = 'global'; // global variable

function printMessage(){
	let message = 'hello'
	console.log(message) // local variable
	console.log(globalMessage)

	function printAnother(){
		console.log(message)
		let childMessage ='hello'
	}

}

밖에서는 안이 보이지 않고 안에서는 밖을 볼 수 있다.

6. Return a value

function sum (a,b){
	return a+b
}

const result = sum(1,2)
console.log(`sum:${sum(1,2)}`)

return 이 없는 함수는 return undefined 가 있는 거나 다름없다.

7. Early return, early exit

** bad
function upgradeUser(user){
	if(user.point > 10){
		// long upgrade logic
	}
}

** good
function upgradeUser(user){
	if(user.point ≤ 10) return;
	// long upgrade logic
}

first-class function

1. function expression

const print = function(){ // anonymous function
	console.log('print')
}
print(); 
const printAgain = print

다른변수에 할당해도 호출이 됨.

💡 function declaration 과 function expression의 차이점은

function expression 은 변수 선언 전에는 호출이 안됨.

function declaration 은 호이스팅이 되어 어디서든 호출이됨

2. Callback function using function expression

function randomQuiz(answer,printYes,printNo){
  if(answer === 'love you'){
		printYes()
	}else{
		printNo()
	}
}

// anonymous function
const printYes=function(){
	console.log('yes!')
}

// named function ⇒ 디버깅이나 리컬젼(함수 안에서 함수를 부를때) 사용
const printNo = function print(){
	console.log('no!')
}

randomQuiz('wrong',printYes,printNo)
randomQuiz('I love you',printYes,printNo)

3. Arrow function

// always anonymous

const simplePrint = ()⇒ console.log('simplePrint!')
const add = (a,b) ⇒ a+b
const simpleMultiply = (a,b){
	//do something more
	return a*b
}

4. IIFE : Immediately invoked function expression 즉시실행함수

profile
Front-End Developer

0개의 댓글