제로초 자바스크립트 입문 <반복문, 객체 - 배열>

반복문

• 컴퓨터는 반복 작업을 하는데 효과적이다
• 모든 프로그래밍 언어는 반복 작업을 처리하는 반복문을 가지고 있다
• 조건문과 더불어서 가장 많이 쓰는 문이다

while 문으로 반복해서 출력하기

while(조건식)
	실행문
    
while(조건식) {
	실행문1;
    실행문2;
    실행문3;
}

• while 문은 조건식이 참일 동안 반복해서 실행문을 실행
• 실행문의 여러 개라면 중괄호로 묶어도 된다
• if 문과 같은 이유로 실행문의 식이 하나이더라도 중괄호로 묶는 것을 권장한다
• 프로그래밍할 때는 무한 반복되는 상황을 방지해야 한다
• 변수 i 를 선언하고, 조건식을 작성하면 된다 
• 실제로 프로그래밍할 때는 변수에 첫 번째 값으로 1 보다는 0을 많이 넣는다
• 프로그래밍에서는 숫자를 0부터 세기 때문이다

for 문으로 반복해서 출력하기

for (시작; 조건식; 종료식)
	실행문

• 시작이 먼저 실행되고, 그 다음 조건식, 실행문, 종료식 순서로 실행된다
• 실행이 1번 끝나면 다시 조건식으로 검사한다

break 문으로 반복문 멈추기

let i = 0;
while (true) {
  if (i === 5)
   break;
  i++;
}
i;
< 5

 

무한 반복일 때 for 문과 while 문 중 어느 쪽이 더 편할까요 ?

//while 문 

let i = 0;
while(true) {
  console.log(i);
  i==;
}

// for 문 

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

• for 문에서 조건식을 생략하면 무한 반복한다
• 조건식은 일반적으로 생략하지 않으니 어색해 보일 수 있다
• 그래서 무한 반복문은 while 문을 주로 사용 

continue 문으로 실행 건너뛰기

• 반복문이 특정 조건에서만 실행될 수 있다
• continue 문을 넣으면 이후 코드는 실행하지 않고 다음 반복으로 건너뛴다

let i = 0;
while (i < 10) { 
  i++;
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}
1
3
5
7
9

 

중첩 반복문 사용하기

• 반복문 안에 반복문이 들어 있는 경우
• 중첩 횟수가 증가할수록 코드도 점점 어려워진다
• 실무에서는 대부분 이중 반복문이나 삼중 반복문 정도만 사용한다

for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    console.log(i, j);
  }
}
0 0
0 1
(중략) 
9 8
9 9

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);
    }
  }
}
1 1 1
1 1 3
1 3 1
1 3 3
3 1 1
3 1 3
3 3 1
3 3 3

---

객체

• 자료형의 일종인 객체 object 는 다양한 값을 모아 둔 또 다른 값이다
• 객체의 종류는 크게 배열 array, 함수 function, 배열이나 함수가 아닌 객체로 나눌 수 있다 

배열 

배열 생성하기

• 배열을 만들려면 대괄호 [ ], 배열 리터럴 로 값들을 한꺼번에 감싸고, 각 값은 쉼표로 구분
• [값1, 값2, ...];
• 배열의 모든 값은 각각 불러올 수 있다
• 배열명 뒤에 대괄호를 붙이고 그 안에 불러오고 싶은 값의 자릿수를 적어 주면 된다 
• 자릿수를 인덱스 index 라고 한다
• 인덱스는 0 부터 시작한다 

const fruits = ['사과', '오렌지', '배', '딸기']; 
fruits[0]; // 첫 번째 값
< '사과'
fruits[1]; // 두 번째 값
< '오렌지'
fruits[2]; // 세 번째 값

• 배열 안에 다른 배열이나 변수를 넣을 수 있다
• const arrayOfArray = [[1, 2, 3], [4, 5]];
• 배열 안에 배열이 있으면 이차원 배열 이라고 한다
• 배열은 값이 중복되어도 되고, 아무런 값이 없어도 만들수 있다
• 배열의 값은 요소 element 라고 한다

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

 

배열의 요소 개수 구하기 

