TIL 2020-10-19 (반복문, 배열)

nyongho·2020년 10월 19일
TIL반복문배열
0

JavaScript

목록 보기
3/23
post-thumbnail

Level 1-2 반복문, 배열

TIL List

  • 반복문
  • 배열

1) 반복문

반복문(loop)중 for 문(for loop)에 대해서 알아보려 한다. 반복문이 없다면 우리는 수백만 개의 정보를 처리하기 위해서 수백만 줄의 코드를 작성해야 한다. 이런 단순 반복을 보다 효율적이고 간결하게 할 수 있도록 반복문을 활용한다.

TIL 변수 편에서 다뤘던 코드를 다시 가져와 보자.

let sum = 1
sum = sum + 2
sum = sum + 3
sum = sum + 4
console.log(sum); // 10

위 코드를 보면 sum 이라는 값에 지속적으로 1을 더해주는 모습을 볼 수 있다.

그렇다면 위 코드처럼 4까지 더 해주는게 아니라 만약 100까지 더해준다고 가정해보자.

우리는 이 코드를 일일이 작성해 줄 수도 있겠지만 그건 너무 비효율적이다.

나는 반복문이 있는 이유를 공장에 비유하고 싶다.

문명의 이기의 발명에 창조원이 된 증기기관차가 세상에 나온 뒤로 기계화 문명을 통해 인간의 문

명은 급속도로 빠르게 발전했다. 1시간에 1개를 만들던걸 1000개를 만들 수 있게 되는, 시간을

돈으로 사는 형태의 역사를 보고서도 코드를 일일이 친다는 생각을 한다면...

그분에게는 다른 의미로 박수 쳐주고 싶다.

어쨋든 위에서 알 수 있듯이 반복문은 우리가 코드 타이핑 하는 시간을 줄여줄 것이고 결국
우리의 생산성을 높혀준다.

그러면 우리는 앞으로 코드안에 공장을 차려서 기계에게 일을 시킬 것인데 기계가 어떻게 내가 원하는대로 일을 처리 시킬지를 알아야 된다. 위 코드에서의 조건은 아래와 같다.

  1. 증가되는 숫자를 n 이라 가정했을 때 n은 2부터 시작한다.
  2. n은 4가 될 때까지 반복하며
  3. n은 1씩 증가한다.

위의 3가지 조건으로 우리는 기계에게 내릴 명령을 정리했다. 이제 이 조건을 하나씩 코드로 구현하면 아래와 같이 된다.

let sum = 1;
sum = sum + n // 반복 시켜줄 식
let n = 2; // n 은 2 부터 시작해서
n <= 4; // 4까지 반복하고 4가 되면 반복을 종료한다.
n = n + 1 // n 은 1씩 증가한다.

위를 통해 우리는 기계에게 명령을 내리는 법은 알았지만, 아직 기계를 작동시키는 법은 모른다.

기계를 작동시키는 법은 2가지가 있는데 이는 아래와 같다.

💡 for 문

for 문은 아래와 같은 형태를 가지고 있다.

let sum = 1;

for (기계에게 명령할 조건) {
   기계가 반복할 내용
}

그리고 위의 조건을 가지고 for 문을 작성해보자.

let sum = 1;

for (let n = 2; n <= 4; n = n + 1) {
  sum = sum + n
}
console.log(sum) // 10

❗ 반복문의 조건을 쓸 때 각 조건이 끝날 때 꼭 세미클론(;) 을 찍어줘야 한다.

세미클론은 컴퓨터에서 우리가 알고 있는 마침표와 같은 역할을 한다.

세미클론을 찍지 않으면 컴퓨터는 뒤까지 같은 조건으로 인식하고 결국 ERROR 를 나타낸다.

그리고 위 코드에서 쓰인 n은 변수다. 그니까 n을 쓰든 y를 쓰든 a를 쓰든 그건 여러분 자유다.

