1006 TIL

오늘도 힘내서 화이팅! 할 수 있다! ✏️
참조: 제로초 ES2021 자바스크립트 강좌 유튜브

중첩된 반복문 사용하기

반복문 안에 반복문이 들어 있는 경우인데, 이를 '반복문이 중첩됐다'라고 표현합니다. 정말 심할 경우 4번까지도 중첩되어있는 경우가 있습니다.

for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; J++) {
    console.log(i, j);
  }
}
//실행결과: 
i==0 j==0 console.log(0,0);
i==0 j==1 console.log(0,1);
i==0 j==2 console.log(0,2);
.
.
i==0 j==9 console.log(0,9);
i==0 j==10 조건X
i==1 j==0 console.log(1,0);
i==1 j==9 console.log(1,9);
.
.
i==9 j==9 console.log(9,9);

밖에 반복문이 시작하고 안에 반복문이 전부다 반복이 된다. 그 다음엔 다시 밖에 반복문이 한번 실행된다. 결국엔 나중에 9,9 가 나온다. 10, 10은 조건이 성립되지 않는다.

3번 중첩되는 반복문

for (let i = 0; i < 5; i++) {
  if (i % 2 === 0) continue;
  for (let j = 0; j < 5; j++) {
    if (j % 2 === 0) continue;
    for (let k = 0; k < 5; k++) {
      if (k % 2 === 0) continue;
      console.log(i, j, k);
    }
  }
}

실행결과-
i , j, k 가 짝수 일 때 건너 뛰는 식입니다. 그리고 5보다 작아야합니다.
그러니까 0,2,4를 뺀 1,3으로 식이 이루어지는 겁니다. 맨 처음 i, j, k가 0으로 시작 하는데 0은 짝수기때문에 continue가 됩니다. continue가 되는 순간 아래 for문들은 실행이 안됩니다. 그래서 바로 i==1이 됩니다.

// i==0 continue
// i==1 j==0 continue
// i==1 j==1 k==0 continue
// i==1 j==1 k==1 console.log(1, 1, 1)
// i==1 j==1 k==2 continue
// i==1 j==1 k==3 console.log(1, 1, 3)
// i==1 j==1 k==4 continue
// i==1 j==1 k==5 조건X
// i==1 j==2 continue
// i==1 j==3 k==0 continue
// i==1 j==3 k==1 console.log(1, 3, 1)

실무에서는 대부분 이중 반복문이나 삼중 반복문 정도만 사용하기 때문에 지나치게 많이 중첩된 반복문은 사용할 일이 거의 없습니다.

문제
구구단을 출력하되, 결과에 짝수가 하나도 나오지 않게 해보세요. continue문을 사용하세요.

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue;
  for (let j = 0; j < 10; j++) {
    if (j % 2 === 0) continue;
    console.log(i +'*'+ j +'='+ i * j)
  }
}

별찍기

for (let i = 0; i < 5; i++) {
  console.log('*'.repeat(i + 1))
}
*
**
***
****
*****

for (let i = 5; i >= 1; i--) {
  console.log('*'.repeat(i))
}
*****
****
***
**
*

이 식을 이렇게 표현할 수도 있습니다.

for (let i = 0; i < 5; i++) {
  console.log('*'.repeat(5 - i))
}
*****
****
***
**
*

for (let i = 0; i < 10; i += 2){
  console.log('*'.repeat(i + 1))
}
*
***
*****
*******
*********

1,3,5,7,9로 별찍기

for (let i = 10; i > 0; i -= 2){
  console.log('*'.repeat(i - 1))
}
*********
*******
*****
***
*

거꾸로 1,3,5,7,9 별찍기

for(let i = 1; i <= 5; i++){
  console.log(' '.repeat(5 - i) + '*'.repeat(i))
}
// 4, 1
// 3, 2
// 2, 3
// 1, 4
// 0, 5
     *
    **
   ***
  ****
 *****

i = 1이니까 ' ' 빈공간이 5-1로 되어 빈공간이 4개가 찍히고 *이 1개가 찍히는 것. 이 뒤에는 이게 계속 반복된다. 왜 마지막이 0이 되는지는 한번 물어보기

for(let i=5 ; i>=1 ; i--){
    console.log(' '.repeat(5-i) + '*'.repeat(i))  //5,4,3,2,1 공백 같이 찍기
}
 *****
  ****
   ***
    **
     *

트리 별찍기

for (let i = 0; i < 10; i++){

    if(i % 2 === 0) continue;

    console.log(' '.repeat((10-i)/2) + '*'.repeat(i) + ' '.repeat((10-i)/2));

}
     *    
    ***   
   *****  
  ******* 
 *********

