때때로, 코드를 실행하기 위해 자동화 작업에 의존해야 합니다.교통을 통제하는 신호등을 생각해 봐라. 그것은 도시로 하여금 모든 사거리에서 교통경찰을 파견해야 하는 번거로움을 면하게 한다.아니면 믿을 수 없는 속도로 일상적인 임무를 수행하는 조립 라인.
유사하게, 조건과 순환은 우리가 효율적인 코드를 작성할 수 있도록 허락한다.흐름 제어라는 단어를 사용하는 이유는 해석기가 위에서 아래로 코드를 읽기 때문이다.한 걸음 한 걸음
네가 진술을 한 무더기 썼을 때, 예를 들면,

 let firstVar = 'dummy';
 let secondVar = 'bozo';
 let thirdVar = 'stoog';

 console.log(firstVar);
 console.log(secondVar);
 console.log(thirdVar);

해석기는 위에서 아래로 코드를 읽고 순서대로 실행합니다.만약 우리가 사용자가 우리의 응용 프로그램과 상호작용을 할 것이라는 사실을 고려할 필요가 없다면, 이것은 매우 좋을 것이다.로봇과 달리 인류는 우리가 원하는 방식대로 우리의 응용 프로그램과 상호작용을 할 수 없기 때문에 우리는 반드시 조건을 설정하여 계획을 세워야 한다.
조건문을 도로의 갈림길로 상상하다.지금까지 익숙한 조건 중 하나는if문장입니다.사용자가 응용 프로그램과 상호작용을 할 수 있도록 한 장면에서 그것을 사용해 봅시다.

하면, 만약, 만약...

가령 우리의 임무는'애완동물 열반'이라는 애완동물 주간 탁아소를 위한 제출 표를 만드는 것이다.최고경영자 래리 데이비스(Larry Davis)가 묻고 싶은 질문은 "당신은 애완동물이 얼마나 있습니까?"라는 것이다.

var answer = prompt("how many pets do you have?");
alert(answer);

Pro tip: The prompt method takes in a response from a user and returns the user's input. We can use it to test user input. Once upon a time, the alert method used to be used to test output, but console.log() took over that role.

우리는 사용자가 숫자를 입력할 것이라고 가정하지만, 만약 누군가가 긴 문자열을 입력해서 우리를 방해하려고 한다면.
만약 흐름을 제어하지 않는다면, 우리는 악성 사용자로부터 얻을 수 있을 것이다. DROP/*you got jacked!*/users이 SQL 코드는 데이터베이스에 있는 모든 사용자를 삭제할 수 있습니다.이것은 단지 하나의 예일 뿐이다.정말로, 간단한 문자열 하나만으로도 우리의 응용 프로그램을 파괴할 수 있다.
만약 우리가 모든 주인의 평균 애완동물 수를 계산하고 싶다면, 데이비스 씨는 그가 용품에 얼마를 써야 하는지 알 수 있을 것이다.
기능 걱정 마세요.다음 코드를 편집기에 복사한 다음 숫자를 입력하십시오.

var pets = 35;
var owners = 15;
var petsPerOwner = average(pets, owners);
//======Pet Info Form
var answer = prompt("how many pets do you have?");
//============
updateAvg(answer) // update based on answer, add new owner

console.log(`There are now ${petsPerOwner} pets per owner at Pet Nirvana `)

//============
//Functions are hoisted up in JavaScript.
//We'll deal with 'em later

function average(total, number){
    return total / number;
}
function updateAvg(newNum){
  pets += Number(newNum); // register new pet(s)
  owners += 1 // register new owner
  petsPerOwner = Math.ceil(average(pets, owners)); // find new average, round up
}

너는 반드시 매우 좋은 반올림 평균치를 얻어야 한다.이제 프롬프트에 무작위 문자열을 삽입해 보십시오.
'애완동물 열반 지금 주인마다 NaN 애완동물 있어요'를 받아야 돼요.

Pro tip: The specific error originates at the Number() function. The function forces a number that's type string ('3') into type number
(3). Whenever we receive user input, it'll most likely be in the form of a string. So Number() comes in handy when we're expecting a number. If an input is a normal string of words, and we try to coerce it into a number, we get NaN.

별일 아닌 것 같지만 현실 세계에서는 재앙이 될 것이다.단지 데이터를 필터할 수 없기 때문에 우리는 중요한 정보에 접근할 수 없다.
우리가 처리하고자 하는 데이터를 제어해야 한다.

하면, 만약, 만약...

고맙습니다. 우리는if/else문구가 있습니다.

var answer = prompt("how many pets do you have?");
if(isNaN(answer)){
    alert("Error: input a number");
}else{
  updateAvg(answer) // update based on answer, add new owner
  console.log(`There are now ${petsPerOwner} pets per owner at Pet Nirvana `)
}

우리는 답안이 숫자인지 확인해서 데이터 흐름을 제어할 수 있으며, 어떤ol의 응답을 받지 않습니다.우리NaN의 잘못을 기억하십니까?이것은 문자열에서 호환되지 않는 산수 연산자를 실행할 때 발생하는 오류입니다.조건이true라면if문장의 모든 코드 블록이 자동으로 실행됩니다.

Note: There's no need to write isNaN(answer) == true because the if statement can evaluate the truthiness of a value.

"hello" / 4; //> NaN

음, 데이터 형식이 숫자인지 확인하는 데 사용되는 isNaN() 내장 함수가 있습니다.데이터 형식이 숫자가 아니라면true를 되돌려줍니다.그렇지 않으면false로 돌아갑니다.
더 잘 이해하기 위해서, 우리는 방금 작성한 코드를 위조 코드로 번역합시다.

/*
If the answer is not a number
     output an error
Else(otherwise)
    update the average
*/

단락

데이터 흐름을 제어하는 또 다른 방법이 있다.우리는 OR 연산자를 단락시킬 수 있다.

 isNaN(answer) || (petsPerOwner = updateAvg(answer));
console.log(`There are now ${petsPerOwner} pets per owner at Pet Nirvana `);

OR 연산자는 첫 번째 실제 값을 찾습니다.그것이 그것을 찾았을 때, 그것은 상태를 벗어났다.따라서 답이 숫자가 아니라면 평균치를 갱신할 필요가 없다.
이곳의 문제는 answer 여전히 필요하지 않은 값을 보존하고 있어서 우리가 이 변수에 대한 처리를 제한한다는 것이다.사용자에게 어떤 피드백도 제공할 수 없다는 것을 알 수 있습니다.단락 OR 연산자는 교묘한 기교이지만, 데이터 흐름을 제어하는 가장 좋은 방법은 아니다.

하면, 만약, 만약...

만약 우리가 두 가지 이상의 가능한 상황을 검사하고 싶다면 어떻게 해야 합니까?애완동물 열반의 최고경영자가 애완동물 주인에게 경고하고 싶다면 현재 주인마다 애완동물 3마리만 수용할 수 있는데 어떻게 해야 하는가.현재 우리는 사용자가 입력한 데이터 유형을 검사해야 할 뿐만 아니라 네 마리 이상의 애완동물을 기르는 주인에게 이 제한을 일깨워야 한다.
elseif 문장은 매우 유용할 것이다.너는 자신의 의사에 따라 임의의 여러 개를 한데 연결할 수 있다.

if(/*first condition*/){

}else if(/*second condition*/){

}else if(/*third condition*/){

}

왜 우리는 인코딩을 시작하기 전에 해결 방안에 대해 위조 인코딩을 시도하지 않습니까?

/*
If the answer is not a number
     output an error
Else if the answer is greater than three     
    warn the user that they have too many pets
Else(otherwise)
    update the average
*/

우리 코드에서 시험해 봅시다.3보다 큰 숫자를 입력하면 경고를 받을 수 있습니다.

var answer = prompt("how many pets do you have?");
if(isNaN(answer)){
    alert("Error: input a number");
}else if(Number(answer) > 3){
  alert("Sorry, we currently only accept 3 pets");
}
else{
  updateAvg(answer) // update based on answer, add new owner
  console.log(`There are now ${petsPerOwner} pets per owner at Pet Nirvana `)
}

임무

읊다, 읊조리다고객과의 커뮤니케이션이 중단되었습니다.분명히 그는 주인의 애완동물 총수가 제한을 초과해도 평균치를 갱신하기를 원하지만, 이렇게 하기 전에 사용자에게 제한에 동의하는지 물어보고 싶어 한다.
이미 당신에게 위조 코드를 제공했습니다.

/*
Else if the answer is greater than three   
  Prompt the user and ask if they're ok with the limit
  If the prompt equals yes
     update the average

*/

Switch 문

if 문을 계속 사용할 때 다음 유형의 코드가 나타날 수 있습니다.

if (x == "case 1") runThis();
else if (x == "case 2") runThat();
else if (x == "case 3") runThis();
else if (x == "case 4") runThat();

이렇게 많은 상황을 처리하려면 switch 라는 제어 흐름 구조를 사용하는 것이 좋습니다.
기본 switch 문장은 초기값부터 시작하고 기본값을 선택할 수 있는case 블록을 제공합니다.
case 문장은 독자의 우호적인if 문장일 뿐이다.

let greeting = 'hello'
switch(greeting){
  case 'hello': // is the same as if(greeting === 'hello')
    //code goes here
    //break

  default: // is the same as else
}

여기에 네가 씹을 수 있도록 더욱 충실한 예가 하나 있다.

let number = 2;

switch(number) {
  case 1:
    console.log("this is one");
    break;
  case 2:
    console.log("this is two");
    break;
  case 3:
    console.log("this is three");
    break;
  default:
    console.log("I can't count past three.");
}

//can you guess what the result will be?

break 키워드가 중요합니다.무시하고 조건을 충족시키면 switch 문장은 중단되거나 케이스가 끝날 때까지 다음case 블록을 자동으로 실행합니다.
따라서 break 에서 생략 case 2: 하면 다음과 같은 결과를 얻을 수 있습니다.

"this is two"
"this is three"

switch 문장을 파이프로 간주합니다.파열 성명은 파이프의 다른 부분으로 누출되는 것을 방지하기 위해 댐으로 쓰인다.
switch 문장에 관해서 또 다른 주의해야 할 것은 사례를 나누는 능력이다.우리의 인사 예시를 확장하여 우리의 사례 체인을 보여 드리겠습니다.

switch(prompt('greet me!')){
  case 'hello':
  case 'hi':
  case 'yo':
    console.log("Hey? What's up?");
    break;
  default:
    console.log("I don't speak your lingo.");
}

회로

이제 우리는 입력한 데이터를 어떻게 제어하는지 알게 되었지만, 사용자에게 출력된 데이터는?
데이비스는 지금 그의 매니저에게 등급 평가 시스템을 추가하려고 한다.그는 스타들이 그들의 이름으로 나타나기를 바란다.
우리는 모든 항성을 수동으로 렌더링할 수 있다...

//you can see that Becky has accumulated a rounded average of four stars
var becky = {name:'Becky Star', stars: 4}

//====Profile
//Mock profile name
console.log(becky.name)
//we can render our stars four times
render() + render() + render() + render();
//====
//Dummy render function
function render(){
  return '*';
}

while 순환

또는 우리는 while 순환을 사용할 수 있다.while 순환 검사 조건이true인지 확인하고false가 될 때까지 코드 블록을 계속 실행합니다.순환이 결국 오류 값을 발생시킬 수 있는지 확인하십시오.그렇지 않으면, 너의 손에는 무한한 순환이 있을 것이다.

// you usually have to set a counter and either decrement or increment it till it satisfies the condition.
counter = 4;

while(counter != 0){
  console.log(counter);
  --counter //we decrease the counter by 1
}

당신의 창조력을 불러일으켜 보세요.while 순환을 사용하여 별 네 줄을 렌더링합니다.출력은 다음과 같습니다. '****'

Hint: the counter number and the number of stars are significant.

Hint: the plus equals operator will be useful

잠시만요.

do-while 순환은while 순환과 유사하지만 다른 점은 첫 번째 순환 시 블록을 실행할 수 있다는 것이다.
이것은 마치'이것부터 해야 한다(이것은 코드 블록이다)'는 말과 같다. 지금 내 조건이 진실일 때 그 블록의 일을 계속해야 한다.
petnumber 알림 문자에 다시 접근하고do-while 순환으로 다시 쓰십시오.

let answer;
do {
  answer = prompt("how many pets do you have?");

}while(isNaN(answer))

