안녕하세요
인포돈입니다.
초보자를 위한 자바스크립트입니다. 코딩 초보자, 일반인, javascript를 처음 접하시는 분들에게 추천드립니다.
시리즈 별로 조금씩 학습해보면 일주일 안에 javascript가 무엇인지 알게 되는 경험을 할 수 있습니다.
지금 바로 시작합니다.
* 참고사항
- 개발환경은 Atom을 기준으로 작성되었습니다.
- 웹 브라우저는 크롬을 기준으로 작성되었습니다.
- javascript 시리즈는 웹에서의 활용을 집중적으로 다루어 나갑니다.
이번 강좌에서 다뤄볼 것은 배열과 반복문입니다.
1. 배열
javascript에서 배열은 무엇이고 또 어떤 역할을 하기 위해서 만들어졌을까요?
비유를 하자면 책이 많아지면 저희는 책꽂이를 사서 책을 정리하듯이 배열도 책들을 모아 넣는 책장이라고 생각해보세요
책들이 많아지는데 따로 수납공간을 마련하지 않으면, 나중에는 감당이 불가능해지게 됩니다.
예제
<html>
<head>
</head>
<body>
<script>
var coworkers = ["info", "don"];
document.write(coworkers[0] + "<br>");
</script>
<script>
coworkers.push("addco");
document.write(coworkers.length);
</script>
</body>
</html>
실행화면
var는 아직까지는 변수 앞에 붙는 것 이 정도로만 생각하시면 됩니다.
여기서 coworkers는 바로 배열이고 info와 don은 책이라 할 수 있죠. coworkers [0]은 바로 info를 가리키고 있고요
그렇다면 여기서 [0]은? 무엇을 의미할 까 아래 표처럼 이해하시면 됩니다.
| coworkers[0] | coworkers[1] |
| info | don |
바로 인덱스를 라고 불리면 컴퓨터에서 인덱스는 0부터 시작합니다. 즉, coworkers인덱스 0에는 info를 가리키고 있는 것이죠
push는 무슨 역할을 할까요 바로 이미 만들어져 있는 배열의 맨 뒤에 addco를 추가하라는 함수입니다.
| coworkers[0] | coworkers[1] | coworkers[2] |
| info | don | addco |
마지막. length는 총 coworkers의 크기를 나타내라는 문법입니다. 3을 의미하게 되겠죠
2. 반복문
<ul>
<script>
document.write('<li>1</li>');
document.write('<li>2</li>');
document.write('<li>3</li>');
document.write('<li>4</li>');
</script>
</ul>해당 코드가 있다고 가정할 께요(해당 코드에 ul과 li는 목록을 나타내는 태그입니다. 지우고 하셔도 상관없습니다.)
해당 코드에서 만약 2와 3이라는 숫자를 반복해서 1억 번을 쓰고 싶다면, 감당이 안될 정도의 코드 양이되겠죠?
이런 문제점을 해결해주는 것이 바로 반복문입니다.
<ul>
<script>
document.write('<li>1</li>');
var i = 0;
while(i < 100){
document.write('<li>2</li>');
document.write('<li>3</li>');
i = i + 1;
}
document.write('<li>4</li>');
</script>
</ul>이렇게 2, 3을 100번 반복할 수 있게 됩니다. 반복문을 사용할 때는 i와 같이 몇 번을 반복할지를 결정하는 변수를 먼저 선언을 하고 사용해야 되는 거 잊지 않으시면 됩니다.
* i < 100 => i가 100보다 작을 때까지 반복해라
* i = i + 1 => 반복문이 1번 실행될 때마다 i가 1식 증가한다.
즉, 해당 반복문은 100번이 실행된다!
3. 배열과 반복문
<ul>
<li>info</li)
<li>don</li)
<li>addco</li)
<li>addco1</li)
</ul>
사용자를 나열하는 코드를 작성한다고 할 때, 만약 사용자가 1억 명이 된다면 저런 코드를 1억 개를 작성해야 합니다. 이럴 때 배열과 반복문을 잘 버무린다면, 엄청난 효율을 보실 수 있습니다 바로 아래 코드처럼요
<script>
var coworkers = ['info','don','addco','addco1']
</script>
<script>
var i =0;
while(i < coworkers.length){
document.write('<li>' + coworkers[i] + '</li>')
i = i + 1;
}
</script>
배열과 반복문의 거의 한 세트처럼 많이 사용하는 문법입니다. 꼭 기억해두고 필요하신 게 있을 때마다 검색해 주시면 됩니다. (배열 = array, 반복문 = repeat)
항상 모르는 코드를 발견하실 때마다 검색 결과는 아는 것보다 검색하는 법을 아는 것이 중요합니다.
절대로 겁내지 마시고 어떻게 검색할까를 먼저 고민해보는 습관을 가져보세요