• 내일 회의 때 물어보기

마름모꼴 별찍기

for ( let i = 0; i < 5; i++) {
if ( i < 3) {
console.log(' '.repeat(2-i),'*'.repeat(2*i + 1),' '.repeat(2-i))
} else {
console.log(' '.repeat(i-2),'*'.repeat(9 - 2*i),' '.repeat(i-2))
}
}

    *   
   ***  
  ***** 
   ***  
    *   

객체

이번에는 객체를 알아보겠습니다. 객체(object)는 자료형의 일종으로 다양한 값을 모아둔 또 다른 값입니다. 객체의 종류는 크게 배열(array), 함수(function), 배열이나 함수가 아닌 객체로 나눌 수 있습니다.

배열

다양한 값을 나열하는 경우를 생각해봅시다. 과일을 나열한다고 하면 다음과 같이 변수를 선언합니다.

const apple ='사과';
const orange = '오렌지';
const pear = '배';
const strawberry = '딸기';

과일 종류가 많기 때문에 모든 과일에 변수 이름을 붙이는 건 비효율적인 일입니다. 이 같은 경우 배열을 사용해 값들을 하나로 묶을 수 있습니다.

const fruits = ['사과', '오렌지', '배', '딸기'];

네 개의 과일을 fruits라는 상수로 묶었습니다. 배열을 만들려면 대괄호[ ]로 값들을 감싸주면 됩니다. 값은 쉼표로 구분합니다.
배열 내부의 값을 개별적으로 불러올 수도 있습니다. 배열 이름 뒤에 불러오고 싶은 값의 자릿수를 적어주면 됩니다.

const fruits = ['사과', '오렌지', '배', '딸기'];
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[3]);
//실행결과
사과
오렌지
배
딸기

자릿 수는 0부터 시작합니다. 일반적으로 숫자는 1부터 세지만, 프로그래밍에서는 0부터 세는 경우가 많습니다. 프로그래밍에서는 자릿수를 인덱스(index) 라고 합니다.
현재 배열 안에 있는 값은 모두 문자열이지만, 값의 자료형이 모두 같아야 할 필요는 없습니다. 배열 안에 다른 배열이나 변수를 넣을 수도 있습니다.

const arrayOfArray = [[1,2,3], [4,5]];
arrayOfArray[0]; // [1,2,3]
const a = 10;
const b = 20;
const variableArray = [a, b, 30];
variableArray[1]; // 20 (b의 값)

arrayOfArray배열에 주목합시다. 배열 내부에 배열이 들어 있습니다. arrayOfArray[0]을 하면 [1,2,3]값이 나오는데 이 또한 배열입니다. 이러한 배열을 이차원 배열 이라고 합니다.

배열의 내부의 값은 중복되어도 되고, 아무 값이 없는 배열도 만들 수 있습니다.

const everything = ['사과', 1, undefined, true, '배열', null];
const duplicated = ['가','가','가','가','가'];
const empty = [];

배열 내부에 든 값을 요소(element)라고 합니다. everything 배열에는 6개의 요소가 들어 있고, empty 배열에는 0개의 요소가 있습니다. 프로그래밍으로 요소의 개수를 구할 수도 있습니다.

배열의 요소 개수 구하기

앞에서 만든 everything 배열의 요소 개수를 구해봅시다. 배열 이름 뒤에 .length 를 붙이면 됩니다.

const everything = ['사과', 1, undefined, true, '배열', null];
console.log(everything.length);
//실행결과
6

빈 값도 유효한 값이기 때문에 요소 개수를 셀 때 포합합니다.

const emptyValue = [null, undefined, false, '', NaN];
console.log(emptyValue.length);
//실행결과
5

배열의 요소 개수가 항상 마지막 인덱스보다 1 큽니다.
emptyvalue 배열에서 NaN의 인덱스는 4이고, 요소의 개수는 5입니다.
everything배열에서 null의 인덱스는 5이고, 요소의 개수는 6입니다.
즉, 배열의 요소 개수에서 1을 빼면 마지막 요소의 인덱스가 됩니다. 이를 활용하여 마지막 요소의 값을 찾을 수 있습니다.

const findLastElement = ['a', 'b', 'c', 'd', 'e'];
console.log(findLastElement[findLastElement.length-1]);
//실행결과
e

문제
arr라는 배열이 있을 때 배열의 마지막에서 세 번째 요소를 찾아보세요

const arr = [1,2,3,4,5]
console.log(arr[arr.length-3]);
//실행결과
3

