Javascript 자바스크립트 (함수)

Function 선언

함수의 기본 선언 

function 함수이름() {
	코드 ; 
}

위와 같이 선언한다. hoisting 이라고 하는 기능이 있는데, 이는 함수가 선언되기 전에 함수를 사용해도 함수가 동작하는 것을 의미한다. 다만 좋은 방식은 아니라 비추천 된다.

함수를 호출 할 때는 함수() ; 식으로 호출하면 된다. 몇 번이고 사용할 수 있다.

Parameters and Arguments

Parameter 라고 하는 것은, 함수안에 전달 될 입력값이 들어가는 자리(placeholder)를 말한다.

함수를 호출 할 때, 함수 속으로 전달되는 입력 값 자체를 Argument 라고 한다. 함수 내에서는 변수나 값으로 활용 될 수 있다.

예시

function sayThanks(name) {
  console.log('Thank you for your purchase '+ name + '! We appreciate your business.');
}

sayThanks('Cole')

Default Parameter

Argument 값이 입력이 되지 않을 때에도 기본값을 입력하여 정상 동작하게 하는 방법.

function greeting (name = 'stranger') {
  console.log(`Hello, ${name}!`)
}
 
greeting('Nick') // Output: Hello, Nick!
greeting() // Output: Hello, stranger!

Return

function rectangleArea(width, height) {
  let area = width * height;
}
console.log(rectangleArea(5, 7)) // Prints undefined

return을 안쓰면 이렇게 됨.

아래의 예시에서는, return을 한번 거치면 return 뒤에 있는 코드는 실행이 안됨

function rectangleArea(width, height) {
  if (width < 0 || height < 0) {
    return 'You need positive integers to calculate area!';
  }
  return width * height;
}

• Q : 함수의 return 과 console.log 의 차이는 무엇인지?위의 차이와 같다.
• function returnNumber() { return 2; } console.log(2 + console.log(2)); console.log(2 + returnNumber());

Helper Functions

아래와 같이 함수 안의 함수를 넣는 식으로 사용하는 것을 helper function이라고 한다. 대단위의 작업이나 함수를 분절 단위로 쪼개 관리할 수 있다는 장점이 있다.

function multiplyByNineFifths(number) {
  return number * (9/5);
};
 
function getFahrenheit(celsius) {
  return multiplyByNineFifths(celsius) + 32;
};
 
getFahrenheit(15); // Returns 59

Function Expressions

아래와 같은 문법으로 작성된다. 함수의 이름을 정하지 않는 Annonymus function으로 작성 후 임의의 변수에 값으로 지정하면 된다. 일반 함수처럼 parameter를 가지고, 호출할 때는 지정한 ‘변수’에 argument를 넣어 호출하면 된다.

차이점은 일반 함수와 달리 hoist 되지 않는 다는 점이다. 추가 학습 요망

• Q : 왜 function expression을 사용하나요?차이점은 일단 expression은 hoisted 되지 않는 다는 점.링크
• 함수의 argument로 또 다른 함수를 받을 때 유용할 수 있다는 점 ?
• 별다른 차이는 없지만, 읽기 편하고 다른 사람들이 많이 사용하고 있어서 알아두는 것이 좋다..?

const testFunction = function(par1, par2){
  function body 
}

testFunction(arg1, arg2)
//they are not hoisted

Arrow function

⇒ 를 활용하는 방법

fucntion keyword 대신에 ⇒ 사용함

function(par1, par2) 이렇게 되어있으면 functino 지우고 (par1, par2) ⇒ 이렇게 바꾸면 됨.

const rectangleArea = (width, height) => {
  let area = width * height;
  return area;
};

Concise Body Arrow Functions

const squareNum = (num) => {
  return num * num;
};

위와 같은 코드는

const squareNum = num => num * num;

이렇게 압축 해서 표현할 수 있다.

이러한 방식을 Concise Body Aorrw Function이라고 한다.

아래를 보듯, parameter가 없을 때는 빈 괄호, 하나 있을 때는 괄호 없이 하나만, 두 개 이상일 경우에는 괄호 안에 표현한다.

Zero Parameters 
const functionName = () => {} ;

One Parameter
const functionName = parameterOne => {} ;

Multiple Parameters
const functionName = (parameterOne,parameterTwo) => {} ;

또한 한 줄로 작성되는 함수 블럭의 경우에는 {} 중괄호가 필요가 없다. 또한 return을 생략할 수 있다.

(두 줄 이상일 경우에는 return 써야함)

예시 1번이 2번으로 바뀜