● 반복문의 필요성
js의 새로운 문법을 배우기 위해 예제에서 불만족을 찾아보자
링크의 색이 밝은 화면에서는 괜찮지만
어두운 화면에서 보면 잘안보이는걸 발견할수있다
이걸 웹페이지에 있는 모든 링크를 style속성값을 밝혀주는 코딩을 하게 된다면 링크가 있는만큼 반복적인 작업을 해야한다
코드의 양도 늘어나고 유지보수하기 힘들어지니 이때 쓰는 기능이 반복문 이다
● 배열(array)
반복문을 사용하기 위해서는 먼저 배열을 배워야한다
집에있는 사물이 많아질수록 사물을 잘 정리정돈할 필요성이 생기고
필요성에 따라서 수납공간들을 마련하게 된다
코딩도 마찬가지 인데 많은 데이터들을 마주하게 되며
그 데이터들은 각각 성격이 다르다
데이터가 많아짐에 따라 그냥 코딩을 하게되면 너무 복잡해서
코딩을 더 복잡하게 만들지 못하는 감당하기 힘든 상태가 되어버린다
이때 사물이라면 수납함,냉장고 같은 곳에 정리해둔뒤
수납상자, 냉장고 하나만 생각하면 된다
배열이라는것도 이것과 같은 상태라고 생각하자
🔥데이터가 많아짐에 따라 그냥 둘수가 없기 때문에 연관된 데이터를 정리정돈해
담아두는 것을 일종의 수납상자 배열 array이라고 한다!
● 배열의 문법(syntax)
문자는 "" 따옴표로 시작해 따옴표로 끝나고
배열은 [] 대괄호로 시작해 대괄호로 끝나고
안에 값을 적는데 여러개의 값을 적을 수 있다
그리고 값과 값사이는 콤마로 구분한다
["egoing", "leezche"]1 배열을 만들기
배열을 만든다음 이것상태로 쓰기는 불편하기 때문에
변수에 담아주자
var coworkers = ["egoing", "leezche"];coworkers라는 변수에 배열이라는 새로운 데이터 타입이 담겼고
데이터 타입에 coworkers라는 이름을 붙인것이라고도 할수있다
이것은 새로운 수납상자를 사면서 그 안에 물건을 2개 넣어놓은 것 과 같은 상황이다
2 배열의 값을 가져오기
배열을 만들었으니 꺼내오는 방법을 배워보자
첫번째로 들어가있는 데이터를 꺼내고싶다면
document.write(coworkers[0]); 라고 한다면 egoing이 나오게 된다
즉 첫번째 자리에 있는 값은 0번째라는 뜻이다
index 0번은 egoing되고 1번은 leezche가 되게된다
<script>
var coworkers = ["egoing", "leezche"];
</script>
<h2>get</h2>
<script>
document.write(coworkers[0]);
</script>
3 배열에 들어있는 값이 몇개인지 체크하기
검색을 해보자
배열한뒤 .length를 쓰면 되는구나를 찾고 써보자!
<h2>count</h2>
<script>
document.write(coworkers.length);
</script>
리로드 하면 숫자 2가 되는것을 볼수있다
인덱스를 정할 때는 0은 첫번째고 1은 두번째가 된다
개수를 셀 때는 개수를 1부터 세기 때문에
값이 2개라면 length의 값은 2가 된다
4 데이터 추가
length를 체크하기 전에 데이터를 추가하는 방법도 살펴보자
push를 쓰면 추가가 되는것을 확인하고
쓰고 리로드를 하면 length 4가 된다
<script>
var coworkers = ["egoing", "leezche"];
</script>
<h2>get</h2>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
<h2>add</h2>
<script>
coworkers.push('duru');
coworkers.push('taeho');
</script>
<h2>count</h2>
<script>
document.write(coworkers.length);
</script>push는 데이터를 끝에 추가하는 것이고
앞쪽에 추가하고싶거나 중간에 넣고싶으면 검색하면 된다
javascript array 검색한뒤 보면 concat, fill, join, pop 여러가지가 있다
여러가지를 통해 배열이라 하는 수납상자에 데이터를 넣고
빼고 몇개가있는지 알아내고 작업을 처리할 수 있다