배열을 만든 후, 중간에 배열을 수정할 수 있습니다. 배열에 요소를 추가할 수도 있고, 특정 인덱스의 요소를 수정할 수도 있으며 제거할 수도 있습니다.
먼저 배열에 요소를 추가해 보겠습니다.

const target = ['a', 'b', 'c', 'd', 'e'];
target[5] = 'f';
console.log(target);
(6) ['a', 'b', 'c', 'd', 'e', 'f']

원하는 배열의 인덱스 값을 대입하면 됩니다. 이 방법은 배열의 갯수가 얼마되지 않을 때 쓸 수 있는 방법입니다.

처음으로 배열을 console.log 해보았는데요. 배열의 요소가 나열되고 그 앞에 (6) 이라는 숫자가 보입니다. 이 숫자는 배열의 요소 개수 (배열.length)를 의미합니다.

target 배열의 요소 중 e 의 인덱스가 4 이므로 target[5]에 f를 대입하면 e보다 뒤에 f가 위치합니다. 배열의 마지막 요소 인덱스가 배열.length-1이므로 다음 요소를 추가하려면 배열.length에 값을 넣으면 됩니다. (하지만 이 방법보다 push 를 더 많이 씁니다.)

const target = ['가','나','다','라','마'];
target[target.length] = '바';
console.log(target);
(6) ['가', '나', '다', '라', '마', '바']

이 방법을 쓰면 길이가 어떻든간에 마지막에 추가할 수 있습니다.

배열 제일 앞에 값을 추가하고 싶다면? unshift라는 기능을 실행하면 됩니다.

const target = ['나','다','라','마','바'];
target.unshift('가');
console.log(target);
(6) ['가', '나', '다', '라', '마', '바']

배열 맨 끝에 추가하고 싶다면? push라는 기능을 실행하면 됩니다.

const target = ['가','나','다','라','마'];
target.push('바');
console.log(target);
(6) ['가', '나', '다', '라', '마', '바']

const인데 수정이 가능한 이유
const에는 새로운 값을 대입(=)하지는 못한다고 기억하면 됩니다.

const target2 = ['a', 'b', 'c', 'd', 'e'];
target2 = ['f','g']; //불가능
target2[0] = 'h'; //가능

위 코드 처럼 객체 자체에 =을 써서 내용을 바꾸려는건 안됩니다.
대신 객체의 내부의 값에는 =을 쓸 수 있다.

배열의 요소 수정하기

배열의 중간 요소를 수정하기 위해선 이렇게 하면 됩니다.

const target = ['가','나','다','라','마'];
target[3] ='카';
console.log(target);
(5) ['가', '나', '다', '카', '마']

배열에서 요소 제거하기

pop을 사용하면 마지막 요소가 제거됩니다.

const target = ['가','나','다','라','마'];
target.pop();
console.log(target);
(4) ['가', '나', '다', '라']

shift를 사용해서 첫 번째 요소를 제거할 수도 있습니다.
(첫 번째 요소 추가가 unshift 였죠? 😀)

중간요소를 제거하고 싶으면 splice 라는 기능을 사용합니다.

const target = ['가','나','다','라','마'];
target.splice(1,1); // (지울요소의 인덱스, 몇개를 지울 지)
console.log(target);
(4) ['가', '다', '라', '마']

만약에 splice에 숫자 두 개가 아니라 하나만 넣는다면 하나만 넣으면 해당 인덱스부터 끝까지 모든 요소를 제거하겠다는 뜻입니다.

const target = ['가','나','다','라','마'];
target.splice(1);
console.log(target);
['가'] // 인덱스 1인 '나'부터 뒤에를 싹 다 지워버립니다.

splice로 값을 지우기만 하는 것이 아니라 지워진 자리에 다른 값을 넣을 수도 있습니다. splice의 세 번째 자리부터 바꿀 값들을 넣어주면 됩니다.

const target = ['가','나','다','라','마'];
target.splice(1,3,'타','파');
console.log(target);
(4) ['가', '타', '파', '마']

지우지 않고 값을 넣어주고 싶다면?

const arr = ['가','나','다','라','마'];
arr.splice(2,0,'바');
console.log(arr);
(6) ['가', '나', '바', '다', '라', '마']

위 코드처럼 해주면됩니다. 넣어줄 인덱스를 넣고, 그 다음 하나도 지우지 않는다의 0을 넣은다음, 넣을 글씨를 적어주면 됩니다.

배열에서 요소 찾기

배열에 특정 요소가 있는지 찾아보고 싶을 때 (일종의 검색 기능) includes 기능을 사용합니다.

