관리 메뉴

클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지

자바스크립트 기본 문법 13 - 배열 2 : 배열과 반복문의 개념 학습 및 실습 해보기 + 미션 문제 풀기 본문

웹 · 앱 개발/자바 스크립트

자바스크립트 기본 문법 13 - 배열 2 : 배열과 반복문의 개념 학습 및 실습 해보기 + 미션 문제 풀기

huenuri 2024. 11. 19. 11:54

이번 시간에는 배열에 관한 미션 문제들을 풀어보려고 한다.


 

 

 

배열과 반복문 실습 해보기

배열에 저장된 데이터를 반복문으로 출력하는 실습을 진행해본다.

 

1. JS 파일 만들고 HTML 문서로 연결하기


 

 

 

2. for 문과 for-of 문 작성하기

배열로 이름을 받아오고 이것을 for 문으로 돌린다. 수업 시간에는 선생님들 이름을 썼으나 난 그냥 아무 성씨나 써보았다. 그리고 배열을 하나 더 생성한 후 for-of 문으로 item 변수의 값을 출력한다.

 


 

 

 

3. foreach 문 작성하기

배열을 하나 생성하고 forEach 함수를 콜백 함수 구조로 작성한다. 함수 안에 함수가 들어가는 구조라서 Callback 함수라고 한다.

 

 

 

 

콜백 함수는 두번째 매개변수로 인덱스를 받아올 수 있다.

 

 

 

 

 

 

값이 잘 출력되었다.


 

 

 

 

배열과 반복문 개념 학습

 

 

자바에서는 배열의 크기를 넘어가는 값은 할당할 수 없지만, 자바스크립트에서는 알아서 크기를 조정해준다.

 

 

 

 

 

 

 

 

 

 

 

배열과 관련된 반복문은 이렇게 된다. for문은 i를 인텍스로 fruits의 값을 출력했고, for of문은 fruit만으로 출력한 것이다. foreach문은 반복문으로 돌려줄 배열을 가져온 다음에 뒤쪽에 작성한다. 배열 안쪽의 인자를 첫번째 인자로 받아올 수 있고 두번째 인자로 배열 인덱스 값을 받아온다.

 

 

 

 


 

 

 

 

배열과 반복문 미션 문제 풀기

 

 

 

1. JS 파일 만들고 HTML 문서에 연결하기


 

 

 

2. 최대값을 구하는 코드를 작성한다.

첫번째 배열의 값을 최대값 변수에 넣어주고 for 문을 돌려준다. 배열의 인덱스 값과 최대값을 비교해서 그 수가 최대값보다 크면 이 값을 최대값에 넣는다.

 

 

78이라는 값이 잘 출력된다.


 

 

 

3. 문제를 출력할 알림창 만들기

 

최대값이 잘 나왔다.

 


 

 

 

학습을 마치고

배열과 반복문에 관한 공부를 진행했다. 수업을 들으면서 어찌나 졸리던지 잠을 잘까 고민을 하다 그냥 학습을 이어갔다. 새벽에 일찍 일어나기에 아침에 한번 낮잠을 자야 남은 시간을 잘 견딜 수 있는 것 같다. 배열도 무척 어렵게 생각했는데 공부해보니 별로 그렇지 않았다.

이어서 배열 관련 실습을 진행해보겠다.