자바스크립트 기본

if와 '?'를 사용한 조건 처리

if는 말그대로 '만약'이라는 뜻이다. 그래서 괄호 안의 값이 true면 코드블럭이 실행된다.

let isStudy=true;

if(isStudy){
    console.log("공부중");
}

위와 같이 isStudy가 true인 경우, "공부중"이라는 콘솔이 뜬다. 여기서 만약 코드블럭이 단 한줄이라면 중괄호{} 없이 사용해도 되지만, 가독성을 위해 한 줄이더라도 중괄호를 사용하는 것이 좋다고 한다.

 

truthy vs falsy

위의 isStudy처럼 불린값이 되었을 때, true가 되는 값을 참같은 값, truthy라고 하고 그 반대로 false가 되는 값을 거짓같은 값, falsy라고 한다. 숫자 0, 빈 문자열"", null, undefined, NaN 모두 falsy가 되는 값이다.

 

if - else if - else 

let toDoList=10;

if(toDoList===0){
	console.log("할 일 다 했다!")
}else if(toDoList===5){
	console.log("할 일이 절반 남았다!")
}else{
	console.log("할 일이 아직 남았다!")
}

위와 같이 if문은 else if, else와 함께 사용해주어서 복수 조건을 처리할 수도 있다. 

 

 

조건부 연산자, ?

if-else와 유사한 방법으로 조건부 연산자가 있다. 

let isStudy=true;

if(isStudy){
    console.log("공부중");
}else{
    console.log("노는중");
}

위의 if-else문을 아래와 같이 한줄로 수정할 수 있는데, 이렇게 ?를 이용한 방법을 조건부 연산자라고 한다.

let isStudy=true;

isStudy?console.log("공부중"):console.log("노는중")

(조건)?(조건이 참일 때):(조건이 거짓일 때) 와 같이 세 가지 항으로 표현되기 때문에 삼항 연산자라고도 불린다. 

 

if (age < 3) {
  message = '아기야 안녕?';
} else if (age < 18) {
  message = '안녕!';
} else if (age < 100) {
  message = '환영합니다!';
} else {
  message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
}

위와 같이 복수 조건인 경우도 아래의 코드처럼 삼항연산자로 표기할 수 있다.

let age = prompt('나이를 입력해주세요.', 18);

let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

alert( message );

 

그렇다면 if - else를 쓰는 것이 좋을까, 조건부 연산자를 쓰는 것이 좋을까?

조건부 연산자의 경우, 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌다. 그렇기 때문에, 어떠한 조건을 충족하는지 아닌지를 검사한다면 조건부 연산자를 쓰는 것이 좋을것이고, 그렇지 않고 분기를 처리해야할 경우에는 if - else문을 쓰는 것이 좋다. 즉, 만일 "공부 중인지 아닌지라는 조건을 검사"하고 싶다면 조건부 연산자를 "몇 살인지에 따라서 다 다른 결과값을 출력"하고 싶다면 if - else문을 사용하는 것이 좋다. 

 

논리연산자 

자바스크립트에는 세 가지 연산자가 있다.

 

(1) || (or)

result = a || b

a인지 b인지를 판단하는 연산자이다. 만일 a, b 둘 중 하나라도 맞다면 true이고, 모두 아니라면 false가 된다. 

true || true   // true
false || true  // true
true || false  // true
false || false // false

 

아래와 같이 여러개를 검사할 수도 있다. 

result = value1 || value2 || value3;

여기서 ||는 연산자이고, value1, value2, value3를 피연산자라고 한다. 이렇게 ||로 체이닝된 상태에서 자바스크립트는 왼쪽부터 오른쪽으로 순차적 탐색을 이어간다. 탐색을 이어갈 때에는 result=value1, result=value2, result=value3 이렇게 순차적으로 truthy한지를 검사한다. 만일 truthy한 값이 나온다면 그 즉시 연산을 멈추고 원래의 피연산자값을 반환한다. 즉, result=value1이 falsy고 result=value2가 truthy라면 마지막 result=value3를 검사하지 않고, 바로 value2를 반환하는 것이다. 반대로, 모든 탐색이 끝났는데도 다 falsy하다면 마지막 피연산자인 value3를 반환한다. 

 

위에서 설명했던, result=value1이 falsy고 result=value2가 truthy라면 마지막 result=value3를 검사하지 않고, 바로 result=value2를 반환하는 것을 단락평가라고 한다. 

true || alert("not printed");
false || alert("printed");

이 코드에서 첫번째 줄은 true에서 즉시 검사를 멈추기 때문에 alert창이 뜨지 않지만, 두번째 줄은 끝까지 탐색했기 때문에 alert창이 뜬다. 

 

(2) && (and)

result = a && b;

or과 달리 and는 result=a, result=b 가 모두 충족되어야 true가 된다. 