단, let y = 1; 이런식으로 y로 조건을 써놓고 식은 sum = sum + n 이렇게 n 을

사용하면 컴퓨터는 y와 n은 다르게 인식하기 때문에 원하는 결과를 못 가져오니 꼭 통일을 해주길 바란다.

여기서 연습 문제!

for (   ) {
console.log('Yongho');
}

위 코드에서 'Yongho'를 다섯번 출력하기 위한 조건은 뭘까?

정답

for (let n = 1; n <= 5; n = n + 1) {
console.log('Yongho')
}

n은 1부터 5까지 1씩 증가하면 1,2,3,4,5 총 5번을 반복하게 되므로

조건은 let n = 1; n <= 5; n = n + 1 으로 써줄 수 있다.

(여기서 첫번째, 두번째, 세번째 조건 순으로 초기화, 조건식, 증감문 이라고 부른다.)

우리가 숫자 2를 만들기 위해서 1+1, 3 - 1, 4 / 2 등 다양한 방법을 사용하는 것처럼

원하는 조건으로 반복하게 하는 방법 또한 여러가지가 있다.

아래에 예를 적을테니 보면서 좀 더 심층적으로 이해하길 바란다.

// 다른 방법 1
for (let n = 0; n <= 4; n = n + 1) { // 0,1,2,3,4 총 5번 반복
console.log('Yongho')
}
// 다른 방법 2
for (let n = 0; n < 5; n = n + 1) { // 0,1,2,3,4 총 5번 반복
console.log('Yongho')
}
// 다른 방법 3
for (let n = 1; n < 6; n = n + 1) { // 1,2,3,4,5 총 5번 반복
console.log('Yongho')
}

💡 while 문

while 의 형태는 아래와 같다.

let sum = 1;
let n = 2;

while(n <= 4){
  sum = sum + n;
  n = n + 1;
}
console.log(sum); // 10

for 문과 다른 점이 보이는가? for문에서는 조건을 초기화, 조건식, 증감문 순서대로 () 괄호안에 모두

넣어줬지만 while 문에서는 초기화 를 맨 바깥에, 조건식은 () 괄호안에, 증감문은 {} 괄호안에 식과 함께
넣어준 모습이다.

"아니 이런식으로 복잡하게 만들빠에 for문을 사용하지 뭐하러 while문을 사용하냐?" 라는 생각이 드는건 당연하다. 같은 식을 그 누가 뭣하러 복잡한걸 사용하겠는가? 나도 같은 생각을 했었다.

하지만 for문과 while문은 차이점은 그 목적에 있다.

for문을 사용할 때는 반복하려는 횟수를 알 때 사용하면 좋다.

while문을 사용할 때는 조건에 따라 반복할 때 사용하면 좋다.

즉, while 문의 조건식이 true 일 경우에 계속해서 반복한다.

아직 이해가 잘 안될 수 있다. 우선 위 코드를 다시 봐보자. while(n <= 4) 라고 적혀 있다. 이는 "n에 들어올 0,1,2,3,4 는 n<=4 즉, 4보다 작거나 같으니까 모두 true 여서 통과시키지만 5부터는 n <= 4 에 부합하지 않으므로 false가 되므로 4까지 반복을 한다." 라는 뜻을 내포하고 있다.

이제 두 반복문의 차이가 느껴지는가?

  • 여러분이 단순히 코드를 일정 횟수 반복 시키려는 목적이면 for 문을 사용하는것이 효율적이다.

  • 하지만 내가 정한 조건에 부합할 때 까지만 코드를 반복시키고 싶다면 while문을 사용하는것이 효율적이다.

2) 배열

반복문에서는 대량의 정보를 처리하는 법을 배웠다면, 이번에는 대량의 정보를 보관하고 관리하는 법에 대해서 배운다. 이번 레슨이 끝나고 나면 배열을 언제 써야 하는지, 어떻게 써야 하는지에 대해서 이해하고 활용할 수 있다. 특히 배열을 만들고, 요소를 추가하고 삭제하는 것을 자유자재로 다룰 수 있어야 한다.

