[The Modern JavaScript] The JavaScript language - JavaScript Fundamentals 3

Loops: while and for

The "while" loop

while (condition) {
  ... // 반복문 본문(body)
}

• condition 조건을 만족할(truthy) 동안 반복문이 실행됨
  • 반복문 본문이 한 번 실행되는 것을 반복(iteration, 이터레이션)이라고 부름
• 본문이 한 줄이라면 대괄호 생략 가능
• while(true / 1) : 무한 반복문
  
  

The "do... while" loop

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

• 본문이 먼저 실행되고, 조건이 truthy인 동안 반복 실행
• 조건 결과와 상관 없이 본문을 최소한 한 번 이상 실행해야 하는 경우에 사용
  
  

The "for" loop

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

• begin : 반복문에 진입할 때 한 번 실행
• condition : 반복마다 해당 조건을 확인하여, false면 반복문 종료
• body : condition이 truthy인 동안 반복 실행
• step : body가 실행된 이후에 실행
• => 처음 begin을 실행한 후, condition과 body, step이 계속해서 반복 실행됨

Skipping parts

• for문 구성 요소 생략 가능
  • begin, step
  • 모든 요소를 생략하면 무한 반복문 : for(;;)
  • ; 세미콜론은 생략 불가
    
    

Breaking the loop

• 일반적으로 반복문의 조건이 falsy가 되면 종료
• break 사용하여 종료 가능
  
  

Continue to the next iteration

• continue : 전체 반복문은 멈추지 않고 현재 이터레이션을 멈추고 다음 이터레이션으로 넘어감 (조건 통과)
• 중첩 레벨을 줄일 수 있음
• cf. '?'에는 문법 구조(break/continue)가 올 수 없음
  
  

Labels for break/continue

lableName : for (...) {
  ...
  if (condition) break lableName;
  ...
}

• 반복문에 lableName을 부여함
• break lableName : 해당 레이블이 붙은 반복문을 종료
• continue도 가능, 레이블이 붙은 반복문의 다음 이터레이션 실행
  
  

The "switch" statement

• 복수의 if 조건문은 switch로 바꿀 수 있음

The syntax

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

• x의 값과 case문의 value1,2... 값을 비교
• 일치하는 값을 찾으면 해당 case문이 실행
  • case문 안에 break문이 없으면 이어지는 case문을 계속 실행하므로 주의
• 일치하는 case문이 없다면 default문이 있는 경우 실행됨
  
  

Grouping of "case"

switch (x) {
  case 1:
  case 2:
    alert('example');
    break;
    
  default:
    alert('Bye Bye');
}

• 실행문이 같은 경우, 묶어서 사용 가능
• x의 값이 1 또는 2인 경우 같은 alert 메시지 출력
  
  

Type matters

• 비교 값과 case문의 값이 자료형까지 일치해야 함
• cf. prompt로 사용자가 입력한 값은 문자열로 반환하기 때문에 case 숫자 조건문은 일치할 수 없음
  
  

Functions

• 함수는 프로그램을 구성하는 주요 구성 요소(building block)
• 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있음

Function Declaration

let outer = value;
function name(parameter1, parameter2, ... ) {
  // 본문
  let local = value;
  alert(parameter1, parameter2);
}

name(param1, param2);

• 함수 선언(function declaration) = 함수 선언문
• 정의한 함수는 함수 이름과 파라미터를 통해 호출할 수 있음

Local variables

• 함수 내에서 선언한 지역 변수(local variable)는 함수 안에서만 접근 가능

Outer variables

• 함수 내부에서 외부에서 선언한 외부 변수(outer variable)에 접근 및 수정 가능
• 함수 내부에서 외부 변수와 동일한 이름의 지역 변수가 있다면 지역 변수만 사용 가능
• 전역 변수(global variable) : 함수 외부에 선언되어 모든 함수에서 접근할 수 있는 변수, 최소한으로만 사용

Parameters

• 임의의 데이터를 함수 안에 전달 가능
• 전달된 이름으로 함수 내에서 사용함

function changeText(text){
	text = 'Hello, text!'; // text 값 변경
}