true && true   // true
false && true  // false
true && false  // false
false && false // false

 

마찬가지로 여러개를 검사할 수도 있다.

result = value1 && value2 && value3;

or과 똑같이 result=value1, result=value2, result=value3 이렇게 순차적으로 truthy한지를 검사한다. 만일 falsy한 값이 나온다면 그 즉시 연산을 멈추고 원래의 피연산자값을 반환한다. 즉, result=value1이 truthy고 result=value2가 falsy라면 마지막 result=value3를 검사하지 않고, 바로 value2를 반환하는 것이다. 반대로, 모든 탐색이 끝났는데도 다 truthy하다면 마지막 피연산자인 value3를 반환한다. 

 

만일 &&와 ||를 같이 사용하게 되면 &&의 우선 순위가 더 높게 적용된다. 

&&의 우선순위가 ||보다 높습니다.
AND 연산자 &&의 우선순위는 OR 연산자 ||보다 높습니다.따라서 a && b || c && d는 (a && b) || (c && d)와 동일하게 동작합니다.
                                                                                                                                                          - 모던 자바스크립트 튜토리얼

 

(3) ! (not)

result = !value;

!는 해당값의 불린형을 반대로 바꾸는 역할이다. 즉, 만일 result=value가 true였다면, reulst=!value;는 false가 되는 것이다. 

 

함수 표현식

자바스크립트에서의 함수는 특별한 동작을 하는 구조가 아니라 특별한 종류의 값으로 취급한다. 

선언된 함수는 아래와 같이 꼭 불러와야지만 실행이 된다. 

function sayHi() {   // (1) 함수 생성
  alert( "Hello" );
}

let func = sayHi;    // (2) 함수 복사

func(); // Hello     // (3) 복사한 함수를 실행(정상적으로 실행됩니다)!
sayHi(); // Hello    //     본래 함수도 정상적으로 실행됩니다.

(2)처럼 함수 자체를 복사하는 방식으로도 사용할 수 있다!

 

콜백 함수 

콜백 함수란, 함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이다. 즉, 함수의 인자에 함수를 전달하는 것을 의미한다. 

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "동의하셨습니다." );
}

function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);

여기서 ask함수를 부르면서, showOk함수와 showCancel를 ask함수의 인자로 담아서 보냈다. ask 함수 안에서 대답이 yes라면 showOk가, no라면 showCancel이 불러와질 텐데 이렇게 불러와지는 showOk, showCancel를 콜백함수 또는 콜백이라고 부른다. 

 

함수 표현식 vs 함수 선언문

// 함수 표현식
let sum = function(a, b) {
  return a + b;
};

// 함수 선언문
function sum(a, b) {
  return a + b;
}

함수 표현식	함수 선언문
함수는 표현식이나 구문 구성(syntax construct) 내부에 생성	함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재
실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성	함수 선언문이 정의되기 전에도 호출 가능
블록 밖에서도 함수 접근 가능	블록 밖에서는 함수 접근 불가

함수 표현식은 let sum = 다음에 오는 function에 도달했을 때 함수를 생성한다. 하지만 함수 선언문은 독자적으로 존재하기 때문에 정의되기 전에도 호출이 가능하다.

 

//함수 선언형
let age = prompt("나이를 알려주세요.", 18);

if (age < 18) {

  function welcome() {
    alert("안녕!");
  }

} else {

  function welcome() {
    alert("안녕하세요!");
  }

}

welcome(); // Error: welcome is not defined

//함수 표현식
let age = prompt("나이를 알려주세요.", 18);

let welcome;

if (age < 18) {

  welcome = function() {
    alert("안녕!");
  };

} else {

  welcome = function() {
    alert("안녕하세요!");
  };

}

welcome(); // 제대로 동작

또한 위의 코드처럼 함수 선언형을 사용했더니 동작하지 않던 코드가 함수 표현식을 사용하니 잘 동작하기도 한다. 함수 선언문은 블록 밖에서는 함수에 접근하지 못하기 때문이다. 하지만, 함수 표현식을 이용하면 welcome이라는 변수를 정의하고, welcome변수에 함수를 할당하면 되기 때문에 블록 밖에서도 함수에 접근 가능하다. 

 

화살표 함수 기본

위에서 살펴본 함수 표현식을 보다 단순하고 간결하게 표현할 수 있는 문법이 있다. 바로, 화살표 함수이다. 

//함수 표현식
let sum = function(a, b) {
  return a + b;
};

//화살표 함수
let sum = (a, b) => a + b;

위의 함수 표현식을 아래와 같이 화살표 함수로 표현할 수 있다. 이처럼 화살표 함수는 함수 표현식의 특징을 가지고 있으면서도 간결하다는 장점이 있다.

 

📚 참고

모던 자바스크립트 튜토리얼