[JS] TIL 2. 함수와 조건문

in PROGRAMING STUDY on Javascript


  1. 함수

    1.1 함수가 “작은 기능의 단위”라는 것을 이해할 수 있어야 한다.

    1.2 함수가 선언되어 변수에 담기는 과정을 설명하시오.

    1.3 함수의 결과값이 변수에 할당되어 담기는 과정을 설명하시오.

    1.4 괄호 내에 인자를 넣어서 함수로 전달하여 실행시킬 수 있는가?

    1.5 함수 표현식과 함수 그 자체 (선언식)를 구분하여 설명하시오.

    1.6 return과 콘솔 출력의 차이에 대해서 예제와 함께 설명하시오.

  2. 조건문

    2.1 truthy와 falsy 가 조건문에서 작동하는 방식을 서술하시오.

    2.2 논리 연산자의 종류와 그 역할대해서 서술하시오.

    2.3 if 와 else if, else에 대해 이해한 대로 서술하시오.

    2.4 복잡한 조건문을 활용하여 실생활에서 쉽게 마주할 수 있는 문제를 해결할 알고리즘을 예시를 들어 설명하시오.


Codestates의 소프트웨어 엔지니어링 강의를 듣고 정리한 필기입니다. 😀


1. 함수(Funtion)

중학교 때 배웠던 함수는 입력값이 함수를 거치고 나면 항상 고정된 값을 출력했다. 그래서 ‘‘함수가 맞는 것’’, ‘‘아닌 것’’ 이런 문제를 풀었던 기억이 있을 것이다.

title

함수의 정의는 크게 다르지 않다. 입출력의 과정이 존재하고, 함수 내에서 입력값을 활용하여 출력값을 만든다. 즉, 함수는 입력→함수→출력의 과정으로 이루어져 있다. 뿐만 아니라 프로그래밍의 세계 안에서는 함수라 하면 지시사항의 묶음이라고 봐도 무방하다.

title

함수의 표현 식도 크게 다르지 않다. 중학교 때 배웠던 표현 식을 떠올리라고 하면 f(x)를 떠올릴 것이다. 자바스크립트에서도 마찬가지로 함수 이름(입력)의 형태를 보인다. 여기서 입력은 매개변수(parameter) 라고 부르며, 이는 함수 실행 시 입력에 따라 바뀔 수 있는 변수지만, let 등의 키워드를 쓰지 않고 사용할 수 있다.

let timeToGoHome = function(speed, distance) {
    let time = distance / speed;
    console.log(time);
}

timeToGoHome()은 집까지 걸리는 시간을 계산하는 함수이다. 사람마다 속도가 다르고, 집까지 거리가 다르므로 매개변수는 speed와 distance이 되었다. 여기서 하나 더 알아가야 하는 것은 speed와 distance와 같은 매개변수를 전달 인자(arguments)라고 부른다.

title

timeToGoHome()의 전달 인자 자리에 10과 200을 넣고 콘솔로그에 찍어주었다. 출력값은 두 값을 나눈 20이 되었다. 여기서 보면 알 수 있듯이 10은 speed에 해당하고 200은 distance에 해당한다.

title

timeToGoHome()를 선언해줄 때 함수 내부에서 선언해 주었던 변수 time을 console.log()를 이용해 출력해보면, 범위(Scope)의 문제로 인해 ReferenceError가 뜨는 걸 볼 수 있다.

let timeToGoHome = function(speed, distance) {
    let time = distance / speed;
    console.log(time);
}

let myTime = timeToGoHome(10,200);
console.log (myTime);  // undefined

실행 결과를 변수에 담아두어도 함수 밖에서는 time이 존재하지 않는다. 그렇다면 이 값이 단순히 콘솔창에 찍혔을 뿐, 함수 밖에서 사용할 수 없다는 말이다. 즉, 출력값이 존재하지 않는다는 말이다. 이것을 어떻게 해결할 수 있을까?

let timeToGoHome = function(speed, distance) {
    let time = distance / speed;
    return time;
}

let myTime = timeToGoHome(10,200);
console.log (myTime);

출력값이 존재하려면 return이라는 키워드를 사용해야 한다. 단순히 console.log() 로 마무리하는 것은 출력이 없고, 그냥 입력만 있는 형태라는 것이다. 출력값이 없는 함수일 때는 return없이 console.log()로만 마무리해도 되지만, 출력을 위해서라면 return을 꼭 해줘야 한다.


