[#3] KoreanCoding 101: for loops and arrays
Tags: javascript, beginners, programming, tutorial
Published: 2023-05-12 14:01:30

Hey there! This week we will be learning vocabulary related to arrays and `for` loops! These are the bread and butter for us developers, something we deal with almost every single day. Arrays are like handy containers that let us store and organize data, while `for` loops are these amazing tools that help us work with arrays in super flexible and speedy ways. We can loop through arrays, find specific elements, or filter out data that meets certain criteria using for loops. (By the way, some cool JavaScript methods work similarly but we will talk about those next week!) So, let's get into it!

## Arrays | 배열

Arrays are like boxes that can hold multiple things at once - we can store strings, numbers, booleans, objects, and even other arrays inside of them. Arrays help us keep things organized and easily accessible. Just like how you can pick out a specific item from your box, we can retrieve individual elements (원소) from an array (배열) using their position or index (인덱스). Index counting starts from 0 ([zero-based indexing](https://en.wikipedia.org/wiki/Zero-based_numbering)), so the first element's position in an array called `array` will be `array[0]`, and the last item can be accessed by using `length` property:

```javascript
const array = ['a', 'b', 'c', 'd']
console.log(array.length) // Logs out 4
console.log(array[0]) // Logs out 'a'
console.log(array[array.length - 1])  // Logs out 'd'
```

The `length` property returns the total number of elements present in the array. To access the last element, we subtract 1 from the length (길이). Why? Well, since index (인덱스) counting starts from 0, the last element's position is actually one less than the length. So, to access the last element (원소), we use `array[array.length - 1]`.

## `for` loop | `for` 문

Now it's time to understand how `for` loops work. A `for` loop allows us to repeat (반복) a block of code multiple times. It consists of three essential components: initialization (초기화), condition (조건), and increment/decrement (증감식).

1. **Initialization (**초기화**):** Set an initial value before the loop starts, like initializing a variable or setting a counter.
    
2. **Condition (조건):** Define a condition that is checked before each loop iteration. The loop continues as long as the condition remains true and stops when it becomes false.
    
3. **Increment/Decrement (증감식):** Specify how the loop variable should change after each iteration, like increasing or decreasing its value (값).
    

```javascript
for (let i = 0; i < 5; i++) {
  console.log("Iteration: " + i);
}
// Logs out 'Iteration: 0'
//          'Iteration: 1'
//          'Iteration: 2'
//          'Iteration: 3'
//          'Iteration: 4'
```

We start with `i` initialized to 0. The loop will continue as long as `i` is less than 5. After each iteration, `i` is incremented (증감) by 1. The loop will run five times, with `i` taking the values 0, 1, 2, 3, and 4.

It's worth noting that we can set `i` to be different values (값) depending on our needs, or we can even make it go in reverse order, like this:

```javascript
for (let i = 5; i > 0; i--) {
  console.log("Iteration: " + i);
}
// Logs out 'Iteration: 5'
//          'Iteration: 4'
//          'Iteration: 3'
//          'Iteration: 2'
//          'Iteration: 1'
```

Other than `for` loop, there are many other kinds of loops, such as `while`, `do... while`, `for... in`, `for... of`, etc. You can learn more about them here: [JavaScript Loops](https://www.w3schools.com/js/js_loop_for.asp).

## Vocabulary

**Nouns:**

배열 - array  
문자열 배열 - an array of strings  
원소, 요소 - element  
인덱스 - index  
길이 - length  
값 - value  
정수 - integer  
짝수 - even number  
홀수 - odd number  
유사도 - similarity  
소문자 - lowercase letters  
중복된 원소 - duplicate elements  
반복문 - iteration   
`for`문 - `for` loop  
중첩 반복문 - nested loop   
초기화 - initialization  
조건 - condition  
증감 - increment  
반복 횟수 - iteration count

**Verbs:**

추가하다 - to append, to add  
삭제하다 - to delete  
정렬하다 - to sort  
합치다 - to merge  
반복하다 - to repeat

**Phrases:**

**1씩 감소하는 수들을 차례로 담은 리스트**  
a list of numbers decreasing by one

**정수가 담긴 리스트**  
a list of integers

**(something)의 개수**  
the number of (something)

**원소의 개수**  
the number of elements

## Challenges

### [카운트 다운](https://school.programmers.co.kr/learn/courses/30/lessons/181899)

**Description**

> <mark>정수 </mark> `start`와 `end`가 주어질 때, `start`에서 `end`까지 <mark>1씩 감소하는 수</mark>들을 <mark>차례로 담은 리스트</mark>를 return하도록 solution 함수를 완성해주세요.
> 
> **제한사항**
> 
> * 0 ≤ `end` ≤ `start` ≤ 50
>     
> 
> **입출력 예**
> 
> | start | end | result |
> | --- | --- | --- |
> | 10 | 3 | \[10, 9, 8, 7, 6, 5, 4, 3\] |
> 
> **입출력 예 설명**
> 
> 입출력 예 #1
> 
> * 10부터 3까지 1씩 감소하는 수를 담은 리스트는 \[10, 9, 8, 7, 6, 5, 4, 3\]입니다.
>     

**Description:**

**카운트 다운**  
Countdown

**정수** `start`**와** `end`**가 주어질 때,**  
Integers `start` and `end` are given as parameters,

`start`**에서** `end`**까지 1씩 감소하는 수들을 차례로 담은 리스트를 return하도록 solution 함수를 완성해주세요.**  
complete the `solution` function by returning a list of numbers that decrease by one from `start` to `end`.  

**제한사항 (constraints):**  
The constraints section of the challenge informs us that both `end` and `start` can have values ranging from 0 to 50. The `end`'s value will always be less or even `start`.

**입출력 예 (input-output examples):**

\#1: When `start` = 10 and `end` = 3, the result will be \[10, 9, 8, 7, 6, 5, 4, 3\].

**입출력 예 설명 (explanation of input-output examples):**

Based on the example #1:

The list containing the numbers from 10 to 3 in increments of 1 is \[10, 9, 8, 7, 6, 5, 4, 3\].

**JavaScript Solution**

First, we create an empty array called `result`.  
Then, we use a `for` loop to iterate over numbers from `start` to `end`. The loop starts with the value of `start` and continues as long as `i` is greater than or equal to `end`. The `i`'s value decrements by one after each iteration.  
Inside the loop, each value of `i` is pushed into `result` array using the `push` method. This adds the current value of `i` to the end of the `result` array.  
After the loop finishes, the `result` array is returned from the function.

```javascript
function solution(start, end) {
    const result = []
    for(let i = start; i >= end; i--) {
        result.push(i)
    }
    return result
}
```

---

### [짝수 홀수 개수](https://school.programmers.co.kr/learn/courses/30/lessons/120824)

**Description**

> 정수가 담긴 리스트 `num_list`가 주어질 때, `num_list`의 <mark>원소</mark> 중 <mark>짝수</mark>와 <mark>홀수</mark>의 <mark>개수</mark>를 담은 <mark>배열</mark>을 return 하도록 solution 함수를 완성해보세요.
> 
> **제한사항**
> 
> * 1 ≤ `num_list`의 길이 ≤ 100
>     
> * 0 ≤ `num_list`의 원소 ≤ 1,000
>     
> 
> **입출력 예**
> 
> | num\_list | result |
> | --- | --- |
> | \[1, 2, 3, 4, 5\] | \[2, 3\] |
> | \[1, 3, 5, 7\] | \[0, 4\] |
> 
> **입출력 예 설명**
> 
> 입출력 예 #1
> 
> * \[1, 2, 3, 4, 5\]에는 짝수가 2, 4로 두 개, 홀수가 1, 3, 5로 세 개 있습니다.
>     
> 
> 입출력 예 #2
> 
> * \[1, 3, 5, 7\]에는 짝수가 없고 홀수가 네 개 있습니다.
>     

**Description:**

**짝수 홀수 개수**  
Counting odd and even numbers

**정수가 담긴 리스트** `num_list`**가 주어질 때,**  
Given a list `num_list` of integers,

`num_list`**의 원소 중 짝수와 홀수의 개수를 담은 배열을 return 하도록 solution 함수를 완성해보세요.**  
Complete the `solution` function to return an array containing the count of even and odd numbers found in `num_list`.

**제한사항 (constraints):**

The `num_list` should contain a minimum of 1 element and a maximum of 100 elements and each element in `num_list` must be between 0 and 1,000, inclusive.

**입출력 예 (input-output examples):**

\#1: When `num_list` = \[1, 2, 3, 4, 5\], the result should be \[2, 3\].

**입출력 예 설명 (explanation of input-output examples):**

Based on the example #1:

\[1, 2, 3, 4, 5\] has two even numbers: 2 and 4, and three odd numbers: 1, 3, 5.

**JavaScript Solution**

First, we initialize two variables `evenCount` and `oddCount` and set them both to 0. This is where we will store how many odd and even numbers appeared in our `num_list` array.  
Then, we use a `for` loop to iterate over each element of the `num_list`. The loop starts with `i` equal to 0 and continues as long as `i` is less than the length of `num_list`. The loop increments `i` by 1 in each iteration.  
Inside the loop, it checks whether the current element at index `i` is even or odd. This is done by checking if the remainder of dividing the element by 2 is equal to 0. If the current element is even, it increments the `evenCount` variable by 1. Otherwise, if the element is odd, it increments the `oddCount` variable by 1.  
After the loop finishes iterating over all the elements in the `num_list` array, it returns an array containing the counts of even and odd numbers, respectively, as `[evenCount, oddCount]`.

```javascript
function solution(num_list) {
    let evenCount = 0
    let oddCount = 0
    for (let i = 0; i < num_list.length; i++) {
        if(num_list[i] % 2 === 0) evenCount++
        else oddCount++
    }
    return [evenCount, oddCount]
}
```

---

### [배열의 유사도](https://school.programmers.co.kr/learn/courses/30/lessons/120903)

**Description**

> <mark>두 배열이 얼마나 유사한지 </mark> 확인해보려고 합니다. <mark> 문자열 배열</mark> `s1`과 `s2`가 주어질 때 같은 <mark>원소의 개수</mark>를 return하도록 solution 함수를 완성해주세요.
> 
> **제한사항**
> 
> * 1 ≤ `s1`, `s2`의 <mark>길이 </mark> ≤ 100
>     
> * 1 ≤ `s1`, `s2`의 원소의 길이 ≤ 10
>     
> * `s1`과 `s2`의 원소는 알파벳 <mark>소문자</mark>로만 이루어져 있습니다
>     
> * `s1`과 `s2`는 <mark>각각 중복된 원소</mark>를 갖지 않습니다.
>     
> 
> **입출력 예**
> 
> | s1 | s2 | result |
> | --- | --- | --- |
> | \["a", "b", "c"\] | \["com", "b", "d", "p", "c"\] | 2 |
> | \["n", "omg"\] | \["m", "dot"\] | 0 |
> 
> **입출력 예 설명**
> 
> 입출력 예 #1
> 
> * "b"와 "c"가 같으므로 2를 return합니다.
>     
> 
> 입출력 예 #2
> 
> * 같은 원소가 없으므로 0을 return합니다.
>     

**Description:**

**배열의 유사도**  
Array's similarity

**두 배열이 얼마나 유사한지 확인해보려고 합니다.**  
You want to determine how similar the two arrays are.

**문자열 배열** `s1`**과** `s2`**가 주어질 때 같은 원소의 개수를 return하도록 solution 함수를 완성해주세요.**  
Complete the `solution` function to return the number of the same elements when given arrays of strings `s1` and `s2`.

**제한사항 (constraints):**

Arrays `s1` and `s2` can have a minimum length of 1 and a maximum length of 100, and each string in the arrays can have a minimum length of 1 character and a maximum length of 10 characters. Moreover, the elements of `s1` and `s2` consist only of lowercase letters of the alphabet and there are no duplicate elements within each array.

**입출력 예 (input-output examples):**

\#1: When `s1` = \["a", "b", "c"\] and `s2` = \["com", "b", "d", "p", "c"\], `result` = 2.

**입출력 예 설명 (explanation of input-output examples):**

Based on the example #1:

Returns 2 because "b" and "c" appear in both arrays.

**JavaScript Solution**

First, we initialize a variable called `count` to keep track of the number of common elements between the arrays. The initial value is set to 0.  
Then we use two nested `for` loops to compare each element of `s1` with each element of `s2`. The outer loop iterates over the elements of `s1`, and the inner loop iterates over the elements of `s2`.  
Inside the inner loop, it checks if the current element of `s1` at index `i` is equal to the current element of `s2` at index `j`. If they are equal, it means that there is a common element, so it increments the `count` variable by 1.  
After the loops finish iterating over all the elements in `s1` and `s2`, the function returns the final value of `count`, which represents the number of common elements between the two arrays.

```javascript
function solution(s1, s2) {
  let count = 0
  for (let i = 0; i < s1.length; i++) {
    for (let j = 0; j < s2.length; j++) {
      if(s1[i] === s2[j]) count++
    }
  }
  return count
}
```

## Wrap-up

And that's a wrap! I hope you've enjoyed today's lesson. Arrays and `for` loops are super useful tools that developers use all the time. Understanding how they work and how to use them effectively can really level up your coding game. So keep on learning and experimenting, and soon you'll be able to make the most of arrays and for loops in your own projects.

For those who are keen on trying to solve some similar challenges on their own, I have picked some additional challenges related to arrays and `for` loops:

* [짝수의 합](https://school.programmers.co.kr/learn/courses/30/lessons/120831)
    
* [배열 두배 만들기](https://school.programmers.co.kr/learn/courses/30/lessons/120809)
    
* [중복된 숫자 개수](https://school.programmers.co.kr/learn/courses/30/lessons/120583)

See you next week!