본문 바로가기

JavaScript

함수

자바스크립트의 함수라는 개념을 알아보겠습니다.

파라미터가 함수에 주어졌을 때 이것을 결과로 출력하는 경우를 말합니다.

여기서 파라미터는 input이라고 생각하면 편하다. (넣는값이라고 생각하면 편하다.)

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

const kjj = kjs(1, 2);
console.log(kjj);

함수를 사용 할 때에는 function이라는 키워드를 사용합니다.

그리고 함수이름을 만들어줘야 합니다. 여기서는 function(함수)의 kjs(이름)을 주겠습니다.

그리고 여기에 이제 파라미터를 설정하는 것이다.

함수 뒤에 넣는 값을 파라미터라고 한다. 뭘 "넣으면" 결과가 나오는데 그 "넣는 값"이 파라미터에요.

function(함수) kjs(이름) 뒤에 ( )가 파라미터이다. 여러개의 파라미터를 받아 올 때에는 쉼표로 구분한다.

function kjs (a, b) { //그리고 나서 kjs함수를 더해줄건데 이것을 반환해서 결과를 출력해주어야한다.

그 때 return이라는 키워드를 사용해서 반환을 해주어야 한다.

이렇게 먼저 펀션 kjs함수에 (a랑 b) 값을 넣어주었고, 그것을 반환하려고 { } 구문안에 
+ 하기를 해보았고 return해서 출력해주었다.

function hello(name) {
  console.log('My name is, ' + name + ' !');
}

hello('kjs');

이런식으로 문자열도 반환할 수 있는데, 펀션함수 이름을 헬로우로 정해줬고 파라미터를(name)으로 정했습니다.

다음으로 { } 안에서 반환하기 위한 콘솔로그 문구를 작성 했습니다.

밖에서 이제 펀션함수 헬로우를 kjs로 설정을 해주었기 때문에, console.log('My name is, + name[kjs] + ' !');

가 출력 될 때에는 My name is kjs !라고 나오게 된 것입니다.

다음으로 ES6를 이제 잠시 배워볼건데 이거 아주아주 중요한거라서 알고 넘어가야 나중에 코딩을 할 때 편해져요.

ES6(ECMAScript6) 초반에 우리가 사용했던 const 나 let도 ES6문법 중에 하나입니다.

5에서 6로 넘어갈 때, 많은 변화가 일어나서 ES6문법은 기본적으로 알아두는 것이 좋다.

우리 먼저 템플릿 리터럴이라는 것에 배울 것입니다.

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

hello('velopert');
function hello(name) {
  return `Hello ${name}!`;
}

const asdf = hello('kjs');
console.log(asdf);

문자열을 조합할 때, 좀 더 편하게 조합할 수 있게하는 문법이 존재한다. (ES6)의 템플릿 리터럴(Template Literal)

이 후에도 매년 새롭게 ES7, 8, 9...계속해서 나오지만 모든 문법을 다 알고 있기에는 시간적한계가 존재한다.

그렇기 때문에 필요할 때, 새롭게 익혀 사용하는 것을 추천드린다.

백틱 ` `안에 넣고싶은 문자를 넣는다, 그뒤에 달러 $사인과 중괄호{ }으로 뒤에 자바스크립트로 받아온 파라미터를 넣어준다.

그리고 우리가 함수를 반환할 때에는 reutrn이라는 것을 사용한다고 앞에서 배웠습니다.

또 여기서 중요한 사실이 있는데 return을 사용하는 순간 함수는 종료가 된다.

그래서 return을 사용하고 난 후 같은 구문안에서 작업을 한다던지 한번 더 return을 한다던지가 안되요.

물론 if문을 돌린다고 하면 if문의 조건이 끝날 때에, return을 마무리하겠지만요.

문법과 문법의 이해를 완전히하고 적용을 하는 것이 중요합니다.

 

함수연습

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 (score >= 60) {
    return 'D';
  } else {
    return 'F';
  }
}

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

펀션(함수) 겟그레이드(함수의이름)에 (파라미터값socre)를 주어서 if문을 만들어보겠습니다.

이번에 만든 if문은 고정 값을 넣어주고 return해서 반환할 때,

else if문을 추가해서 원하는 여러가지의 값들은 넣어놓고 마지막으로 else문으로 if문을 마무리해줍니다.

 

후에 밖에서 펀션함수의 겟그레이드(함수이름)의 파라미터값 score를 출력해줍니다.

이 때 다시 한 번 재선언을 해줍니다.

받아올 때 const(내장객체)라는 (변수인데 상수처럼작용)하는 것을 가져와 위에서 사용했던 function함수를

받아 줄것이다.

여기서 let함수로 받아올수도 있지만, 우리는 값을 여러번 재선언할필요없이,

한번에 출력을 할 것이기 때문에 const를 사용해서 받아주었다.

'JavaScript' 카테고리의 다른 글

객체  (0) 2020.04.10
ES6의 화살표함수  (0) 2020.04.10
조건문 다음 swich case  (0) 2020.04.09
조건문  (0) 2020.04.09
비교연산자  (0) 2020.04.09