• 배열이름 뒤에 .length 를 붙이면 된다
• 빈 값도 유효한 값이므로 요소 개수를 셀 때 포함된다 
• 배열의 요소 개수가 항상 마지막 인덱스보다 1 크다 
• 이를 이용해서 마지막 요소를 찾을 수 있다
• at( ) 도 사용 가능하다 
• at 의 소괄호 안에 넣은 숫자가 0 또는 양의 정수이면 배열의 앞에서부터 해당 인덱스의 요소를 찾는다
• 반대로 숫자가 음의 정수이면 배열의 마지막에서부터 요소를 찾는다

const findLastElement = ['a', 'b', 'c', 'd', 'e']; 
findLastElement[findLastElement.length - 1]; // 'e'

onst findLastElement = ['a', 'b', 'c', 'd', 'e']; 
findLastElement.at(4); // 'e'
findLastElement.at(-1); // 'e'

 

배열의 요소 추가하기 

• 배열에 새로운 요소를 추가할 수 있다
• 특정 인덱스의 요소를 수정하거나 제거할 수도 있다
• 배열에 요소를 추가할 때는 원하는 배열의 인덱스에 값을 대합하면 된다
• 배열의 마지막 요소의 인덱스가 배열.length - 1 이므로 배열 맨 뒤에 새로운 요소를 추가하려면 배열.length 에 값을 넣으면 된다
• 배열 맨 앞에 값을 추가하고 싶다면, unshift( ) 
• 배열 맨 뒤에 값을 추가하고 싶다면, push( )

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

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

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

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

 

배열의 요소 수정하기 

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

const target = ['가', '나', '다', '라', '마']; 
target[target.length - 1] = '카';
target; // (5) ['가', '나', '다', '라', '카']

// at( )은 위치가 아닌 값을 나타냄

 

배열의 요소 삭제하기

• pop( )을 사용하면 마지막 요소 삭제
• shift( )를 사용하면 첫 번째 요소 삭제
• splice( )를 사용하면 중간 요소 삭제 , 첫 번째는 시작 인덱스, 두 번째는 삭제할 요소의 개수 입력 
• 만약 하나만 넣으면 해당 인덱스에서부터 배열 끝까지 모든 요소를 삭제
• splice( )는 값을 삭제한 자리에 다른 값을 넣을 수 있다
• splice( ) 에 숫자 2개를 넣고 그 뒤에 바꿀 값을 넣는다 
• splice( )를 활용해 배열 중간에 값을 넣을 수도 있다

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

const target = ['가', '나', '다', '라', '마']; 
target.shift();
target; // (4) ['나', '다', '라', '마']

const target = ['가', '나', '다', '라', '마']; 
target.splice(1, 1);
target; // (4) ['가', '다', '라', '마']

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

 

배열에서 요소 찾기

• includes( ) 를 사용해서 요소 찾음
• indexOf( ), lastIndecOf( ) 사용해서 검색하려는 값의 인덱스 찾음 
• indexOf( ) 는 주어진 값이 있는지 앞에서 찾음
• lastIndexOf( ) 는 뒤에서부터 찾음
• 배열 안에 존재하지 않는 값도 찾을 수 있고, 이럴 경우 결과는 -1 이 나온다
• indexOf( ) , includes( ) 로 값을 찾을 때는 값의 자료형도 일치해야 한다 

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

const target = ['라', '나', '다', '라', '다']; 
const result = target.indexOf('다');
result; // 2
const result2 = target.lastIndexOf('라'); 
result2; // 3
const result3 = target.indexOf('가'); 
result3; // -1

 

배열 자르고 합치기 

• 배열.slice(<시작 인덱스>, <종료 인덱스>)
• 배열.concat(값1, 값2, ...)

배열과 비슷한 문자열의 특징

• 문자열[자릿수]
• 문자열의 길기 : 문자열.length 
• 문자열의 마지막 글자 : 문자열[문자열.length - 1]  //  at(-1)
• 배열을 문자열로 만들때 : join( )
• 문자열을 배열로 만들때 : split( )

배열 반복하기

• 배열은 값들을 나열한 것이라서 반복문과 함께 사용하는 경우가 많다

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

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

 

이차원 배열 : 배열의 요소로 배열이 들어있음 

flat( ) : 배열의 차원을 한 단계 낮추는 기능, n차원 배열을 n-1 차원 배열로 낮춤 

fill( ) : 빈 배열의 요소를 미리 특정 값으로 채워 넣는 기능 

Set : 배열 및 문자열의 중복을 제거  , 요소의 개수를 구할 때는 .size 사용