배열은 순서가 있는 값을 의미한다.

let myNumber = [1,2,3,4,5]

  • 위 코드에서 볼 수 있듯이 배열은 대괄호 [] 를 이용한다.

  • 배열 안의 1,2,3,4,5 를 요소(element) 라고 부른다.

  • 각각의 원소는 쉼표(,) 로 구분한다.

  • 그리고 요소의 순서를 인덱스(Index) 라고 부른다.
    (인덱스의 순서는 그전에도 언급했듯이 0부터 시작한다.)

위 개념을 통해 이해도를 테스트 해보자.

문제 : myNumber의 배열 중 2번째 인덱스는 무엇일까?

정답 : 인덱스는 0,1,2 순서로 세므로 3 이다.

myNumber의 배열 중 2번째 인덱스를 조회하려면

myNumber[2]; // 3 이렇게 표현한다.

myNumber의 배열 중 2번째 인덱스 값을 100으로 변경하려면

myNumber[2] = 100; 이렇게 해주면 된다. 정리하자면 아래와 같다.

let myNumber = [1,2,3,4,5];
myNumber[2] = 100;
console.log(myNumber[2])
// [1,2,100,4,5]

그렇다면 이번에는 아래와 같이 배열안에 배열을 넣어보자.

let myNumber = [[1,2],[3,4],[5,6]];

문제 1 : myNumber 의 1번째 인덱스는?

정답 1 : [3,4]

문제 2 : myNumber의 1번째 인덱스의 0번째 인덱스는?

정답 2 : 3

배열을 이용해 할 수 있는 3가지 메소드(Method)

1. 배열의 길이를 알아 낼 수 있다.

배열의 이름 앞에 .length 를 사용하면 된다.

let myNumber = [1,2,3,4,5];
console.log(myNumber.length);
// 3

2. 배열의 마지막에 요소를 추가할 수 있다.

.push() 함수를 사용하면 된다.(괄호안에 추가할 요소를 넣는다)

//배열의 마지막에 6을 추가해보자!
let myNumber = [1,2,3,4,5];
console.log(myNumber.push(6));
// [1, 2, 3, 4, 5, 6]

3. 배열의 마지막 요소를 삭제할 수 있다.

.pop() 함수를 사용하면 된다. (괄호안에는 아무것도 넣지 않는다.)

// 추가했던 배열의 마지막 요소를 다시 삭제해보자!
let myNumber = [1,2,3,4,5,6];
console.log(myNumber.pop());
// [1, 2, 3, 4, 5]

"아니 첫 요소를 추가하거나 첫 요소를 삭제하는 메소드는 없는거야?" 라고 생각할 수 있다. 물론 있다. 이는 좀 더 아래에서 다룰 것이다.

이번에는 위에서 배웠던 반복문, 배열 개념을 혼합해 사용해보자.

let myNumber = [1,2,3,4,5]

위 배열의 요소를 반복문을 통해 모두 출력해보려고 했을 때 필요한 조건을 무엇일까?

"n = 0 부터 n <= 4 까지 n = n + 1 을 해주면 되는거 아냐?"

그렇다면 만약, 배열안의 요소를 모른다고 가정하자. 이 경우엔 조건식을 어떻게 해결 할 것인가?

우리에게는 그전에 배웠던 개념 .length 가 있으니 걱정하지 말자.

n = 0; n < myNumber.length; n = n + 1

이렇게 하면 n = 0 부터 n < 5 까지 반복하게 되므로 0,1,2,3,4 번째 요소를 모두 출력할 수 있다.

let myNumber = [1,2,3,4,5]
for (let n = 0; n < myNumber.length; n = n + 1) {
console.log(myNumber[n]);
} // 1,2,3,4,5

반복문을 통해 요소를 출력하는 방법을 알았으니 이번에는 myNumber 요소를 모두 더한 값을 출력해보자. 