let text = 'just text'; // 전역 변수 text
changeText(text); // 함수 호출
alert(text); // 변경되지 않은 'just text' 사용

• 함수는 전달 받은 인수(argument)를 복사하여 사용하기 때문에, 함수 내에서 변경된 사항은 외부 변수에 반영되지 않음
  • A parameter는 함수 선언 시 사용되는 괄호 사이의 변수
  • An argument는 함수 호출 시 사용되는 파라미터에 전달되는 값

Default values

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

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

• 파라미터를 전달하지 않았을 때 사용되는 기본 값 설정
• 기본 값을 함수 호출로도 설정 가능
• 이외에 if문 또는 논리 연산자 ||, ??로 기본 값 설정 가능

Returning a value

function sum(a, b){
  return a + b;
}

let result = sum(1, 2);
alert( result ); // 3

• 함수 호출했을 때 return을 통해 특정 값을 반환하도록 함
• return이 오면 즉시 함수가 중단되고 해당 값을 반환
  • 값을 반환하지 않고 return만 사용 시 함수가 즉시 종료됨
• cf. return문이 없거나 return 지시자만 있는 함수는 undefined를 반환함

Naming a function

• 가능한 간결하고 명확하게 어떤 기능을 하는 지 알 수 있어야 함
  • get... - 특정 값을 반환
  • calc... - 특정 값을 계산
  • create... - 특정 값을 생성
  • check... - 특정 값을 확인하고 불린값 반환
  • etc.
• 함수는 하나의 동작만 담당해야 함

Functions == Comments

function showPrimes(n) {

  for (let i = 2; i < n; i++) {
    if (!isPrime(i)) continue;
/* for (let j = 2; j < i; j++) {
     if (i % j == 0) continue;
   } */
    
    alert(i);  // a prime
  }
}

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

• 함수를 간결하게 만들면 그 자체로 주석의 역할까지 가능
  • isPrime 함수가 소수 여부를 검증한다는 것을 알 수 있음
  • Self-describing code
    
    

Function expressions

Function is a value

let sayHi = function() {
  alert("Hello");
};

// sayHi() 괄호가 없기 때문에 전체 코드 출력
alert( sayHi ); 

// sayHi() -> 함수 호출 결과(반환 값)가 저장
// sayHi -> 함수 자체를 복사
let func = sayHi;
func(); // Hello
sayHi(); // Hello

• 변수에 함수를 생성하고 할당할 수 있음
• 함수를 복사하여 다른 변수에 할당하는 것도 가능
  
  

Callback functions

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

function showOk() {
  alert("동의하였습니다.");
}
function showCancel() {
  alert("취소하였습니다.");
}

ask("동의하십니까?", showOk, showCancel);

/* ask (
		"동의하십니까?",
        function() { alert("동의하였습니다."); },
        function() { alert("취소하였습니다."); }
   ); */

• 함수를 함수의 인수로 전달하여 필요한 경우 나중에 호출(called back)하는 것이 콜백 함수
• showOk, showCancel
• 이름 없이 선언한 함수는 익명 함수(anonymous function)
• ask(...) 안에 함수 선언
  
  

Function expression vs Function Declaration

• 문법 (the syntax)
  • 함수 선언문(function declaration) : 주요 코드의 흐름 중간에 독립된 구문으로 존재
  • 함수 표현식(function expression) : 표현식이나 구문 구성(syntax construct) 내부에 생성
• 생성 시점 (when a function created by the JavaScript engine)
  • 선언문은 위치와 상관 없이 어디서든 사용 가능
    • 자바 스크립트는 준비 단계에서 전역에 선언된 함수 선언문을 찾아 생성하기 때문
  • 표현식은 코드의 실행 흐름이 해당 함수에 도달했을 때 생성하여 사용 가능
• 스코프 (block scope)

// 선언문은 함수가 선언된 코드 블록 안에서만 유효하기 때문에 
// 해당 블록 밖에서는 에러 발생

let age = 16;

if (age < 18) {
  welcome(); // Hello!
  
  // 블록 내에서는 선언 위치와 상관 없이 실행 가능
  function welcome(){
    alert("Hello!");
  }
  
  welcome(); // Hello!

} else {
  
  function welcome() {
    alert("Hi, hello");
  }
}

