함수

함수는, 특정 코드를 하나의 명령으로 실행 할 수 있게 해주는 기능입니다.

예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같이 코드를 작성합니다.

function add(a, b) {
  return a + b;
}

const sum =  add(1, 2);
console.log(sum);

위 예시의 결과는 3이 나오게 됩니다.

함수를 만들 때는 function 키워드를 사용하며, 함수에서 어떤 값을 받아올지 정해주는데

이를 파라미터(매개변수)라고 부릅니다.

또한, 함수 내부에서 return 키워드를 사용하여 함수의 결과물을 지정 할 수 있습니다.

추가적으로 return을 하게 되면 함수가 끝나게 됩니다.

위의 예시를 다시 한번 설명해드리겠습니다.

먼저 function을 써서 함수를 지정하고  add라는 함수에 이름을 만들었습니다.
옆에 ( )를 써서 피라미터(매개변수)값을 만들어 주었고, 함수내에서 사용할 수 있는
return 키워드를 사용하여 함수의 결과물을 지정 해주었습니다.

추가적으로, return문을 사용하면 더 이상 함수의 사용이 되지 않고 끝이 납니다.
그렇기에 return밑에 있는 코드는 더 이상 호출이 되지 않고 return문 이내의 코드까지 인식해서
작동해 결과 값을 함수 밖에 console.log를 지정해서 출력 값을 보여줄 수 있습니다.

그럼 이제 함수 밖에 있는 문장을 살펴 보겠습니다.

const sum = add(1, 2);
console.log(sum);

 

const(상수)이나 let(변수)이나  상관없다 이것을 지정해주고 이름(sum)을 지정해준다음에

add(a, b) 위에 썻던 값을 지정해주자. 그런 다음 console.log(sum);으로 최종 함수와 ruturn값을
출력할 수 있다.

연습

함수를 사용 해보겠습니다.

Hello, name!

name 이라는 피라미터를 넣으면 콘솔에 'Hello name!'이라는 결과를 출력하는 코드를 작성해봅시다.

function hello(name) {
  console.log("Hello, " + name + "!");
}
hello("vaopert");

function을 써서 함수를 지정하고 hello라고 함수의 이름을 선언해주었습니다.

( ) 괄호에 name을 써주어 피라미터(매개변수)를 설정까지 해주었습니다.

그리고 console.log( )를 써주어 값을 지정해주고 마지막으로 함수를 빠져나와서
밖에서 함수(hello)의 네임값을 지정해주어 function을 호출해줍니다.

console.log 를 하게 될 때 우리는 문자열을 조합하기 위해서 + 연산자를 사용했습니다.

이렇게 문자열을 조합 할 때 + 를 사용해도 큰 문제는 없지만, 더욱 편하게 조합을 하는 방법이 있습니다.

바로, ES6 의 템플릿 리터럴 (Template Literal)이라는 문법을 사용하는 것 입니다.

---

ES6 가 뭔가요?

ES6 는 ECMAScript6 를 의미하며, 자바스크립트의 버전을 가르킵니다. ES6는 2015년에 도입이 되었습니다. ES6 는 ES2015 라고 불리기도 합니다. 그리고 2015년 이후에 계속해서 새로운 자바스크립트 버전이 나오고 있습니다. ES7(ES2016) ES8(ES2017) ES9(ES2018) ES10(ES2019).. 새로운 자바스크립트 버전이 나올때마다 새로운 문법이 소개됩니다.

브라우저 버전에 따라 지원되는 자바스크립트 버전이 다릅니다. 하지만, 보통 웹 개발을 할 때에는 Babel 이라는 도구를 사용하여 최신 버전의 자바스크립트가 구버전의 브라우저에서도 실행되도록 할 수 있습니다. (정확히는, 최신버전 자바스크립트를 구버전 형태로 변환하는 작업을 거칩니다.)

---

템플릿 리터럴을 사용해서 구현을 해봅시다.

function hello(name) {
  console.log(`Hello, ${name}!`);
}
hello('velopert');

 ` ` 백틱을 사용해서 출력을 묶어주고 ${ }를 사용해서  함수값을 불러온다.

 

점수를 성적등급으로 변환하기

이번에는 점수가 주어졌을 때 A, B, C, D, F 등급을 반환하는 함수를 만들어봅시다.

function getGrade(score) {
  if (score === 100) {
    return "A+";
  } else if (score >= 90) {
    return "A";
  } else if (score === 89) {
    return "B+";
  } else if (score >= 80) {
    return "B";
  } else if (score === 79) {
    return "C+";
  } else if (score >= 70) {
    return "C";
  } else if (score === 69) {
    return "D+";
  } else if (scere >= 60) {
    return "D";
  } else {
    return "F";
  }
}

const grade =getGrade(100);
console.log(grade);

grade 가 100일 때에는 결과가 A+가 나오게 됩니다.

화살표 함수

함수를 선언하는 방식 중 또 다른 방법은 화살표 함수 문법을 사용 하는 것입니다.

const add = (a, b) => {
  return a + b;
};

console.log(add(1,2));

function 키워드 대신에 => 문자를 사용해서 함수를 구현 했는데요.

화살표의 좌측에는 함수의 파라미터, 화살표의 우측에는 코드 블록이 들어옵니다.

그런데, 만약 위와 같이 코드 블록 내부에서 바로 return을 하는 경우는 다음과 같이 줄여서 쓸 수도 있습니다.

const add = (a, b) => a + b;
console.log(add(1, 2));

이렇게 작성이 가능합니다.

다음으로 아까 만들었던 getGrade 함수처럼 여러 줄로 구성되어있는 경우에 코드블록을 만들어야 합니다.

const getGrade = score => {
  if (score === 100) {
    return 'A+';
  } else if (score >= 90) {
    return 'A';
  } else if (score === 89) {
    return 'B+';
  } else if (score >= 80) {
    return 'B';
  } else if (score === 79) {
    return 'C+';
  } else if (score >= 70) {
    return 'C';
  } else if (score === 69) {
    return 'D+';
  } else if (score >= 60) {
    return 'D';
  } else {
    return 'F';
  }
};
const grade = getGrade(90);
console.log(grade);

화살표 함수와 일반 function으로 만든 함수와의 주요 차이점은 화살표 함수에서 가르키는 this 와 function에서

가르키는 this가 서로 다르다는건데요, 이는 나중에 다시 살펴보도록 하겠습니다.