JavaScript - 함수

sue·2020년 12월 6일
0

javaScript note

목록 보기
4/9

함수

특정 코드를 하나의 명령으로 실행 할 수 있게 해주는 기능
ex. 특정 값들의 합을 구하고 싶을 때

const a = 1;
const b = 2;
const sum = a + b;

함수로 만들기

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

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

함수를 만들 때는 function 키워드를 사용한다.
함수에서 어떤 값을 받아올지 정해주는데(a, b) 이를 파라미터(매개변수)라고 부른다.
함수 내부에서 return 키워드를 사용하여 함수의 결과물을 지정한다.
함수 안에서 return을 넣는 경우에는 함수가 끝나는 곳에 위치해야 한다. return을 만나면 함수가 값을 리턴하고 끝나기 때문에, 그 이후의 코드는 호출되지 않기 때문이다.

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

문자열을 + 대신 더욱 편하게 조합하는 방법
=> ES6 의 템플릿 리터럴 (Template Literal) 문법을 사용하는 것

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

등급 구하기

function getGrade(score) {
  if (score >= 90) {
    return "A";
  } else if (score >= 80) {
    return "B";
  } else {
    return "C";
  }
}

const grade = getGrade(80);
console.log(grade); // B

화살표 함수

함수를 선언하는 방식 중 또 다른 방법

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

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

function 키워드 대신 => 문자를 사용해서 함수 구현
화살표의 좌측: 함수의 파라미터,
화살표의 우측: 코드 블록

위와 같이 코드 블록 내부에서 바로 return하는 경우, 다음처럼 줄여서 쓰는 것도 가능

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

getGrade 함수처럼 여러 줄로 구성되어있는 경우는 코드 블록을 만들어야!

const getGrade = (score) => {
 if (score >= 90) {
    return "A";
  } else if (score >= 80) {
    return "B";
  } else {
    return "C";
  }
}
const grade = getGrade(90);
console.log(grade);

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

0개의 댓글