문은 자바스크립트의 문장이나 명령어라고 할 수 있다.

주요 키워드

  • 조건문
  • 루프
  • 점프


5.1 표현문

할당이나 함수호출처럼 부수 효과가 있는 표현식은 그 자체로 문이 될 수 있다.


  • 할당문
    - 표현문의 주요 카테고리 중 하나이다.
greeting = "Hello" + name;
i *= 3;
  • 증감연삼자(++, --)
    - 변수의 값을 바꾸는 부수 효과가 있다.
counter++;
  • delete
    - delete 연산자에는 객체 프로퍼티를 삭제하는 중요한 부수 효과가 있다.
    - 거의 하나의 문으로 사용된다.
delete o.x;
  • 함수 호출
    - 표현식이지만 프로그램의 상태나 호스트 환경에 영향을 미치는 부수적 효과가 있다.
    - 함수에 부수 효과가 없다면 그 자체로는 호출에 의미가 없다. (더 큰 표현식이나 할당문의 일부 제외)
console.log(debugMessage);
displaySpinner();			// 웹 앱에서 스피너를 표시하는 가상의 함수

❗모두 세미콜론으로 종료 했다❗


5.2 복합문과 빈 문

  • 문 블록
    - 문 여러 개를 묶어서 복합문으로 만든다.

🔔규칙

  1. 블록은 세미콜론으로 끝나지 않는다.
    - 블록 안에 있는 기본문은 세미콜론으로 끝난다.
  2. 블록에 들어 있는 행은 자신을 감싼 중괄호를 기준으로 들여쓴다.
    - 필수는 아니지만, 이해하기 쉽다.
{
  x = Math.PI;
  cx = Math.cos(x);
  console.log("con(π) = " + cx);
}

- 문 블록을 사용하면 허용되는 하위 문 하나에 문 여러 개를 넣을 수 있다.
- 복합문은 자바스크립트가 문 하나를 예상하는 곳에 문 여러 개를 넣을 때 사용한다.

  • 빈 문
    - 문이 있을 것으로 예상되는 곳에 문을 쓰지 않는다.
    - 자바스크립트 인터프리터는 빈 문을 실행할 때 아무 일도 하지 않는다.
    - 빈 바디를 갖는 루프를 만들고자 할 때 유용하다.
