JavaScript Drill #2

javascript.info 웹사이트의 2.10 (if와 '?' 를 사용한 조건 처리) ~ 3.6 까지 정독하며 필자가 새롭게 배우고 느낀 점에 대해 정리해둔 지극히 개인적인 포스트이다.

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

조건부 연산자 '?'

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

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

위의 if else 문은 다음과 같이 짧고 간결하게 변형할 수 있다.

let accessAllowed = (age > 18) ? true : false;

주의사항
물론 조건부 연산자 '?' 를 사용하여 개발자 입장에서는 코드를 작성하는 시간과 코드의 줄 수를 줄일 수 있지만, 가독성이 현저히 떨어진다는 단점이 있다. 수평으로 길게 늘어진 코드보단 여러 줄로 나뉘어 작성된 코드 블록이 더 읽기 쉽기 때문에, 조건문이 아주 짧고 단순할 때만 사용하는 것이 권장된다고 한다.

2. 논리 연산자

|| (OR)

연산자와 피연산자가 여러개인 경우, 'OR' 은 언제나 첫번재 truthy를 찾는다는 것을 기억하자. 연습 문제 풀이 때 AND 와 항상 헷갈려했던 부분이다.

alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)

단락평가 (short circuit evaluation) 에도 활용할 수가 있다고 한다.

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

따라서 위의 코드는 두번째 메세지만 출력한다.

&& (AND)

연산자와 피연산자가 여러개인 경우, 'AND' 는 언제나 첫번째 'falsy' 를 찾는다.

alert( 1 && 2 && null && 3 ); // null

만약 falsy 를 찾지 못했을 경우, 다음과 같이 마지막 피연산자를 반환한다.

alert( 1 && 2 && 3 ); // 마지막 값, 3

AND 연산자의 우선순위는 OR 보다 높기 때문에 AND 가 항상 먼저 실행된다.

if문을 짧게 줄이기 위해 ||나 &&로 대체하여 사용하지 않도록 하자

! (NOT)

NOT 연산자의 우선순위는 모든 논리 연산자 중에서 가장 높다.

3. 반복문, switch문

새로 배운 내용이 크게 없는 것 같아서 생략하겠다.

4. 함수

Parameter (매개변수) 와 Argument (인수) 의 차이점

• 매개변수는 함수 선언 방식 괄호 사이에 있는 '변수' 이다. (선언시 쓰이는 용어)
• 인수는 함수를 호출할 때 매개변수에 전달되는 '값' 이다. (호출 시 쓰이는 용어)

함수 기본값

자바스크립트에서는 함수 호출 시 매개변수에 인수를 전달하지 않아도 아무런 에러가 발생하지 않는다.

인수가 전달되지 않는다면 'undefined' 가 할당된다.

매개변수에 값을 전달하지 않아도 'undefined' 대신 다른 값을 기본으로 할당하고 싶으면 다음과 같이 코드를 작성하면 된다.

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

함수 == 주석

• 함수는 간결하고, 한 가지 기능만 수행할 수 있게 해야한다. 간결한 함수는 테스트와 디버깅을 쉬워지게 만든다.

콜백 함수

함수를 함수의 인수를 전달할 수 있다. 이런 함수를 콜백 함수라고 한다. 다음의 코드를 살펴보자.

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

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

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

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

이렇게 함수를 작성하는 방법은 실무에서 아주 유용하게 사용된다고 하니 잘 기억하고 활용해보도록 하자.

사용자가 yes라고 대답한 경우 showOk가 콜백, no라고 대답한 경우 showCancel 이 콜백된다.

함수 선언문 vs 함수 표현식

• 함수 선언문과 함수 표현식의 가장 큰 차이는 자바스크리브 엔진이 언제 함수를 생성하는지에 있다. 함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다. 자바스크립트는 스크립트를 실행하기 전, 초기화 단계에서 전역에 선언된 함수 선언문을 찾고 미리 해당 함수들을 생성한다.

따라서 함수 선언문으로 선언한 함수는 스크립트 어디서든 접근할 수 있으나, 표현식은 그러지 못한다.

• 또다른 차이점은 스코프에 있다. 함수 선언문은 함수가 선언된 코드 블록 안에서만 유효하기 때문에, 아래와 같은 코드처럼 if-else 문 내에서 선언문을 이용하여 함수 생성 후 블록 밖에서 호출하려고 하면 에러가 발생한다. 반대로 표현식으로 선언한다면, if 문 밖에서 미리 선언해둔 변수에 표현식으로 만든 함수를 할당하여 블록 밖에서 호출을 가능하게 할 수 있다.

• 함수 선언문

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(); // 제대로 동작합니다.

정리하자면,

함수 선언문을 이용해 선언하는 걸 '먼저' 고려하는 게 좋다고 한다. 코드 구성을 좀 더 자유롭게 할 수 있고, 가독성이 더 좋아지기 때문이다.

화살표 함수

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 화살표 함수이다.

let func = (arg1, arg2, ...argN) => expression

인수가 하나만 있을 때는 다음과 같이 괄호를 생략해도 된다.

let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일합니다.

alert( double(3) ); // 6

인수가 없을 때는 괄호를 비우면 된다. 다만, 이 경우에는 괄호를 생략할 수 없다.

5. 코드 품질

코드 품질 관련해서는 따로 노트를 남기기보다 코드를 직접 작성할 때 활용하려고 한다.

이상 JavaScript Drill #2 를 마치겠다.

혹시나 글을 읽으신 분이 계시다면, 제가 작성한 내용 중에 틀린 내용이 있을 수도 있으니 참고해주시기 바랍니다. 피드백은 언제나 환영입니다 :)