[부스트코스]자바스크립트의 시작(반복문,배열)

안녕하세요 부스터코스 3기 서포터즈 허브입니다. 🌿

부스터코스란?

커넥트재단은 네이버가 설립한 비영리 교육 재단입니다.
소프트웨어 개발자 양성 교육 프로그램, 부스트코스와 함께
당신의 개발 커리어를 업그레이드하세요!

 

제 포스팅은 강의 내 생각해보기와 수업에서 다루는 코드를 직접 크롬화면에서 확인 해볼 수 있도록 진행합니다. 관련된 개념과 강의는 함께 올려드리는 링크에서 확인해보실 수 있습니다. 

www.boostcourse.org/cs124/joinLectures/52258

자바스크립트의 시작

---

반복문 예고

https://www.boostcourse.org/cs124/lecture/194612

자바스크립트의 시작

반복문이란 같은 작업을 반복적으로 실행해주는 Javascript의 새로운 문법입니다. 예를 들어서 다음과 같은 코드를 볼 수 있습니다. 

var links = document.querySelectorAll('a'); 
var i = 0; 
while (i<links.length) 
{ 
links[i].style.color = 'powerblue'; i=i+1; 
}

먼저 첫 번째 줄에서는 이 페이지의 모든 a 태그를 가져옵니다. 그리고 그 다음줄부터는 반복문을 이용해서 각각의 a 태그들의 color을 powerblue로 바꿔주는 것입니다.

다음 시간부터는 이 코드를 이해하기 위한 강의를 진행할겁니다. 먼저 배열을 배우고, 그 배열을 이용한 반복문을 배워볼겁니다.

---

생각해보기

1. 반복문을 사용했을 때 편리한 상황을 한 가지 생각해보세요.

→ 만약 1억개의 데이터에 접근해야된다고 생각하면 반복문을 사용하여 간편하게 데이터에 접근할 수 있습니다.

 

---

배열

https://www.boostcourse.org/cs124/lecture/194613/

자바스크립트의 시작

배열 (Array)

우리가 집에 있는 물건들을 정리하기 위해서 서랍장이나 상자에 정리해서 넣듯이 프로그래밍에서도 많은 데이터를 종류별로 정리하는 방법이 필요합니다. 즉 배열은 서로 연관된 데이터를 정리해서 담아두는 수납상자라고 생각하시면 됩니다.

그렇다면 배열을 만들기 위해서는 어떤 문법을 사용해야 할지 알아봅시다.

var fruits = ["apple", "banana"];

배열은 다음과 같이 대괄호로 표시합니다. 그리고 이 대괄호 안에 넣을 값들을 콤마(,)로 표시해서 넣어줍니다. 그리고 이를 변수 fruits에 넣어줍니다. 즉 과일을 fruits라는 상자에 넣어준 것이죠.

배열의 값에 접근하기

그렇다면 이렇게 만든 배열에 들어있는 내용을 꺼내기 위해서는 어떻게 해야 할까요? 다음 코드를 실행해봅시다.

document.write(fruits[0]);

이렇게 하면 화면에 apple이 출력되게 됩니다. 0 대신 1을 써주면 banana가 출력됩니다. 즉, 앞에서부터 0번째, 1번째, ... 로 순서를 매겨서 그 번호에 해당하는 값을 출력하는 것이죠.

배열의 길이

다음으로는 배열의 길이를 출력해봅시다. 다음 코드를 실행하면 어떻게 될까요?

document.write(fruits.length);

배열 뒤에 .length를 쓰면 그 배열의 길이를 나타내줍니다. 이 때 출력값은 2가 되죠. 즉 배열에서 내용을 꺼낼 때에는 0부터 순서를 매기지만, 길이를 출력할 때에는 1부터 세서, 2개의 값이 있으니 2를 출력해주는 것이죠.

배열에 값 추가하기

이제 이 배열에 새로운 값을 추가해봅시다. 다음 코드를 실행하면 됩니다.

 

fruits.push("coconut");

이렇게 하면 fruits라는 배열의 맨 뒤에 "coconut"이라는 값을 추가해줍니다. 즉, fruits는 ["apple", "banana", "coconut"]이 되는 것이죠.

 

