🪵배열(Array)

• 점차 늘어나는 데이터들을 주제별로 수납상자에 정리해둔 것을 배열(array)이라 한다.
• 배열의 문법과 성격을 살펴보자

🌳배열의 문법(Array's Syntax)

• 문자는 ""(따옴표)안에 표시된다.
• 배열은 안에 나열된다.
• 나열은 ,로 나열된다.
• 배열이라는 데이터타입에 변수를 선언한다.

<script>
  var word = ["hi", "velog", "let's study"];
</script>

🌱 배열의 index 가져오는 법

• 1,2번째 index 값 불러오기
• 우리는 순서를 1부터 나열하지만 컴퓨터는 순서를 0번쨰부터 나열한다.

<script>
  var word = ["hi", "velog", "let's study"];
  document.write([0]);
  document.write([1]);
</script>

🌱 배열 내 갯수 확인하기

• google에 javascript array count검색하기
• 변수명.length;를 입력하면 배열내 몇개의 값이 있는지 출력되는 것을 확인할 수 있다.

var fruits = ["apple", "banana", "kiwi"];
fruits.length; //출력값 3

🌱 배열 내 index 추가하기

• google에 javascript array add data검색하기
• 변수명.push("str");를 입력하면 배열값이 추가된다.
• 변수명.length; 프로퍼티를 활용해 잘 추가됐는지 확인할 수 있다.

var fruits = ["apple", "banana", "kiwi"];
fruits.push("Orange");
fruits.length; // 출력값 4

• 그 외 변수 첫번째에 삽입하기, 가운대 삽입하기 등은 구글링을 통해 더 공부하며 찾을 수 있다.

🪵반복문(Loop)

• 순서대로 실행되는 프로그램의 실행 순서 흐름을 제어하는 제어문

🌳while문(){}

• ()안에 불리언타입의 데이터 타입이 들어가는데 ()안의 값이 true이면 {}안의 값이 실행되고 다시 ()값이 true인지 확인하다.
• 반복문에서는 언제 종료될 것인지 지정해줘야 한다.
• ()안에 값이 false가 되면 while문 다음 코드가 실행된다.
• 반복문을 while을 적기전 반복할 횟수정해줄 변수를 선언해준다.

<ol>
  <script>
    var fruits = ["apple", "mangga", "peaches"];
    var i = 0;
    while (i < 3) {
      document.write("<li>" + fruits[i] + "</li>");
      i = i + 1;
    }
  </script>
</ol>

🪵배열과 반복문(Array & Loop)

• 데이터가 바뀌었다고 로직을 바꾸는 일이 없도록하자
• 과일 이름을 목차형태로 나열해보자

<ol>
  <script>
    var fruits = ["apple", "peaches", "banana", "kiwi", "mangga"];
    var i = 0;
    while (i < 5) {
      document.write("<li>" + fruits[i] + "</li>");
      i = i + 1;
    }
  </script>
</ol>

• while()안에 로직은 처음 데이터에 맞춰 5로 지정해놓을 경우 fruits라는 배열에 index가 추가되거나 삭제되면 배열안에있는 index가 5만큼만 출력되어, 다 출력되지 않거나, undefined로 출력된다.
• 이걸 방지하기 위해 str.length라는 프로퍼티를 사용한다.

<ol>
  <script>
    var fruits = ["apple", "peaches", "banana", "kiwi", "mangga"];
    var i = 0;
    while (i < fruits.length) {
      document.write("<li>" + fruits[i] + "</li>");
      i = i + 1;
    }
  </script>
</ol>

• 각 과일에 링크를 달아주고싶다면 목차 하나하나 바꿀 필요없이 document.write();안에있는 데이터만 바꿔주면 된다.

var fruits = ["apple", "peaches", "banana", "kiwi", "mangga"];
var i = 0;
while (i < fruits.length) {
  document.write('<li><a href = "http://a.com' + fruits[i] + '">' + fruits[i] + "</a></li>");
  i = i + 1;
}