const target = ['가','나','다','라','마'];
const result = target.includes('다');
const result2 = target.includes('카');
console.log(result);
console.log(result2);
true
false

들어가있으면 true, 없으면 false를 반환하는데 주로 조건문이랑 반복문에 넣는다고 보면 됩니다.

검색하고 싶은 값이 몇 번째 인덱스에 위치하는 지도 알 수 있습니다.
indexOf 와 lastIndexOf 기능을 사용해봅시다.

const target = ['라','나','다','라','다'];
const result = target.indexOf('다');
const result2 = target.lastIndexOf('라'); //뒤에서부터 찾는다
const result3 = target.indexOf('가'); // '가'가 없으니까 -1 이 나온다.
console.log(result);
console.log(result2);
console.log(result3);
2
3
-1

배열 반복하기

배열은 값들을 나열한 것이기 때문에 반복문과 같이 사용하는 경우가 많습니다. 배열의 모든 요소를 console.log해보겠습니다. while문이나 for문 모두 사용할 수 있습니다.

const target = ['가','나','다','라','마'];
let i = 0;
while (i < target.length) { //인덱스 전부의 길이
  console.log(target[i]);
  i++;
}
가
나
다
라
마

for문으로 표현해보겠습니다.

const target = ['가','나','다','라','마'];
for (let = 0; i < target.length; i++) {
  console.log(target[i]);
}

배열에서 반복 기능을 제공하는 것이 아니라 반복문에 의해 반복되기 때문에 다른 기능을 추가하고 싶다면 반복문의 코드를 수정해야 합니다.

문제

다음 배열에서 '라'를 모두 제거하세요. indexOf와 splide를 사용하세요.

const arr = ['가','라','다','라','마','라'];

정답

const arr = ['가','라','다','라','마','라'];
< undefined
arr.indexOf('라')
< 1
arr.splice(1, 1)
< ['라']
arr
< (5) ['가', '다', '라', '마', '라']
arr.indexOf('라')
< 2
arr.splice(2, 1)
< ['라']
arr
< (4) ['가', '다', '마', '라']
arr.indexOf('라')
< 3
arr.splice(3, 1)
< ['라']
arr
< (3) ['가', '다', '마']

이렇게 하면 모든 '라'는 사라진다. 그리고 이렇게 계속 반복해서 '라'를 없애는 코드는 반복문으로 만들 수가 있다.

const arr = ['가','라','다','라','마','라'];
while (arr.indexOf('라') > -1) {
  arr.splice(arr.indexOf('라'), 1)
}
< ['라']
arr
< (3) ['가', '다', '마']

indexOf로 '라'를 1,3,5의 라를 가져서 일단 true가 된다. 그리고 동작문인 splice를 실행하여 '라'를 삭제한다.
같은 식으로 이렇게도 만들 수 있습니다.

const arr = ['가','라','다','라','마','라'];
let index = arr.indexOf('라'); //변수로 지정함. 1이 나옴.
while (index > -1) { // index는 1이다.
  arr.splice(index, 1);
  index = arr.indexOf('라'); // 종료식으로 봐야함
}
-1
arr
(3) ['가', '다', '마']

역시 같다 변수인 let index = arr.indexOf('라')는 1을 가르킨다.
index= arr.indexOf('라') 가 없으면 안 되는 이유가 무한 반복문이 되기 때문. 저 부분이 없다면 index는 계속 1일 것이고 그렇게 되면 조건식이 계속 true가 돼서 무한 반복된다. 그리고 인덱스 1의 자리에 오게 된 '라'가 아닌 요소들까지 지워진다

• 이해안가는 부분:
  처음에 '라'의 위치를 index에 저장하고, while 반복하면서 지정된 index에 있는 데이터를 splice로 삭제하고, 또 '라'의 위치를 찾는건데
  마지막에 '라'가 없으면 index에 -1을 반환해주니까 while조건에 안 맞아서 이제 반복문 탈출하는 코드이다. 저게 없으면 이제 '라'의 위치는 계속 반복문 들어가기전에 찾은 위치 즉 , 1로 계속 고정이 되어버리니까 동적으로 찾아주는 것이다. indexOf 함수 레퍼런스를 읽어보면 값이 존재하면 index를 반환하고 값이 없으면 -1을 반환한다고 정해놨다.

첫번째 인덱스인 (1 > -1)이 되고 이게 계속 true가 되니까 splice로 (1,1) 계속되고 다른 애들까지 지워지니까 index = arr.indexOf('라'); 이걸로 이제 다른 '라'를 찾아라 이 뜻