2. 조건문(if 문)

조건문에 대해서 배우기 전에 블리언 (Boolean) 타입에 대한 이해가 필요하다.

2.1 비교연산자(comparison operator)

블리언 값은 항상 참(true)과 거짓(false)으로 표현된다.

이러한 블리언 값이 왜 조건문을 배우기 전에 이해해야 할 할까? 이유는 단순하다. 조건문 즉, 어떤 조건을 판별하는 기준을 만들어야 하기 때문이다.

3 > 5 ; // => false
9 < 10; // => true
'hello' === 'world'; // => false

조건문에서는 반드시 비교연산자(comparison operator)가 필요하다. 비교 연산자에는 동치 연산자(==) , 일치 연산자(===), 관계 연산자(>, >=, <, <=)가 있다. 비교의 결과는 늘 블리언, 즉 true 와 false이다.

1 == 1      // true
1 == "1"    // true
1 == '1'    // true
1 != 1      // true
1 != "1"    // false
1 != '1'    // false

3 === 3     // true
3 === '3'   // false
3 !== '3'   // true
4 !== 3     // true

==와 !==는 엄격하게 비교하지 않는다. 이게 무슨 말이나 하면, type이 다르더라도 적절하게 type을 변화 시켜 true를 반환한다. 반면 ===와 !==는 type까지 같아야 true를 반환해줌으로 동치 연산자보다는 일치 연산자를 더 많이 쓴다.

title

위는 동치 연산자와 일치 연산자가 같게 취급되는 것을 보여주는 표이다. 딱 보아도 동치 연산자가 예외적인 법칙이 너무 많다는 것을 알 수 있다.

2.2 조건문

if (조건1) {
    // 조건1이 통과할 경우
} else if (조건2) {
    // 조건1이 통과하지 않고
    // 조건2가 통과할 경우 
} else {
    // 모든 조건이 통과하지 않을 경우
}

조건문에는 세가지 키워드(if, else if, else)가 쓰인다. 조건1, 조건2에는 불리언값으로 출력되는 조건문이 들어가게된다.

만약 조건1이 통과할 경우 if의 중괄호 안에 있는 코드가 실행한다. 조건1이 통과하지 않고, 조건2가 통과할 경우 else if의 중괄호가 실행된다.

중괄호 안에는 조건에 따른 실행내용이 들어간다.

2.3 논리연산자(Logical Operator)

let num = 10;
if (num > 3 && num <= 10) {
    console.log('변수 num은 3보다 크고, 10보다 같거나 작다.')
}else if(num > 3 || num <= 10) {
    console.log('변수 num은 3보다 크거나 10보다 같거나 작다.')
}else if(!num > 3) {
    console.log('변수 num은 3보다 크지 않다.')
}

두 가지 조건을 번에 쓰고 싶을 때는 논리연산자(Logical Operator)을 사용하면 된다. 논리 연산자에는 AND 연산자(&&), OR 연산자(||), NOT 연산자(!)가 있다.

true && true    // => true
true && false   // => false
false && false  // => false

false && console.log('실행하지마') // => false
                                 // => 처음 만난 false가 falsy하기 때문에 
                                 // => 이후에는 평가하지 않는다.

5 && 10 // 하지만 둘다 truthy 하면 뒤에 있는 값을 출력한다.

AND 연산자(&&)는 모두 true일때 true를 출력하고, 하나라도 false면 false를 출력한다. AND 연산자(&&)는 falsy 한 값을 만나면, 이후로 평가하지 않고 바로 false를 출력한다.

true || true    // => true
true || false   // => true
false || false  // => false

true || console.log('실행하지마')  // => true
                                 // => 처음만난 true가 truthy 하기 때문에 
                                 // => 이후에는 평가하지 않는다.

OR 연산자(||)는 하나라도 true일때 true를 출력하고, 모두 false면 false를 출력한다. 이러한 OR 연산자는 truthy 한 값을 만나면, 이후로는 평가하지 않고 바로 true를 출력한다.

!false    // => true
!true     // => false
!(3>2)    // => false

NOT 연산자(!)는 불리언 값을 반대로 출력한다.


© 2020. by RIVER

Powered by RIVER