EP2. 프로그램 구조

표현식과 구문

값을 생성하는 코드 조각을 표현식이라고 부른다.
문자 그대로 작성한 모든 값은 표현식이다.

표현식이 문장 조각이라면 자바스크립트 구문(statement)은 전체 문장에 해당한다. 하나의 프로그램은 명령문의 목록이다. 가장 단순한 구문은 표현식과 세미콜론으로 이루어진다.

프로그램을 변경한다고 판단되면 화면에 무언가를 표시하거나, 또는 해당 구문 이후에 나오는 구문에 영향을 미치는 방식으로 머신의 내부 상태를 변경한다.
이러한 변경을 부수 효과(side effect)라고 한다.

바인딩

자바스크립트에서는 값을 잡아 두기 위해 바인딩(binding) 또는 변수(variable)라는 것을 제공한다.

let MyVariable = 5 * 5

let은 이 구문이 바인딩을 정의한다는 것을 의미한다.
그다음으로 바인딩 이름(변수명)이 오고 이름에 값을 즉시 바로 할당하려면 '=' 연산자와 표현식을 사용한다.

바인딩이 값을 가리키는 경우 해당 바인딩과 가리키는 값이 영원히 묶여 있음을 의미하지는 않는다.
'=' 연산자를 사용해 언제든지 기존 바인딩과 현재 값의 연결을 끊고 새 값을 가리키도록 할 수 있다.

바인딩을 상자(box)보다는 연체동물의 촉수처럼 생각해야 한다. 바인딩은 여러 가지 값을 담지는 않지만 그러한 값들을 움켜쥐고 있다.
값을 할당하지 않고 바인딩을 정의하면 촉수는 잡을 수 있는 것이 없기 때문에 결국 아무것도 가리키지 않는다.
이렇게 비어있는 바인딩의 값을 요청하면 undefiend를 돌려 받는다.

바인딩 이름

바인딩 이름은 모든 단어를 사용할 수 있다. 하지만 숫자로 시작하는 이름은 사용할 수 없다. $와 _는 사용할 수 있지만 다른 문장 부호나 특수문자는 사용할 수 없다.

let과 같이 특별한 의미를 갖는 단어는 키워드(keyword)라고 하며, 바인딩 이름으로 사용할 수 없다. 또한 향후 버전에서 사용하기 위해 예약된 바인딩 이름으로 사용할 수 없는 단어가 다수 존재한다.

break, case, catch, class, const, continue, yield, true, try 등등...

환경

주어진 특정 시간에 존재하는 바인딩과 해당 바인딩의 값을 환경(environment)이라고 한다.
프로그램이 시작되면 이 환경은 비어 있지 않다.

이 환경에서 언어 표준의 일부인 바인딩이 언제나 포함되며 대부분의 경우 주변 시스템과 상호작용할 수 있는 방법을 제공하는 바인딩도 포함된다.

함수

기본 환경에서 제공되는 많은 값은 함수(function)라는 유형이다. 함수는 값으로 둘러싸인 프로그램이다. 따라서 이 프로그램을 동작시키려면 값을 사용할 수 있다.

함수를 실행하는 것을 "함수를 불러온다(invoke)" 또는 "호출한다(call)" 또는 "적용한다(apply)"라고 말한다.

함수에 전달된 값을 인수(argument, 또는 전달 인자)라고 한다. 그리고 이 인수를 받는 변수를 매개변수(parameter)라고 한다.

반환 값

대화 상자를 표시하거나 화면에 텍스트를 출력하는 것은 부수 효과(side effect)이다. 자바스크립트에서 값을 생성하는 것은 모두 표현식이다. 따라서 보다 큰 표현식 내부에서 함수 호출을 사용할 수 있다.

제어 흐름

프로그램에 둘 이상의 구문이 포함돼 있는 경우 구문은 하나의 이야기처럼 위에서 아래로 실행된다.

조건부 실행

모든 프로그램이 위에서 아래로 직선적으로 실행되는 것은 아니다. 상황에 따라 적절하게 분기하는 분기 도로가 필요할 수 있다. 이를 조건부 실행이라고 한다.
조건부 실행은 자바스크립트에서 if 키워드를 사용해서 작성한다.

while과 do 반복문

코드 조각을 여러 번 실행하는 형태의 제어 흐름을 반복문(loop)이라고 한다.
제어 흐름의 반복을 통해 이전에 있었던 프로그램의 특정 지점으로 돌아가서 현재 프로그램 상태까지 반복할 수 있다.

// while 반복문
// 조건이 참(true)이 될 때까지 반복문을 계속 실행한다.
let number = 0;

while (number <= 12) {
  console.log(number);
  number = number + 2
}

// do ~ while 반복문
// do 안의 코드 조각을 무조건 최초 한 번 이상 실행하여, 반복문의 중지 여부를 확인 한다.
let yourName;

do {
  yourName = prompt("Who are you?");
} while (!yourName) {
  console.log(yourName)
}

코드 들여 쓰기

코드량이 많고 긴 구문들 중 특정 구문의 앞쪽에 공백이 있는 경우가 있다.
컴퓨터는 이러한 공백을 사용하지 않아도 프로그램을 정상적으로 인식하기 때문에 이러한 공백은 필요치 않다.
이는 개발자(인간)의 가독성을 위한 내용이다.

for 반복문

반복문은 대부분 while 예제에서 보였던 패턴을 따른다. 반복문의 진행 상황을 추적하기 위한 바인딩을 만들고, 최종 값에 도달했는지 여부를 확인하는 표현식을 사용하고, 반복해서 실행하는 구문인 이 패턴은 가장 일반적인 패턴이라 이러한 패턴은 좀 더 짧고 포괄적인 형식의 for 반복문을 제공한다.

for (let number = 0; number <= 12; number = number+2) {
  console.log(number)
}

// 0
// 2
// ...
// 14

반복문 나가기

반복 조건을 false로 설정하는 것이 반복문을 완료할 수 있는 유일한 방법은 아니다.
반복문 안에서 밖으로 즉시 나가는 결과를 만드는 break라는 특수한 구문이 있다.

for (let current = 20; current = current +1) {
  if (current % 7 == 0) {
    console.log(current)
    break;
  }
}

// 21

break문과 역할은 다르지만 continue문도 반복문 진행에 영향을 미친다.
반복문의 본문 내에서 continue를 만나게 되면 반복문의 본문 밖으로 제어가 넘어가고 반복문의 다음 반복을 계속해서 진행하게 된다.

switch를 통한 값 분기

switch (prompt('What is the weather like?')) {
  case "rainy":
    console.log('Remember to bring an umbrellar');
    break;
  case "sunny":
    console.log('Dress lightly');
    break;
  case "cloudy":
    console.log('Go outside.');
    break;
  default:
    console.log('Unknown weather type!');
    break;
}

---

요약

프로그램은 구문으로 만들어지고 때로는 이 구문에 더 많은 구문이 포함될 수 있다는 것을 알게 됐다.
구문에는 표현식이 포함되며, 표현식은 보다 간결한 표현식으로 만들 수 있다.

구문을 하나씩 작성하면 위에서 아래로 실행되는 프로그램이 만들어진다.
조건문과 반복문을 사용하면 제어 흐름을 바꿀 수 있다.

함수는 작은 프로그램을 캡슐화한 특별한 값이다. 이러한 함수 호출은 일종의 표현식이며 값이 만들어질 수도 있다.