TIL 2023.03.08(온보딩 3일차)

배열 (array)

배열은 여러 자료를 묶어서 활용할 수 있는 특수한 자료이다.

> const str = '안녕하세요'

> str[2]
하

> str[str.length - 1]
요

배열은 대괄호를 사용하고 내부의 값을 요소(element)라고 한다. 이때 요소의 순서를 인덱스(index)라고 한다.

배열[배열.length - 1] 은 배열의 마지막 요소를 출력한다.

배열.length

배열 내부에 들어있는 요소의 개수를 확인할 때에는 length 속성을 사용한다.

배열.push(요소)

베열 뒷부분에 요소를 추가할 때는 push() 메소드를 사용한다.

const fruits = ['사과','귤','배']

fruits[10] = '오렌지'

console.log(fruits)

> [ '사과', '귤', '배', <7 empty items>, '오렌지' ]

위와 같이 자바스크립트에서 배열의 길이는 고정이 아니다.

배열.splice(인덱스, 제거할 요소의 개수)

const fruits = ['사과','귤','배']

fruits.splice(2,1)

console.log(fruits)

> [ '사과', '귤' ]

배열.indexOf(요소)

배열 안의 특정 요소의 위치를 찾기 위해선 indexOf 메소드를 사용한다.

자료의 비파괴와 파괴

비파괴적 처리 : 처리 후에 원본 내용이 변경되지 않음
파괴적 처리 : 처리 후에 원본 내용이 변경됨

챕터 4-1 확인 문제

const array = [1,2,3,4]

console.log(array.length)
console.log(array.push(5))

> 4
5

.puch 메소드를 사용하면 기존 배열인 array에 파괴적 처리가 이루어진다. 즉 array = [1,2,3,4,5] 가 되는 것이고 그 전 데이터는 없어지는 것이다. 따라서 console.log(array.push(5))의 출력값이 1,2,3,4,5 가 아닌 5가 되는 것이다.

for in 반복문

for ( const 반복 변수 in 배열 또는 객체 ) {
문장
}

const toDoList = ['우유 구매','업무 메일 확인하기','필라테스 수업']

for(const toDO in toDoList){
    console.log(`${toDO}번째 할 일 : ${toDoList[toDO]}`)
}

> 0번째 할 일 : 우유 구매

1번째 할 일 : 업무 메일 확인하기

2번째 할 일 : 필라테스 수업

중요하게 봐야할 점은 for 반복문의 반복 변수(위의 코드에서는 toDo)에는 요소의 인덱스들이 들어온다는 점이다.

for of 반복문

for ( const 반복 변수 of 배열 또는 객체 ) {
문장
}

const toDoList = ['우유 구매','업무 메일 확인하기','필라테스 수업']

for(const toDo of toDoList){
    console.log(`오늘의 할 일 : ${toDo}`)
}

> 오늘의 할 일 : 우유 구매
오늘의 할 일 : 업무 메일 확인하기
오늘의 할 일 : 필라테스 수업

for of 반복문과 for in 반복문의 가장 큰 차이점은 반복 변수에 요소 값이 들어간다는 점이다.

for 반복문

for ( let i = 0; i < 반복 횟수; i++) {
문장
}

for(let i = 0; i < 5; i++){
    console.log(`${i}번째 반복입니다.`)
}

> 0번째 반복입니다.
1번째 반복입니다.
2번째 반복입니다.
3번째 반복입니다.
4번째 반복입니다.

위 코드를 해석하면 i = 0, i 가 0부터 시작해서 5 미만이 될 때까지 반복한다 라고 볼 수 있다.

let output = 0

for(let a = 1; a <= 100; a++){
    output += a 
}
console.log(output)

> 5050

for 반복문을 이용해서 1부터 100까지 숫자를 모두 더할 수 있다.

이때 중요한 점은 변수 output 을 먼저 0으로 할당해줘야 하고 output += a(반복 변수, 1부터 100까지 계속 증가) 을 잘 활용해야 한다.

const toDoList = ['우유 사기','배드민턴 레슨가기','셔틀콕 사오기']

for(let i = 0; i < toDoList.length; i++){
    console.log(`${i}번째 할 일 : ${toDoList[i]}`)
}

> 0번째 할 일 : 우유 사기
1번째 할 일 : 배드민턴 레슨가기
2번째 할 일 : 셔틀콕 사오기

const toDoList = ['우유 사오기','배드민턴 레슨가기','셔틀콕 사오기']

for(let i = toDoList.length - 1; i >= 0; i--){
    console.log(`${i}번째 할 일은 ${toDoList[i]}입니다.`)
}

> 2번째 할 일은 셔틀콕 사오기입니다.
1번째 할 일은 배드민턴 레슨가기입니다.
0번째 할 일은 우유 사오기입니다.

while 반복문

while ( 불 표현식 ) {
문장
}

while 반복문이 if 조건문과 다른 점은 불 표현식이 true면 계속해서 문장을 실행한다는 점이다.

따라서 조건을 거짓으로 만들 수 있는 내용이 문장에 포함되어 있어야하고 그렇지 않으면 무한 루프에 빠지게 된다.

let i = 0

while(true){
    console.log(`${i}번째 반복입니다.`)
    i += 1
}

위의 코드는 불 표현식이 true 이므로 계속해서 반복하게 된다

let i = 0 

while(confirm('계속 실행하시겠습니까?')){
    alert(`${i}번째 반복입니다`)
    i += 1
}