// 선언된 블록 밖에서는 실행할 수 없음
welcome(); // Error

// 표현식은 if문 밖에 선언한 변수에 함수를 할당하면 
// 해당 블록 밖에서도 사용 가능

let age = prompt("나이를 입력하세요.");
let welcome;

if (age < 18) {
  welcome = function() {
    alert("Hello");
  };
} else {
  welcome = function() {
    alert("Hi, hello");
  };
}

welcome(); // 실행 가능

• 일반적으로 함수 선언문을 이용해 선언하는 것을 권장
  • 코드를 유연하게 구성할 수 있고, 가독성에도 좋음
  • 필요한 경우 함수 표현식으로 사용
    
    

Arrow functions, the basics

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

• 화살표 함수(arrow function) : 함수의 축약 버전
• 인수(파라미터)가 하나인 경우 괄호도 생략 가능
• 인수가 없을 때는 괄호 생략 불가
  
  

Multiline arrow functions

let sum = (a, b) => {
  let result = a + b;
  return result
};

alert ( sum(1, 2) ); // 3

• 표현식이 여러 줄인 경우 중괄호 {}로 코드를 묶고, return 지시자로 결과값을 반환해야 함
  
  

JavaScript specials

Code structure

• 여러 개의 구문은 세미콜론을 기준으로 구분함
• 줄바꿈으로 세미콜론 자동 삽입(automatic semicolon insertion)이 동작하지만, 권장하지 않음

Strict mode

• 모던 자바스크립트에서 지원하는 모든 기능을 활성화하기 위한 모드
• 'use strict' : 스크립트나 함수 최상단에 위치해야 함

Variables

• 변수 타입 3가지
  • let
  • const : 한 번 값을 할당하면 바꿀 수 없는 상수
  • var : 과거에 주로 사용된 키워드
• 변수 이름 규칙
  • 숫자와 문자 사용, 첫 글자는 숫자 불가
  • 특수기호 $, _ 만 사용 가능
  • 비 라틴계 언어나 문자도 사용할 수는 있지만 권장하지 않음
• 기본 자료형 8가지
  • 숫자형 : 정수와 부동 소수점
  • BigInt형 : 아주 큰 숫자
  • 문자형 : 문자열
  • 불린형 : true/false
  • null : 비어있음, 존재하지 않음
  • undefined : 값이 할당되지 않은 상태
  • 객체형 : 복잡한 자료구조
  • 심볼형 : 고유한 식별자
  • cf. typeof : 값의 자료형 반환

Interaction

• 호스트 환경이 브라우저인 경우, 사용자와 상호작용 가능
  • prompt(question, [default])
    • 사용자가 입력한 값을 반환, 취소 버튼은 null
  • confirm(question)
    • 확인 true, 그 외 false
  • alert(message)

Operators

• 산술 연산자
  • 사칙연산(+,-,*,/)과 나머지 %, 거듭제곱 ** 등
• 할당 연산자
  • =, +=, -=, *=, /=
• 비트 연산자
• 조건부 연산자 (삼항 연산자)
  • cond ? resultA : resultB
• 논리 연산자
  • OR ||, AND &&
• nullish 병합 연산자 ??
• 비교 연산자
  • ==, <, >, <=, >=
• 일치 연산자 ===

Loops

• while
• do-while
• for
• cf. break, continue

The "switch" construct

• 조건에 해당하는 case문 실행
• 내부적으로 일치 연산자 === 사용하여 비교
• if-else if문으로 바꿀 수 있음

Functions

• 함수 선언문 : 주요 코드 흐름의 하나로 선언
• 함수 표현식 : 표현식 형태로 변수에 할당하여 선언
• 화살표 함수 : 축약형
• 함수는 지역 변수를 가짐, 함수 내부에서만 접근 가능
• 파라미터의 기본값 설정 가능
• 항상 반환값이 있어야 함 (return), 없으면 undefined
  
  

"JavaScript Fundamentals", by Ilya Kantor, 2007-2022, https://javascript.info/first-steps