let myNumber = [1,2,3,4,5]
let sum = 0; // 누적 합을 저장할 공간
for (let n = 0; n < myNumber.length; n = n + 1) { // 1,2,3,4,5
  sum = sum + myNumber[n] // 1+2+3+4+5
}

앞서 배웠던 개념을 활용해 만든 코드다.

배열 기초 메소드 3가지

1. 배열인지 아닌지 확인하기

기본적으로 어떤 값의 타입(type) 을 알고 싶으면 typeof 함수를 사용하면 된다.

typeof '문자열'
// "string"
typeof 1234
// "number"
typeof [1,2,3,4]
// "object"
typeof {a : 1}
// "object"

여기서 문제점은 [1,2,3,4], {a : 1} 즉, 배열과 객체는 구분없이 똑같이 "object" 를 출력한다는 것이다.

따라서 우리는 이것이 확실하게 배열 타입인지 알 수 있는 다른 메소드를 써야하는데 이는 Array.isArray() 함수로 해결할 수 있다.

Array.isArray([1,2,3]) // true
Array.isArray([]) // true
Array.isArray('문자열') // false
Array.isArray(1234) // false
Array.isArray(abc) // undefined

(마지막에 undefined 가 뜨는 이유는 컴퓨터는 abc를 하나의 변수로 인식하기 때문에 식에서 변수를 찾을 것이고 변수가 없기 때문에 undefined 가 뜨는 것이다. 만약 let abc = [1,2,3,4] 등으로 미리 선언을 해줬으면 true가 나올 것이다.)

2. 배열 요소 추가 및 삭제

위에서는 배열의 마지막 요소를 추가하고(.push()) 삭제하는 방법을 배웠다면(.pop())

이번에는 배열의 첫 요소를 추가하고 삭제하는 방법을 배울 것이다.

1) 배열의 맨 앞에 요소를 추가할 수 있다.

.unshift() 함수를 사용하면 된다.( 괄호안에는 아무것도 넣지 않는다.)

let arr = ['Kim', 'Yongho'];
arr.unshift('I am');
console.log(arr); // ['I am', 'Kim', 'Yongho']

2) 배열의 첫 요소를 삭제할 수 있다.

.shift() 함수를 사용하면 된다.( 괄호안에는 아무것도 넣지 않는다.)

let arr = ['I am', 'Kim', 'Yongho'];
arr.shift('I am');
console.log(arr); // ['Kim', 'Yongho']

3. 배열 요소 포함 여부 확인

.indexOf 함수를 사용하면 된다.

해당 요소의 인덱스 값이 출력된다.

let myName = ['I am', 'Kim', 'Yongho']
myName.indexOf('Kim') // 1
myName.indexOf('Yongho') // 2
myName.indexOf('Park') // -1 (없는 요소는 -1 을 출력한다.)

💡 우리는 이것을 비교연산자를 이용하여 boolean 형태로 나타나게 응용해 볼 수 있다.

let myName = ['I am', 'Kim', 'Yongho']
myName.indexOf('Kim') !== -1 // true ('Kim' 은 -1 이 아니므로 true)
myName.indexOf('Yongho') !== -1 // true (마찬가지)
myName.indexOf('Park') !== -1 // false (-1 이므로 false 를 출력한다.)

💡 그리고 앞으로 이것을 간단한 명령으로 출력할 수 있도록 하는 함수를 작성할 수 있다.

function hasElement (arr, element) {
   let isTrue = arr.indexOf(element) !== -1
   return isTrue
}
// hasElement([1,2,3],1) ➡ true
// hasElement([1,2,3],2) ➡ true
// hasElement([1,2,3],4) ➡ false
profile
nyongho
두 줄 소개
이전 포스트

TIL 2020-10-18 (조건문, 문자열 다루기)

다음 포스트

TIL 2020-10-20 (객체)

0개의 댓글