위 코드는 while 반복문의 조건식에 confirm 넣었다. 사용자에게 확인을 받는 창이 실행되고 사용자가 확인 버튼을 누르면 true 가 되어

반복문이 계속 반복되고 취소를 누르게 되면 조건문이 false가 되어 반복을 종료한다.

let i = 0
const array = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

while(i < array.length){
    console.log(`${i} : ${array[i]}`)
    i++
}

> 0 : 1
1 : 2
2 : 3
3 : 4
4 : 5
5 : 6
6 : 7
7 : 8
8 : 9
9 : 10
10 : 11
11 : 12
12 : 13
13 : 14
14 : 15

while 반복문은 조건에 큰 비중이 있을 때 사용하는 것이 좋다. ' 특정 시간동안 어떤 데이터를 받을 때까지 ' 혹은 ' 배열에서 어떠한 요소가 완전히 제거될 때까지 ' 등 조건을 기반으로 사용하는 반복문에 while 반복문을 사용한다.

break 키워드

break 키워드는 조건문이나 반복문을 벗어날 때 사용하는 키워드이다.

for(let i = 0; true; i++){
    alert(i + '번째 반복문입니다')


    const isContinue = confirm('계속 하시겠습니까?')
    if(!isContinue){
        break
    }
}

alert('프로그램을 종료합니다')

confirm 함수를 사용해서 '계속 하시겠습니까?' 라는 알림창이 뜨게 했고 확인 버튼을 누르게 되면 true로 변환되고 논리 부정 연산자를 통해 false로 바뀌게 된다. 반대로 사용자가 취소 버튼을 클릭하면 break 키워드가 실행되어 반복문이 종료된다.

continue 키워드

continue 키워드는 반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행한다.

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

continue 키워드를 만나면 바로 다음 반복 작업으로 넘어가므로 위 코드에서는 결과가 출력되지 않는다.

let output = 0 

for(let i = 0; i <= 10; i++){
    if(i % 2 === 1){
        continue
    }
    output += i
}

console.log(output)

위 코드는 0부터 10까지 짝수 합을 구하는 코드이다.

중첩 반복문

let output = ''

for(let i = 0; i < 10; i++){
    for(let j = 0; j < i+1; j++){
        output += '*'
    }
    output += '\n' 
}

console.log(output)

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

output 변수에 빈 문자열을 할당한다. for 반복문 안에 for 반복문을 중첩해서 사용했는데 for문 안에 반복 횟수를 볼 줄 안다면 코드 해석이 용이하다. \n 은 정렬 기능을 가지고 있다.

let output = ''

for(let i = 0; i < 10; i++){
    for(let k = 0; k < 9 - i; k++){
        output += ' '
    }
    for(let j = 0; j < 2*i+1; j++){
            output += '*'
    }
    output += '\n' 
}

console.log(output)

위 코드를 실행하면 이와 같은 결과물이 출력되게 된다.

피라미드 모양을 만들기 위해 공백을 위한 for 문을 하나 더 추가했다.

i = 0 일때 for(let k = 0 ; k < 9 - i ; k++) 에서 k < 9 가 되기 때문에 중괄호 안의 내용, 즉 띄어쓰기를 9번 반복하게 된다.

마찬가지로 for(let j = 0; j < 2*i+1; j++)에서는 j < 1 이 되기 때문에 중괄호 안의 내용, 즉 별을 한번 반복하게 된다.

챕터 4-2 확인 문제

let output = 1

for(let i = 1; i <= 100; i++){
    output *= i
}

console.log(output)

위 코드는 1부터 100까지의 숫자를 곱한 값을 구하기 위한 코드이다.

변수 < (반복 횟수) 임을 기억하자

let output = ''

for(let i = 0; i < 6; i++){
    for(let j = 0; j < 6-i; j++){
        output += ' '
    }
    for(let k = 0; k < 2*i+1; k++){
        output += '*'
    }
    output += '\n'
}
for(let i = 0; i < 7; i++){
    for(let j = 0; j < i; j++){
        output += ' '
    }
    for(let k = 0; k < 2*(6 - i)+1; k++){
        output += '*'
    }
    output += '\n'
}
console.log(output)

똑같은 형태의 for 반복문을 두개 사용하여 뒤집었다. i가 순차적으로 1씩 증가한다는 점과 반복 횟수를 잘 활용하는 것이 중요하다.

'Record > TIL' 카테고리의 다른 글

TIL 20230313(온보딩 6일차) (0)	2023.03.15
TIL 2023.03.10(온보딩 5일차) (0)	2023.03.11
TIL 2023.03.08(온보딩 4일차) (0)	2023.03.10
TIL 2023.03.07(온보딩 2일차) (0)	2023.03.07
TIL 2023.03.07(온보딩 1일차) (0)	2023.03.07

개발자로서 한걸음

TIL 2023.03.08(온보딩 3일차)

배열 (array)

자료의 비파괴와 파괴

챕터 4-1 확인 문제

for in 반복문

for of 반복문

for 반복문

while 반복문

break 키워드

continue 키워드

중첩 반복문

챕터 4-2 확인 문제

'Record > TIL' 카테고리의 다른 글

댓글

티스토리툴바

TIL 2023.03.08(온보딩 3일차)

배열 (array)

자료의 비파괴와 파괴

챕터 4-1 확인 문제

for in 반복문

for of 반복문

for 반복문

while 반복문

break 키워드

continue 키워드

중첩 반복문

챕터 4-2 확인 문제

'Record > TIL' 카테고리의 다른 글

관련글

댓글

티스토리툴바