[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 5회차 미션 - 26강 조건문, 함수

조건문

if문

const a = 1;
if( a + 1 === 2){
    console.log('a + 1 이 2 입니다');
}

if문 안의 조건이 만족(true)될 때만 특정 코드{}를 실행시킬 수 있다.

const a = 1;
if (a + 1 === 2){
    const a = 2;
    console.log('if문 안의 a값은' + a);
    //a = 2
}
console.log('if문 밖의 a값은' + a);
// a = 1

위에서 보면 if문 안의 const a와 if문 밖에서의 a가 같은 이름이더라도 다른 값을 선언할 수 있음을 볼 수 있다. 그리고 그 스코프안에서 선언한대로만 적용이 된다. 반대로 var를 쓰면 a값이 모두 2라고 나온다. var는 이런식으로 변수의 적용이 애매하기때문에 쓰지 않기를 권장한다.

if else

const a = 10;
if( a > 15 ){
    console.log('a가 15보다 큽니다');
}else{
    console.log('a가 15보다 크지 않습니다.');
}

조건을 만족할때, 만족하지 않을 때 각각 다른 코드를 실행시킬 수 있다.

const a = 10; 
if (a === 5){
    console.log('5 입니다');
} else if (a === 10){
    console.log('10 입니다');
} else {
    console.log('5도 아니고 10도 아닙니다');
}

이렇게 else if 를 사용하여 여러가지 조건을 넣어서도 가능하다.

switch case

const device = 'iphone';
switch (device) { //괄호안엔 불러올 변수명
    case 'iphone': //조건 입력
        console.log('아이폰');
        break; //조건에 맞으면 switch를 나가
    case 'ipad':
        console.log('아이패드');
        break;
    case 'android':
        console.log('안드로이드');
        break;
    default: //모든 조건에 맞지 않을 때
        console.log('잘모르겠네요..');
}

switch문은 각 조건을 탐색하며 내려가다가 맞는 조건이 있으면 조건문을 빠져나온다. 그래서 break가 꼭 있어줘야된다. default는 모든 조건이 맞지 않을때 기본으로 실행되는 것을 말한다.

함수

파라미터가 주어졌을 때 어떤 결과를 나타내는 것이 함수다.

function add(a, b){ //a,b가 파라미터
    return a + b; //a,b를 대입해서 연산하고 리턴함
}
const sum = add(1, 2); //add함수에 파라미터 값에 1,2를 넣음
console.log(sum); //function add를 실행한 결과값인 sum을 콘솔에 출력
    

이런식으로 자주 쓰는 연산을 함수화 해서 만들 수 있다. sum에 add라는 함수의 파라미터값을 넣어서 호출하고 함수가 뱉어낸 그 값을 담아 놓는다. 다른 곳에서 변수 sum을 호출하면 아까 담아놓았던 값을 반환한다.
이런식으로 다양한 파라미터 값을 넣어 함수에 던지게 되면 함수는 여러번 재사용이 가능하다.

function hello(name){
    console.log('hello,' + name + '!');
}
hello('보미');
// hello, 보미! 반환

함수는 위처럼 활용도 가능하다.

Template Literal

문자열을 ‘‘로 조합하는 게 불편하게 느껴진다. 그래서 ES6에서는 이런점을 해결했다.

먼저 ES6에 대해서 설명하자면 ECMAScript6의 약자인 ES6는 자바스크립트의 버전을 말하며 2015년에 도입되어서 ES2015라고 불리기도 한다. 앞서 배운 const, let등이 ES6에 해당하는 문법이다. 그리고 2015년 이후에도 계속해서 새로운 버전의 ES7(2016), ES8(2017), ES9(2018), ES10(2019)까지 나와있다. 2015년에 큰 변화가 있었어서 ES6는 배워야 하지만 그 이후에 나온 버전들은 개발하면서 필요한 부분만 배우면 된다. 그럼 다시 본론으로 돌아가서 문자열 조합이 어떻게 개선되었는지 보자.
아까 썼던 function hello를 아래와 같이 바꿔볼 수 있다.

function hello(name){
    return `hello ${name}!`; //return을 사용하면 그 밑에 기능을 써도 return부분만 실행하고 종료함을 유의하자.
}
const result = hello('보미');
console.log(result);

함수 안에서 console.log를 실행하고 끝낼 수도 있지만 위처럼 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);

화살표함수

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

기존에 사용하던 함수에서의 {}와 return을 빼고도 가능하다.

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

이런식으로 간결하게 사용한다. 아까 만든 hello함수도 화살표 함수로 다시 만들어보자.

const hello = (name) => `hello ${name}!`;
const helloName = hello('보미');
console.log(helloName);

이렇게 가능하다.

마치면서

오늘은 여기까지, 수강 모습은 아래에.. 시청 영상 26강 07~12까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp