루프의 배열, 지속, 중단

const jonas = [
  "Jonas", //0번째 요소
  "Schmedtmann", //1번째 요소
  2037 - 1991, //2번째 요소
  "teacher", //3번째 요소
  [("Michael", "Peter", "Steve")], //4번째 요소
];

이 코드를 이용해서 for루프를 이용해 이 배열을 통과시킬 수 있다. 

5가지 요소만 기록하면 된다.

 

일단 for문을 작성해보겠다. 일단 시작은 카운터부터 시작한다. 

for (let i = 0;

전통적인 counter 변수 이름은 오랫동안 i였다. 여기서도 i를 사용한다. 이번에는 0부터 시작한다. 왜? 배열은 0에 기반을 두고 있기 때문이다. 배열의 요소를 읽을 때 루프 코드를 작성하면 이해가 될것이다. 

 

for (let i = 0; ; i++)

모든 요소를 기록하고 싶기 때문에 counter 변수를 업데이트 해야한다. 1++로 말이다.  이제 루프를 작성해보겠다.

 

for (let i = 0; ; i++) {
  console.log(jonas[0]);
}

큰솔에 로그하고 싶은 건 배열의 각 요소이다. 루프 없이 이렇게 작성한다.  요소가 0번째 부터 4번째까지 있다. 그래서 counter를 0에서 시작한것이다. 그게 내가 얻고자하는 첫번째요소이기때문이다. 

 

/*
console.log(jonas[0])
console.log(jonas[1])
...
console.log(jonas[4])
*/

이제 console.log(jonas[0])을 밖으로 빼보겠다. 그리고 4번까지 쭉 가면 된다. 일단 주석처리를 해 어떤 종류의 코드를 달성하고 싶은지를 알아보겠다. 

for (let i = 0; i < 5; i++) {
  console.log(jonas[i]);
}

i일때 0부터 작동한다. 0, 1, 2, 3, 4까지 작동한다. 5가 되면 작동이 중단된다. 왜냐 jonas[5]는 존재하지 않기 때문이다. 

즉 i의 counter은 5이하로 있어야 한다.  변수가 5로 업데이트되는 순간 루프의 다음 반복은 더 이상 실행되지 않는다. 

 

for (let i = 0; i < jonas.length; i++) {
  console.log(jonas[i]);
}

jonas.length로 작성해도 위의 출력사진과 같게 나온다.

 

for (let i = 0; i < jonas.length; i++) {
  console.log(jonas[i], typeof jonas[i]);
}

typeof jonas[i]를 통문자열, 숫자열해 counter 변수를 이용해 배열의 모든 요소를 검색하고 있다.  배열은 객체이다.

 

하나의 원래 배열 값을 기반해서 새 배열을 만드는 방법

const types = [];

루프 밖에서 새 빈 배열을 만들어야 한다. 그것을 타입이라고 부르겠다. 해야할 일은 일반적인 구문으로 배열을 만드는 것이다. 그 안에 어떤 요소도 없는것이다. 이제 같은 루프로 가야한다. 이 새 배열 유형은 jonas 배열에 기반이니까 길이는 같을 것이다. 

Jonas 루프에서 데이터를 읽을 때 작성했던 것과 똑같은 반복문을 사용해 새 타입의 배열을 만들 수 있다.

for (let i = 0; i < jonas.length; i++) {
  console.log(jonas[i], typeof jonas[i]);

  type[i] = typeof jonas[i];
}

i 위치에 있는 타입과 i 위치에 있는 jonas 타입은 같아야한다. 그래야 const types = [];를 실행시킬 수 있다. 

0타입은 문자열과 같다고 작성한다. 물론 index 넘버와 동적으로 작동한다.

jonasArray에서 데이터를 읽은 것과 정확히 같은 방식으로 하고 있다. 0의 반복에서 0 타입이 jonas[0] 타입과 같다.

 

다른 방식으로 배열에 요소들을 추가하고 싶다. 그럴땐 어떻게 해야하는가?

 types.push()

저번에 공부했던 .push매서드를 작성하면 된다. push는 배열 끝에 새 요소를 추가했었다. 

  types.push(typeof jonas[i]);

이제 배열에 추가하고 싶은 요소를 전달해야한다. 배열의 시작이 아니라 끝 부분에 새 요소를 추가하는 것이 중요하다.

for (let i = 0; i < jonas.length; i++) {
  //Reading from jonas array
  console.log(jonas[i], typeof jonas[i]);

  //Filling types array
  // type[i] = typeof jonas[i];

  types.push(typeof jonas[i]);
}

counter은 0으로 시작한다. 그게 배열의 첫 번째 요소이니까. 

i < jonas.length 다음 조건은 현재 인덱스가 루프하는 배열의 길이보다 늘 낮아야 한다는거다.

jonas[i] 루프 자체에서는 항상 현재 요소를 얻는다. 현재 counter를 이용해서 0에서 까지 배열의 길이만큼 늘어날 것이다. 

---

const years = [1991, 2007, 1969, 2020];

나이를 계산할 것이다. 이것을 새 배열에 저장하고 시다. 루프를 사용하지 않고 있는 일반적인 유형의 연산이다. 

연도는 출생 연도를 포함하는 배열이다. 

const ages = [];

이제 또 다른 연도를 만들어보겠다. 일단 다시 빈 배열인데 거기에도 연도를 담을 거다. 이제 연도를 반복해서 저 위의 나이 배열을 채울것이다. 

 

for (let i = 0; i < years.length; i++) {
  2037 - years[i];
}

i++은 counter를 하나를 증가시켰다. 저 for문을 통해서 현재 연도를 계산할 수 있다. 

2037에서 현재의 연도를 뺄것이다.  2037 - years를 하고 현재 루프 위치는 몇년이라고 하겠다.

 

for (let i = 0; i < years.length; i++) {
  ages.push(2037 - years[i]);
}

2037-years[i]를 새 배열인 const ages =[ ]에 추가할 것이다.  어떻게? 푸시 매서드를 통해말이다. 

 

const jonas = [
  "Jonas",
  "Schmedtmann",
  2037 - 1991,
  "teacher",
  [("Michael", "Peter", "Steve")],
];

const types = [];

/*
console.log(jonas[0])
console.log(jonas[1])
...
console.log(jonas[4])
*/

for (let i = 0; i < jonas.length; i++) {
  //Reading from jonas array
  console.log(jonas[i], typeof jonas[i]);

  //Filling types array
  // type[i] = typeof jonas[i];

  types.push(typeof jonas[i]);
}

const years = [1991, 2007, 1969, 2020];
const ages = [];

for (let i = 0; i < years.length; i++) {
  ages.push(2037 - years[i]);
}

console.log(ages);

큰솔 창을 통해 출력하면 결과는 오른쪽과 같이 나온다. 

 

 

 

루프 각 반복에서 2037에서 각 연도(올해)를 빼고 그걸 나이에 const ages =[ ] 빈 배열의 첫번째 위치에 추가한 것이다. 그래서 결과값이 오른쪽 위 사진 처럼 나온것이다. 

---

계속(continue)와 중단(break)

Countinue는 루프의 현재 반복을 끝내고 다음 루프로 가는 것

 Break는 루프 전체를 완전히 끝내는데 사용된다.

//Continue and Break;
for (let i = 0; i < jonas.length; i++) {
  console.log(jonas[i], typeof jonas[i]);
}

어떤 이유로든 구성 요소만으로 문자열 배열에 프린트하길 원한다고 가정해보겠다. 

 

위의 코드에서 continue는 완벽하다. continue를 통해 루프의 현재 반복을 끝낼 수 있으니까 말이다.

//Continue and Break;
for (let i = 0; i < jonas.length; i++) {
  if (typeof jonas[i] !== "string") continue;
  console.log(jonas[i], typeof jonas[i]);
}

이걸 통해 내가 할 수 있는건 jonas[i]의 현재 요소 형식이 문자열이 아니라면 계속하는 거다라고 하는 것이다. 이걸 통해 continue를 작성하는 방법이다. 계속 이어지는 키워드이다. 

저 코드를 보면 문자열만 로그한다는 의미이다. 또 다른 말로는 다른 건 다 건너뛴다는 뜻이다.

즉 루프의 현재 반복이 종료되면 다음 루프는 즉시 시작되는 것이다. 

//Continue and Break;
console.log("---Only Strings---");
for (let i = 0; i < jonas.length; i++) {
  if (typeof jonas[i] !== "string") continue;
  
  console.log(jonas[i], typeof jonas[i]);
}

 실행을 하면 오른쪽과 같이 나온다. 

console.log(jonas[i], typeof jonas[i]); ← 이 줄은 실행되지 않을 것이다. 왜냐하면 위의 줄에서 이미 실행되었기 때문

 

Break

전체 루프를 완전히 종료한다. 현재 반복만이 아니다. 

이제 할 일은 숫자를 찾은 후 다른 요소를 기록하지 않는것이다. 그러니까 46 숫자가 발견된 후에 다른 건 인쇄되지 않는다. (숫자가 발견되는 즉시 BREAK!)

console.log("---Break With Number---");
for (let i = 0; i < jonas.length; i++) {
  if (typeof jonas[i] === "number") break;

  console.log(jonas[i], typeof jonas[i]);
}

 그래서 숫자가 발견되는 이 반복에서 이 줄의 코드도 더 이상 프린트되지 않고 루프는 완전히 종료되었다.