이 외에도 Javascript에서는 배열에 대한 다양한 함수들이 있습니다. 더 알아보기 위해서는 인터넷에 "Javascript array" + "원하는 키워드" 로 검색해보면 되겠죠?

---

생각해보기

1. 다음과 같은 코드를 실행했을 때 화면에 어떻게 출력될지 생각해보세요.

var animals = ["ant", "bee"]; animals.push("camel"); document.write(animals[1]);

 2. 배열에서 어떤 값을 삭제하기 위해서는 어떤 코드를 사용하면 될까요? (힌트: Javascript array remove value라고 검색해보세요!)

->delete 메소드를 사용하면 0번째 엘레먼트가 삭제되어 undefined가 되는걸 알 수 있습니다.

delete 메소드를 사용하면 0번째 엘레먼트가 삭제되어 undefined가 되는걸 알 수 있습니다.

 

https://www.w3schools.com/js/js_array_methods.asp

JavaScript Array Methods

그리고 slice()메소를 사용하여도 삭제할 수 있다.

첫번째 파라메터는 위치를 지정하고

두번째 파라메터는 몇개의 엘리먼트를 삭제할 것이란 뜻이다.

---

반복문 

https://www.boostcourse.org/cs124/lecture/194614/

자바스크립트의 시작

반복문이 필요한 이유

다음과 같은 코드를 살펴봅시다.

document.write('<li>1</li>'); 
document.write('<li>2</li>'); 
document.write('<li>3</li>'); 
document.write('<li>4</li>');

이 코드를 실행하면 화면에 1,2,3,4가 순서대로 뜰 겁니다. 각 줄의 코드가 순서대로 실행되는 것이죠. 그런데 이 때 2번과 3번이 반복적으로 여러 번 실행되어야 한다고 생각해봅시다. 그러면 2번과 3번 코드를 여러번 복사, 붙여넣기를 하면 되겠죠. 하지만 반복 횟수가 아주 커진다면 붙여넣기도 힘들고 코드를 수정하기도 힘들 것입니다. 이 때 사용하는 것이 바로 반복문입니다.

반복문

지금부터 while 반복문에 대해서 알아봅시다. while 반복문은 다음과 같이 사용합니다.

while (???) {
document.write('<li>2</li>'); 
document.write('<li>3</li>');
}

이 때 ???에는 if 문에서 살펴본 것과 같이 불리언 데이터 타입이 들어갑니다. 그리고 이 조건이 true라면 중괄호 안의 코드를 실행합니다. 이 코드를 다 실행하고 나면 다시 처음으로 돌아가서 ???에 들어간 불리언을 살펴봅니다. 이 불리언이 false가 될 때까지 반복해서 코드를 실행하는 것이죠.

 

즉 반복문과 조건문은 순서대로 실행되는 프로그램의 실행 흐름을 제어하는 제어문입니다.

그렇다면 이제 while문을 사용해서 아까 살펴본 코드에서 2~3번째 줄을 3번 반복한다고 해 봅시다. 이를 위해서 3번 반복했을 때 조건이 false로 바뀌도록 ??? 안을 채워봅시다. 다음과 같이 나타낼 수 있습니다.

document.write('<li>1</li>');
var i = 0; 
while (i < 3) {
  document.write('<li>2</li>'); 
  document.write('<li>3</li>'); 
  i = i + 1; 
} 
document.write('<li>4</li>');

초기 상태에서 i는 0입니다. 따라서 while 뒤의 괄호 안에 들어있는 i<3은 true가 됩니다. 그러면 코드가 한 번 실행되겠죠. 코드가 실행되면 i = i + 1에 의해서 i의 값은 1이 됩니다. 이 과정을 3번 반복하면 i는 3이 됩니다. 그렇게 되면 i<3이 false가 되고, 반복문이 끝나고 마지막 8번째 줄이 실행되게 됩니다.

---

생각해보기

다음 코드의 실행 결과는 무엇일까요?

var i = 0; 
while (i < 3) { 
	i = i + 2; 
    } 
document.write(i);

첫번째 룹; i = 2;

두번째 룹; i = 4;

i > 3이기 때문에 세번째 룹을 돌지 않고 i의 값이 출력됨을 알 수 있습니다. 

 

---

www.boostcourse.org/

다 함께 배우고 성장하는 부스트코스

github.com/hhhminme

hhhminme - Overview