만약 사용자가 숫자를 입력하지 않았다면, 이 코드는 끊임없이 사용자에게 정보를 입력하라고 알릴 것이다.
정보에 대한 통제를 강화하기 위해 순환에 조건을 추가합시다.

let answer;
do {
  answer = prompt("how many pets do you have?");
  if(isNaN(answer)){
     alert("error: enter a number");
  }
}while(isNaN(answer))

현재, 우리는 피드백 순환을 만들어서 사용자에게 그들의 오류를 일깨우고, 그들이 즉시 오류를 바로잡을 수 있도록 허락한다.

for 순환

간단하게 말하자면, for 순환은 배터리를 포함하는 while 순환이다.너는 어떻게 순환 밖에 계수기를 설치한 후에 그것을 줄이거나 증가시킬 수 있는지 아니?
for 순환을 사용하면 단일 매개 변수() 내에서 모든 내용을 설정할 수 있습니다.

/* first you set the counter*/
//var x = 4;
/* then you set the condition*/
//x != 0;
/*finally, you decrement or increment
depending on your condition
*/
//--x
//Now let's install the batteries
for(var x = 4; x!= 0; --x){
  //we're ready to loop
}

이전에 수행해야 했던 렌더링 작업을 기억하십니까?이것은 for 순환을 사용하는 해결 방안입니다.

//we can see here that Becky has accumulated a rounded total of four stars
var becky = {name:'Becky Star', stars: 4}
var starRow = '';
//====Profile
//Mock profile name
console.log(becky.name)
//rendering with the for loop
for(cnt = becky.stars; cnt != 0; --cnt){
  starRow += render();
}
starRow; // > '****'

//Dummy render function
function render(){
  return '*'
}

회로를 끊다

조건이false일 때까지 순환은 계속 실행됩니다.때때로 우리는 키워드 break 로 순환을 깨고 싶을 수도 있다. 초기 단계의 스타일.

//this is a potential infinite loop
while(true){
  console.log("I'm free!");
  break; // phew
}

플러그인 for 순환이 필요한 문제가 발생할 수 있습니다.

var matrix = [[1,2,3],[4,5,6],[7,8,9]];
//prints 1,2,3,4...
for(var outer=0;outer < matrix.length; ++outer){
   for(var inner=0;inner < matrix.length; ++inner){
    console.log(matrix[outer][inner])   
   }
}

내부 for 순환에서break 문장을 작성하면 내부 순환이 중단되지만 외부 순환은 계속 실행됩니다.

var matrix = [[1,2,3],[4,5,6],[7,8,9]];
//prints 1,2,3,4...
for(var outer=0;outer < matrix.length; ++outer){
   for(var inner=0;inner < matrix.length; ++inner){
      if(matrix[outer][inner] === 2){
        break;
      }   
   }
}

만약 네가 모든 순환에서 완전히 벗어나고 싶다면, 너는 너의 순환을 표시해야 한다.for 순환 앞에 원하는 이름을 붙이고 사칭합니다.그리고 순환을 깨려고 할 때 브레이크 키워드에 탭 이름을 추가합니다.

labelName: for(){
  for(){
    break labelName;
  }  
}

이것은 우리가 수정한 삽입 순환이다.

var matrix = [[1,2,3],[4,5,6],[7,8,9]];
//the for loop can start on a newline
outer:
for(var outer=0;outer < matrix.length; ++outer){
   for(var inner=0;inner < matrix.length; ++inner){
      if(matrix[outer][inner] === 2){
        break outer;
      }   
   }
}

연속 순환

continue 명령은 순환 중인 절차를 건너뛸 수 있도록 합니다.아마도 이 지령은 skip이라고 불릴 것이다. 그러나, 아이고, 우리는 계속할 수밖에 없다.

for (let i = 0; i < 10; i++) {
// if i is even, skip the rest of the code.
  if (i % 2 == 0) continue;

  console.log(i); // 1, 3, 5, 7, 9
}

Pro tip: Curly braces are not required if the block of code can be written in one line.

총결산

우리는 if/else if/else조항을 정복하고 switch조항을 해결하고 while,do while과for loops조항을 풀었다.우리는 순환을 깨고 그것을 계속하는 방법도 배웠다.다음은 함수를 중심으로 JavaScript 프로그램이 어떻게 흐르는지 배울 것입니다.