// 배열 a를 초기화합니다.
for(let i = 0; i < a.length; a[i++] = 0;

- 의도적으로 비운 것이라면 세미콜론(;)을 붙이지 말고, 주석을 달자.

// 개발자의 의도와 다르게 실행된 예제
if ((a === 0) || (b === 0));	// 아무 일도 하지 않는 행
	o = null;					// 조건과 상관없이 항상 실행되는 행
// 개발자의 의도대로 실행된 예제
for(let i = 0; i < a.length; a[i++] = 0; /* 의도적으로 비움. */


5.3 조건문

분기점(branch)에 따라 인터프리터가 문을 실행하기도 하고, 실행하지 않기도 한다.

5.3.1 if

- 자바스크립트가 조건에 따라 문을 실행할 수 있게 하는 기본적인 제어문


1. 표현식(expression) 평가 : 결과값이 true일 때

if (expression)
  statement
  • 문 블록을 써서 여러 문을 하나로 모을 수 있다.
if (!address) {
  address = "";
  message = "Please specify a mailing address.";
}

2. else 절 : 결과값이 false일 때
if (expression)
  statement1
else
  statement2
  • else절과 함께 if 문을 중첨해 쓸 때는 else 절이 적절한 if 문과 연결되도록 주의해야 한다.
if (i === j) {
  if (j === k) {
    console.og("i equals k");
  }
} else { //중괄호의 위치로 결과가 달라진다.
  	console.log("i doesnt't equal j");
}

5.3.2 else if

- 선택지가 여러개일 때 사용되는 관용적 표현(자바스크립트 문은 아님.)

if ( n === 1){
    // 코드 블록 #1을 실행합니다.
} else if (n === 2) {
	// 코드 블록 #2을 실행합니다.
} else if (n === 3) {
	// 코드 블록 #3을 실행합니다.
} else { 
	// 전부 실패하면 블록 #4을 실행합니다.
}

5.3.3 switch

- 모든 분기점이 같은 같은 표현식의 값에 사용될 때 유용하다.
- switch 문이 실행되면 먼저 expression의 값을 계산 후, case 라벨의 표현식과 같은 것을 순차적으로 찾아낸다.

switch(n) {
  case 1:
    // 코드 블록 #1을 실행합니다.
    break;	// 다음 case로 넘어가지 않음.
  case 2:
	// 코드 블록 #2을 실행합니다.
    break;
  case 3:
	// 코드 블록 #3을 실행합니다.
    break;
  default: // default 라벨이 없으면 case 문은 종료된다.
	// 코드 블록 #4을 실행합니다.
    break;
}

🔔switch 문 평가 방법

  1. switch 키워드 다음에 있는 표현식을 먼저 평가하고, 일치하는 값을 찾을 때까지 case 표현식을 순서대로 평가한다.
  2. 연산자 === 사용, 타입 변환을 거치지 않고 일치해야 한다.
  3. case 표현식 전체가 평가되는 것은 아니므로, case 표현식에는 함수 호출이나 할당처럼 부수 효과가 있는 것은 피해야 한다.


5.4 반복문

  • 경로를 자기 자신 쪽으로 구부린 코드 일부를 반복하는 문이며 루프라고 하기도 한다.
  • 루프는 모두 배열 요소를 순회할 때 쓸 수 있다.

5.4.1 while

- 자바스크립의 기본 루프

while (expression)
  ststement

🔔while 문 평가 방법

  1. while 문을 실행하면 먼저 expression을 평가한다.
  2. false 값이라면 루프 바디를 건너뛴다.
  3. true 값이라면 statement를 실행하고, 루프 맨 위로 올라가 expression 평가를 반복한다.

5.4.2 do/while

- 루프 맨 위가 아니라 맨 아래에서 평가된다.

do
  statement
while (expression);

✅do/while과 while 차이

  1. do/while 문은 루프 시작을 알리는 do와 루프 끝을 알리는 while 키워드가 모두 있어야 한다.
  2. do/while 문은 항상 세미콜론(;)으로 끝나야 한다.
    (while 루프는 루프 바디를 중괄호로 감싼 경우에는 세미콜론이 필요하지 않는다.)

5.4.3 for

- 루프를 단순화 한다.
- 초기화, 테스트, 업데이트를 표현식 하나로 묶고, 이들을 루프 문법에 명시적으로 표현한다.

//for 문은 while 문으로 변경할 수 있다.
for(initialize; test; increment)
  statement
  
// 같은 실행을 하는 while 문
initialize;
while(test) {
  staement
  increment;
}

- initialize, test, increment은 생략 가능하지만, 세미콜론(;)은 필수이다.

// for 문 무한루프
for(;;)
  
// while 문 무한루프
while(true)

⭐5.4.4 for/of

- ES6에서 정의한 새 반복문.
- 이터러블(iterable) 객체에서 동작한다. (배열, 문자열, 세트, 은 이터러블)

  • for 키워드 + 루프가 하는 일을 괄호로 묶어서 표현
  • of 키워드 + 이터러블 객체로 평가되는 표현식
// for/of를 써서 숫자 배열을 순회하며 합을 구하는 예제

let data = [1, 2, 3, 4, 5, 6, 7, 8, 9], sum = 0;
for(let element of data) {
  sum += element;
}
sum		// => 45

- 배열은 동적으로 순회한다.

  • 반복 중간에 배열 자체에 변화가 발생한다면 반복 결과가 바뀌기도 한다.

for/of와 객체

- 일반 객체(객체는 기본적으로 이터러블이 아님)에 for/of를 사용하려 하면 런타임에 TypeError가 일어난다.

let o ={ x: 1, y:2, z: 3};
let keys = "";
for(let k of Object.keys(o)) {
  keys += k;
}
keys	// => "xyz"
  • Object.key()
    - 객체의 프로퍼티 이름으로 이루어진 배열을 반환하며 배열은 for/of를 사용할 수 있는 이터러블
let sum = 0;
for(let v of Object.values(o)) {
  sum += v;
}
sum		// => 6
  • Object.entries()
    - 객체 프로퍼티의 키와 값이 모두 필요하다면 Object.entries()와 분해 할당을 통해 for/of를 사용할 수 있다.
    • 배열의 배열을 반환한다.
let paris = "";
for (let [k, v] of Object.entries(o)) {
  paris += k + v;
}
paris		// => "x1y2z3"


5.4.5 for/in

profile
프론트 공부 중입니다:)

0개의 댓글