[JS Statement(문)] 제어문(control statement)

Chanki Hong·2022년 11월 10일
0

JavaScript

목록 보기
3/30
post-thumbnail

제어문(control statement)

  • 변경과 선택에 관한 문.
  • 제어문을 순서도로 표현해 시각적으로 나타내는 방법 존재.
  • 조건문반복문 존재.

조건문(conditionals statement)

  • 변화하는 조건에 대응. (갈림길과 같음)

if

  • 조건이 true 일때 실행.
const a = 1;
if (a + 1 === 2) {
  console.log('a + 1 이 2 입니다.');
}
// (a + 1 === 2) 조건이 true일때, console.log('a + 1 이 2 입니다.') 실행.
  • if 문 처럼 다른 블럭에서 변수나 상수의 재선언 가능.
const a = 1;
if (a + 1 === 2) {
  const a = 3;
  console.log('if문 안의 a 값은 ' + a); // 'if문 안의 a 값은 3' 출력
}
console.log('if문 밖의 a 값은 ' + a); // 'if문 안의 a 값은 1' 출력
// 블럭에서 재선언을 하게 되면 블럭 밖의 변수나 상수에 영향이 없어짐.
  • else 문을 사용하면 조건이 false일 때 실행.
const a = 10;
if (a > 15) {
  console.log('a가 15보다 큽니다.');
} else {
  console.log('a가 15보다 크지 않습니다.');
}
// 조건이 false여서 else문이 실행.
  • else if 문을 사용하면 다수의 조건 가능. (다중 중첩 가능)
    • 사실 특별한 문법이 아니고 단순히 else 절에 if 문을 포함.
    • 때문에 블록문과 블록 아닌 문을 유일하게 섞어 씀. (예외)
const a = 12;
if (a === 5) {
  console.log('5 입니다.');
} else if (a === 10) {
  console.log('10 입니다.');
} else {
  console.log('5도 아니고 10도 아닙니다.');
} // else문 실행.

switch case

  • 다중 중첩 조건문에서 이용 가능.
  • 참/거짓 보다 다양하게 나뉘는 조건 이용.
  • 조건이 끝날 때 마다 break 필수 입력. (찾기 어려운 버그 가능성 높음)
  • 다만 함수안에서는 return 문이 있기 때문에 대신 쓸 수 있음.
  • default 는 필수는 아님.
const device = 'iphone';
switch (device) {
  case 'iphone':
    console.log('아이폰!');
    break;
  case 'ipad':
    console.log('아이패드!');
    break;
  case 'galaxy note':
    console.log('갤럭시노트!');
    break;
  default: // 조건에 충족하는 것이 없을 때. else와 비슷.
    console.log('혹시,,,샤오미?');
    break;
// default 뒤에는 case가 없으므로 break가 필수는 아님. 하지만 찾기 어려운 버그를 예방하기 위해 권장함.
}
  • 동적 디스패치(dynamic dispatch)에 대해 알고나면 많이 쓰지 않음.

반복문(loop)

  • 특정 작업을 반복해서 할때 사용하는 문.
  • 특정 조건이 만족하는 동안 반복되는 문.

for

  • 주로 숫자를 조건에서 비교.
for (let i = 0; i < 5; i++) {
  console.log(i);
} // 0 1 2 3 4
  • 배열과 같은 곳에서 응용 가능.
const names = ['멍멍이', '냐옹이', '랙래운'];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}// 멍멍이 냐옹이 랙래운
  • 조건을 생략하면 항상 true 로 평가되어 루프를 못빠져나감.
  • 조건부에 쉼표 연산자를 이용해 여려 문을 결합할 수 있음.
for (let temp, i = 0, j = 1; j < 30; temp = i, i = j, j = i + temp)
  console.log(j); // 피보나치 수열 처음 숫자 8개 출력.
  • 또한 제어부에서 수를 이용한 제어말고 다른 표현식 이용 가능.
// 문자형 이용.
let s = '7';
for (; s.length < 10; s = 'ww' + s) console.log(s);
/*
7
ww7
wwww7
wwwwww7
wwwwwwww7
*/

// 정수가 아닌 제어변수.
for (let x = 0.2; x < 3.0; x += 0.2) console.log(x);

while

  • 주로 숫자가 아닌 다른 조건을 비교하는데 많이 사용.
  • for 와 다르게 숫자의 선언은 블록 밖, 숫자의 증가는 while문 바디문 안에서 선언.
let i = 0;
let isFun = false;

while (!isFun) {
  console.log(i);
  i++;
  if (i === 2) {
    isFun = true;
  }
} // 0 1

for ...of

  • 배열, 이터러블 객체에 모두 이용하는 범용적인 루프.
const numbers = [10, 20, 30];

for (let number of numbers) {
  console.log(number);
} // 10 20 30
  • 같은 기능의 배열 내장 함수를 이용하는게 더 간편함.

for ...in

  • 객체의 프로퍼티에 루프를 실행.
const doggy = {
  name: '멍멍이',
  sound: '멍멍',
  age: 2,
};

for (let key in doggy) {
  console.log(`${key}: ${doggy[key]}`);
} // name: 멍멍이 sound: 멍멍 age: 2
  • 유사한 기능의 객체 내장 함수를 이용하는게 더 간편함.
    Object.entries, Object.keys,Object.values
const doggy = {
  name: '멍멍이',
  sound: '멍멍',
  age: 2,
};

console.log(Object.entries(doggy)); // [ [ 'name', '멍멍이' ], [ 'sound', '멍멍' ], [ 'age', 2 ] ]
console.log(Object.keys(doggy)); // [ 'name', 'sound', 'age' ]
console.log(Object.values(doggy)); // [ '멍멍이', '멍멍', 2 ]

제어문의 공백

  • 제어문을 쓸때 오해를 일으키는 공백 유의.
  • JS에서는 줄바꿈 문자와 스페이스를 신경 쓰지 않음. (return은 예외; 공백만 사용)
  • 스페이스 10개나 빈 줄 10개, 스페이스 1개나 스페이스 10개나 마찬가지임.
  • 특히 제어문의 바디를 블록문에 넣지 않는 경우 오해 소지가 생김.
  • 제어문 바디는 항상(하나의 문이라도) 블록 안에 써서 일관성과 명료함을 유지하고자 하는 사람도 있음. (if, else 같은 곳에서 일관된 표현 유지)
// 두 문 사이의 연관성이 없어보임.
while(funds > 1 && funds < 100)
  
funds = funds + 2;

// 줄바꿈 없이 표현. (문이 하나일 때 선호함.)
while(funds > 1 && funds < 100) funds = funds + 2;

// 줄바꿈 없이, 바디문을 블록문에 표현.
while(funds > 1 && funds < 100) {funds = funds + 2;}
  • 부주의한 들여쓰기의 혼란. (들여쓰기는 의미가 항상 명확히 드러나게 사용해야)
while(funds > 1 && funds < 100)
  funds = funds + 2; // 제어문의 바디는 여기서 종료.
  funds = funds - 1; // 부주의한 들여쓰기로 바디문으로 오해 초래; 제어문 종료 이후 실행.

0개의 댓글