JavaScript Fundamentals - javascript.info (4)

***다음 글의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다.

 

JavaScript Fundamentals 2.12 ~ 2.15

 

---

    2.12  nullish 병합 연산자 '??'    

* 최근 추가된 문법.

a ?? b

a 가 null도 아니고 undefined도 아니면 a, 그 외의 경우는 b.

=> 다음과 동일한 결과

x = (a !== null && a !== undefined) ? a : b;

 

'??'와 '||'의 차이

- '||'는 첫 번째 truthy 값 반환

- '??'는 첫번째 정의된(defined) 값 반환

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

=> '||'는 0이 falsy 한 값이므로 다음의 truthy 한 값 100 return.

=> '??'는 height=0이 defined되어 있는 값이므로 0 return.

 

'??'의 연산자 우선순위

=> 낮으므로 만약 사용할 경우 괄호를 사용해 줄것.

 

'||', '&&'와 함께 사용하지 못하므로 함께 사용해야 하는 경우 괄호로 분리해줄 것.

 

Summary 

'??'를 이용하면 '값이 할당된' 변수를 빠르게 찾을 수 있다.

height = height ?? 100; 과 같이 사용하면 height이 null, undefined일 경우 100을 할당하게 할 수 있음.

---

    2.13  While과 for 반복문   

'while' 반복문

 

while (condition) {
  // 코드
  // '반복문 본문(body)'이라 불림
}

'do... while' 반복문

(본문이 먼저 실행되고, 조건을 확인한 후 조건이 truthy인 동안엔 본문이 계속 실행)

do {
  // 반복문 본문
} while (condition);

'for' 반복문

for (begin; condition; step) {
  // ... 반복문 본문 ...
}

* for의 begin, condition, step은 생략가능. 단, 생략 시에도 ';'꼭 써줘야 에러 안남. 셋다 생략시 무한루프.

반복문 빠져나오기

 반복문 조건이 falsy 할 경우 반복문이 종료되지만, 따로 'break' 명령을 사용해 반복문을 빠져나올 수도 있다.

 

다음 반복으로 넘어가기

 'continue' => 전체 반복문을 멈추는 'break'와 달리, 현재 실행 중인 반복을 멈추고 다음 반복으로 넘어간다.

예) 홀수인 경우만 출력하고, 짝수인 경우 continue를 통해 출력 실행 없이 다음 반복으로 넘어가기.

for (let i = 0; i < 10; i++) {

  // 조건이 참이라면 남아있는 본문은 실행되지 않습니다.
  if (i % 2 == 0) continue;

  alert(i); // 1, 3, 5, 7, 9가 차례대로 출력됨
}

*** '?' 삼항연산자에 break, continue사용 불가. (문법 에러).

 

break / continue와 레이블

 중첩된 반복문을 빠져나와야 할 때 사용.

레이블 : 반복문 앞에 콜론과 함께 쓰이는 식별자

labelName: for (...) {
  ...
}

사용예제)

outer: for (let i = 0; i < 3; i++) {

  for (let j = 0; j < 3; j++) {

    let input = prompt(`(${i},${j})의 값`, '');

    // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다.
    if (!input) break outer; // (*)

    // 입력받은 값을 가지고 무언가를 함
  }
}
alert('완료!');

continue + 레이블을 사용 시 => 레이블이 붙은 반복문의 다음 이터레이션이 실행.

** break, continue를 레이블 함께 사용하는 것은 반복문 내에서만 사용가능.

 

---

    2.14  Switch문    

switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}

주의! case문 안에 break문이 없으면, 해당 case 이후에 이어지는 case문을 전부 실행하게 된다.

 

여러 개의 "case"문 묶기

let a = 3;

switch (a) {
  case 4:
    alert('계산이 맞습니다!');
    break;

  case 3: // (*) 두 case문을 묶음
  case 5:
    alert('계산이 틀립니다!');
    alert("수학 수업을 다시 들어보는걸 권유 드립니다.");
    break;

  default:
    alert('계산 결과가 이상하네요.');
}

자료형의 중요성

switch문은 비교값과, case 조건값의 자료형이 같아야 비교해줌. 문자 '3'과 숫자 3 비교 불가.

---

    2.15  함수    

함수 선언

function name(parameter1, parameter2, ... parameterN) {
  // 함수 본문
}

함수 호출 방법 => 아래와 같이 선언한 함수의 이름으로 호출가능.

name();

지역 변수

함수 안에서만 접근할 수 있는 변수.

외부 변수 

함수 내부뿐만 아니라 외부의 변수에도 접근 및 수정 가능.

let userName = 'John';

function showMessage() {
  let message = 'Hello, ' + userName;
  alert(message);
}

showMessage(); // Hello, John

