[자바스크립트 스터디]함수(함수 연습, Template Literal, 화살표 함수)

moonsemi1230·2020년 3월 19일
0
post-thumbnail

함수

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

const sum = add(1, 2);
console.log(sum);
찍히는 값 = 3

function hello(name) {
    console.log("Hello, " + name + "!");
}
hello("semi");
찍히는 값 = Hello, semi!

함수 - ES6문법 중 Template Literal

function helloTL(name) {
    console.log(`Hello, ${name}!`);
}
helloTL("semi");
찍히는 값 = Hello, semi!

Template Literal에 대해 조금 더 알아보자.

[JavaScript] ES6 템플릿 리터럴
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.
템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다.

  • 템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`)(grave accent)로 감싸줍니다.

가독성이 좋아 앞으로 자주 사용할 것 같다!

함수 - 연습

// getGrade
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(68);
console.log(grade);
찍히는 값 = D

화살표 함수

const add2 = (a, b) => {
    return a + b;
};
const sum2 = add2(1, 2);
console.log(sum2);
찍히는 값 = 3

// 위 코드 더 간결하게 수정
const add3 = (a, b) => a + b;
const sum3 = add3(1, 2);
console.log(sum3);
찍히는 값 = 3

const hello2 = name => {
    console.log(`Hello, ${name}!`);
};
hello2("semi");
찍히는 값 = Hello, semi!

화살표 함수에 대해 조금 더 알아보자.

[JavaScript] ES6 Arrow function(화살표 함수)

  • ES6에서 => 연산자를 사용하여 함수를 생성하는 Arrow function(화살표 함수)가 생겼습니다. Arrow function은 보다 간결하게 구문을 작성할 수 있는 익명 함수입니다.
  • return과 함께 적었던 반환문을 arrow function을 사용하면 아주 간결하게 표현할 수 있습니다.

study by. 벨로퍼트와 함께하는 모던 자바스크립트

profile
백엔드와 프론트엔드를 사랑하는 현 마크업개발자(퍼블리셔)입니다 :) 자바스크립트, React, Python을 공부하고 있습니다.

0개의 댓글