단, 만약 외부 변수를 함수 내부에서 다시 재선 언 할 경우, 함수 내부에서 다시 선언 후 할당한 값은 내부 변수에서만 사용됨.

let userName = 'John';

function showMessage() {
  let userName = "Bob"; // 같은 이름을 가진 지역 변수를 선언합니다.

  let message = 'Hello, ' + userName; // Bob
  alert(message);
}

// 함수는 내부 변수인 userName만 사용합니다,
showMessage();

alert( userName ); // 함수는 외부 변수에 접근하지 않습니다. 따라서 값이 변경되지 않고, John이 출력됩니다.

*** 함수 외부에 선언된 변수는 global variable 전역 변수.
프로젝트 전반에 걸쳐서 사용하는 변수가 아니라면 최대한 전역변수를 적게 사용하고, 함수 내 지역변수를 사용하는 것이 권장된다.

 

매개변수 parameter

매개변수 : 함수 선언 시 사용 (선언 시)

인자 : 함수 호출 시 매개 변수에 전달되는 값. (호출 시)

function showMessage(from, text) { // 인자: from, text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)

*** 매개변수는 전달받은 값을 '복사' 하여 사용함. 때문에 함수 내에서 값을 수정해도 외부에는 영향을 미치지 않는다.

function showMessage(from, text) {

  from = '*' + from + '*'; // "from"을 좀 더 멋지게 꾸며줍니다.

  alert( from + ': ' + text );
}

let from = "Ann";

showMessage(from, "Hello"); // *Ann*: Hello

// 함수는 복사된 값을 사용하기 때문에 바깥의 "from"은 값이 변경되지 않습니다.
alert( from ); // Ann

기본값

매개변수가 두 개인 함수에 매개변수를 하나만 넣고 호출해도 에러는 안남. 대신 입력되지 않은 매개변수가 undefined로 자동할당.

또는, 다음과 같이 기본값을 설정가능.

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

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

** 구식 자바스크립트에서는 매개변수 기본값 관련 구문이 없어서 다음과 같이 사용했다.

1)

function showMessage(from, text) {
  if (text === undefined) {
    text = 'no text given';
  }

  alert( from + ": " + text );
}

2)

function showMessage(from, text) {
  // text의 값이 falsy면 기본값이 할당됨
  // 이 방식은 text == ""일 경우, text에 값이 전달되지 않은것과 같다고 간주합니다..
  text = text || 'no text given';
  ...
}

 

반환값

return;

함수에 지시자 return만 명시도 가능.

function showMovie(age) {
  if ( !checkAge(age) ) {
    return;
  }

  alert( "영화 상영" ); // (*)
  // ...
}

위의 경우 checkAge가 false반환 시, alert 줄 실행이 안된다.

 

함수 이름 짓기

함수이름은 가능하면 동사로, 간결, 명확하게 지어야 한다, 그를 위해 다음의 접두어를 사용할 수 있다.

• show : 무언가를 보여줌.
• get : 값을 반환
• calc : 무언가 계산
• create : 무언가 생성
• check : 무언가를 확인하고 불린 값 반환

각각의 함수는 동작 하나만을 담당해야 한다.

 

함수 == 주석

함수가 길어졌다? ==> 잘게 쪼갤 때가 되었다. (디버깅이 쉬워짐)

쪼개기 전 코드

function showPrimes(n) {
  nextPrime: for (let i = 2; i < n; i++) {

    for (let j = 2; j < i; j++) {
      if (i % j == 0) continue nextPrime;
    }

    alert( i ); // 소수
  }
}

쪼갠 후 코드

function showPrimes(n) {

  for (let i = 2; i < n; i++) {
    if (!isPrime(i)) continue;

    alert(i);  // a prime
  }
}

function isPrime(n) {
  for (let i = 2; i < n; i++) {
    if ( n % i == 0) return false;
  }
  return true;
}

자기 설명적 코드(self-describing code)  : 이름만 보고도 어떤 동작을 하는지 알 수 있는 코드. (중복을 없앨 수 있고, 가독성 높은 코드 작성가능)

 

함수는 스크립트를  구성하는 주요 구성 요소이다.

 

예제) 다음의 if 문을 '?'와, '||'를 사용하여 대체하기.

function checkAge(age) {
  if (age > 18) {
    return true;
  } else {
    return confirm('보호자의 동의를 받으셨나요?');
  }
}

물음표 연산자 '?'를 사용한 해답:

function checkAge(age) {
  return (age > 18) ? true : confirm('보호자의 동의를 받으셨나요?');
}

OR 연산자 ||를 사용한 해답(물음표 연산자를 사용한 해답보다 짧음):

function checkAge(age) {
  return (age > 18) || confirm('보호자의 동의를 받으셨나요?');
}