[JavaScript] 배열(1) - 배열 생성, FOR 문, 반복문으로 사용되는 forEach(), 이벤트 처리

1.  배열 생성하기

배열도 객체이며,

배열을 생성하는 방법은 아래와 같이 2가지가 있다.

   1.   const arrFruit1 = new Array();  

   2.   const arrFruit1 = [ ];  

 

const arrFruit1 = [];   // 배열도 객체이다. 빈배열을 만들어준다.
 // 또는	
const arrFruit1 = new Array();  // 배열도 객체이다. 빈배열을 만들어준다.

---

2.  HTML 태그 만들기

 말 그대로 <script> 태그 내 HTML 를  작성하면 된다.

 <ol> 태그 안에 <li> 태그가 있는 구조이다. 그것을 변수 html 로 묶어준다.

 대괄호 { } 안을 벗어나면 코드는 소멸되기 때문에, 타입은 var, const, let 모두 상관없다.

 

   1. FOR 문 방식

const arrFruit1 = ["사과", "딸기", "메론", "참외", "수박"];

let html = `<ol>`;  // <ol> 태그를 만든다.

for(let item of arrFruit1) {   // {} 를 벗어나면 소멸된다.
    html += `<li>${item}</li>`; 
}// end of for---------------------------

html += `</ol>`;   // <ol> 태그를 닫아준다. 태그 닫을시 += 를 주의하자.

 

   1. 배열명.forEach(function(item, index, array){ }); 방식

const arrFruit1 = ["사과","딸기","메론","참외","수박"]; 

html = `<ol>`;   // <ol> 태그를 만든다.

    arrFruit1.forEach(function(item, index, array) { // item 은 배열의 요소(배열값)로 String 타입, index 은 배열의 인덱스번호
			html += `<li>${item}</li>`;	
	});

html += `</ol>`;  // <ol> 태그를 닫아준다.

---

3.  자바스크립트 FOR 문

   1. for(var i=0; i<arrFruit1.length; i++) { }  :  자바와 유사한 일반 FOR 문 방식이다.

                                                                           타입은 var, const, let 모두 상관없다. (주로 const를 사용함)

   2. for(var i=0; i<arrFruit1.length; i+=1) { }  : 자바와 유사한 일반 FOR 문 방식이다.

                                                                            i++ 대신 i+=1 을 사용했다.

   3. for(let item of arrFruit1) { } : 자바의 확장 FOR 문과 유사한 방식이다.(item은 let 타입의 배열변수명)

       for(let item in arrFruit1) { }

    ※ [참고] 
     for(.. of ..) 는 배열값을 가져올때 사용하는 것이고, 배열값(배열의 요소)이 출력된다.   

      예: 사과,딸기,메론,참외,수박
     for(.. in ..) 는 객체의 속성목록을 가져올때 사용하는 것이다.  배열의 inedex 번호가 출력된다.  

      예: 0 1 2 3 4 5 ....
    배열은 객체로 배열의 속성은 바로 인덱스번호이다. 따라서, of 대신에 in을 사용하면 배열요소의 인덱스번호가 나온다. 

for(var i=0; i<arrFruit1.length; i++) {
        html += `<li>${arrFruit1[i]}</li>`;   // <ol></ol> 안에 <li></li> 태그가 있는 구조
    }

// 또는
for(var i=0; i<arrFruit1.length; i+=1) {
    html += `<li>${arrFruit1[i]}</li>`;      // <ol></ol> 안에 <li></li> 태그가 있는 구조
} 
    
// 또는	
for(let item of arrFruit1) { // String str : arrFruit1 의 자바와 비슷한 확장된 for 문 형태이다. item 은 let 타입의 배열변수명이다. 

// [참고]  
// for(.. of ..) 는 배열값을 가져올때 사용하는 것이고,          ==> 배열값(배열의 요소)이 출력된다.   예: 사과,딸기,메론,참외,수박
// for(.. in ..) 는 객체의 속성목록을 가져올때 사용하는 것이다.  ==> 배열의 inedex 번호가 출력된다.  예: 0 1 2 3 4 5 ....
// 배열도 객체인데 배열의 속성은 바로 인덱스번호 이다. 그래서 of 대신에 in을 사용하면 배열요소의 인덱스번호가 나온다.

 

---

4.  배열명.forEach(function(item, index, array){ });

 자바스크립트에서 사용하는 반복문이다. 

 

** 자바스크립트의 반복문 :   배열명.forEach();

     jQuery의 반복문 :  반복문 $("선택자").each(); 

 

• item - 현재 처리중인 배열의 각 요소(배열값).  배열은 모두 string 타입이다.
• index - 처리중인 요소의 인덱스번호. 생략가능하다(선택가능). 
• array - forEach()가 적용되고 있는 해당 배열 즉, 자기자신.  생략가능하다(선택가능). 

arrFruit1.forEach(function(item, index, array) { 
    html += `<li>${item}</li>`;	
});

 

---

※ 화살표함수(Arrow function)란 ?

배열명.forEach(function(item, index, array){ }); 에서

위의 코드를 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다.

 

   1. index 와 array 는 생략 및 function 대신 화살표(=>)를 사용

arrFruit1.forEach((item) => { html += `<li>${item}</li>`;});

   2. 위의 1번 방식에 추가하여 ( ) 와 { } 를 생략

       ( ) 안에 파라미터가 1개이고,  { } 안에 처리해야할 문항이 1개라면,   ( ) 와  { } 모두 생략가능하다.

arrFruit1.forEach(item => html += `<li>${item}</li>`); // 파라미터가 1개와 처리해야할 문항이 1개라면, () 와 {} 생략가능하다.
    // 파라미터가 1개 밖에 없으면 ()를 생략할 수 있고,
    // 처리해야할 내용이 1개 밖에 없으므로 { }를 생략할 수 있다.

---

5.  함수표현식 VS. 함수선언식

배열에 있는 내용을 특정 엘리먼트속에 보여주는 함수 만들기함수표현식과 함수선언식 두가지 방식이 있다.

   1.  함수표현식

        const 변수 = function () { }

      : 함수표현식은 변수로 저장될 수 있다. 해당 변수에 저장된 함수는 함수명 없이 변수명으로 호출하여 사용할 수 있다.

         인터프리터가 해당 코드 문항에 도달할 때만 로드된다. 가독성이 더 높다는 장점이 있다. 호이스팅 되지 않는다.

const func_display_1 = function(arr, elem) {  // arr => 만들어진 배열 중 하나의배열을 파라미터 사용한다.  elem => 어떤 엘리먼트(배열요소)를 잡을 것인지 보여준다.
		
    let html =`<ol>`;                         // {} 안에서만 사용되고, 밖을 나가면 소멸된다. ==> 따라서 html =`<ol>`; 대신 let html =`<ol>`; 로 입력한다.

        for(let item of arr) {                // 입력받은 배열의 변수명을 item 으로 한다. item 의 배열값(배열의 요소)를 끄집어낸다.
            html += `<li>${item}</li>`;
        }// end of for----------------------

    html += `</ol>`;  // <ol> 태그를 닫아준다.
    elem.innerHTML = html;
};

위의 코드에서 function 키워드를 생략할 수 있다.

const func_display_1 = (arr, elem) => {  // arr => 만들어진 배열 중 하나의배열을 파라미터 사용한다.  elem => 어떤 엘리먼트를 잡을 것인지 보여준다.
		
    let html =`<ol>`;                    // {} 안에서만 사용되고, 밖을 나가면 소멸된다. ==> 따라서 html =`<ol>`; 대신 let html =`<ol>`; 로 입력한다.

        for(let item of arr) {           // 입력받은 배열의 변수명을 item 으로 한다. item 의 배열값(배열의 요소)를 끄집어낸다.
            html += `<li>${item}</li>`;
        } // end of for----------------------

    html += `</ol>`;  // <ol> 태그를 닫아준다.
    elem.innerHTML = html;  
};

 

   2.  함수선언식

         function 함수이름() { }

      : 함수선언식은 코드가 실행되기 전에 로드된다.  호이스팅 된다.

         ※ 호이스팅 : 선언된 변수나 함수를 코드의 가장 상단으로 끌어올리는 것을 의미한다.

function func_display_2(arr, elem) {
		
    let html =`<ol>`;              // {} 안에서만 사용되고, 밖을 나가면 소멸된다. ==> 따라서 html =`<ol>`; 대신 let html =`<ol>`; 로 입력한다.

    for(let item of arr) {         // 입력받은 배열의 변수명을 item 으로 한다. item 의 배열값(배열의 요소)를 끄집어낸다.
        html += `<li>${item}</li>`;
    } // end of for---------------------- 

    html += `</ol>`;              
    elem.innerHTML = html;
}

---

6.  이벤트 처리

 ※ 이벤트(event)란

 : 웹페이지 상 마우스 동작, 텍스트 작성, 요소 클릭 등의 특정 동작이 발생하여 웹 브라우저에서 알려주는 것이다.

 ※ 이벤트핸들러(event handler)란

  : 특정 요소에서 발생하는 이벤트를 처리하기 위해 이벤트핸들러(event handler) 라는 함수를 작성하여 연결한다.

    연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트핸들러를 실행한다.

 

 순서는 다음과 같다.

 1. 이벤트 소스 잡기

     const Id명 = document.getElementById("Id명");  

    :  id = "btnLastAdd" 인 button태그를 누르면, 이벤트가 실행되도록 한다.

 

 2. 클릭이벤트 생성하기 (2가지 방법) 

  ① Id명.onclick = function() { } 
  ② Id명.addEventListener('click', function() { }

   :  '(on)click' 클릭한다면, function()이 처리된다.

 

 3. 이벤트핸들러 구현하기 (2가지 방법) 

  ① const addVal =  document.querySelectorAll("Id명"). value; 
  ② const addVal = document.getElementById("Id명"). value; 

   : value 는 html 부분에서 어떤 태그로 id속성을 잡았느냐에 따라 아래와 같이 바뀐다.

      input 태그일 경우 =>  .value
      span, div 태그일 경우 =>   .innerHTML(innerText)

 

   ※ return;  : 종료

// 1. 이벤트 소스 잡기
const btnLastAdd = document.getElementById("btnLastAdd");    // (button태그) => id = "btnLastAdd" 에 해당하는 버튼을 누르면 실행되게 한다.

// 2. 클릭이벤트 생성 및 이벤트핸들러 구현하기   ==>  func_display_1 와 func_display_2 에 전부 추가하기
// btnLastAdd.onclick = function() {}
// 또는
btnLastAdd.addEventListener('click', function() {            // 'click' 클릭한다면, function()이 처리된다.
    // document.querySelectorAll()
    // 또는
    const addVal = document.getElementById("addVal").value;  // (input태그) => input 태그는 전부 .value 
                                                             // 	       span, div 태그는 .innerHTML(innerText)

    if ( addVal.trim() == "" ) {   // "문자열".trim(); 은 문자열의 좌,우 공백이 있으면 좌,우 공백을 모두 제거해주는 것이다.

     //	alert("과일명을 입력하세요!!");  // 자바의 try~catch 출력문과 비슷하다.	
        document.getElementById("error_addVal").innerHTML = "[경고]과일명을 입력하세요!!";  // 만약에 trim() 즉, 텅 비거나 공백이 있다면, "[경고]과일명을 입력하세요!!" 출력한다.
        return;  // 종료
    }
    else {
        document.getElementById("error_addVal").innerHTML = "";  // 경고문을 입력하지 않는다.

        arrFruit1.push(addVal); 
        arrFruit2.push(addVal); 
        // 배열명.push(); 은 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환해줌.

        func_display_1(arrFruit1, document.getElementById("fruitDisplay1"));  // 함수 표현식(div 태그에서 실제로 보여주는 것).  위에서 만든 func_display_1 함수에 대입한다.// arr == arrFruit1    elem == document.getElementById("fruitDisplay1")
        func_display_2(arrFruit2, document.getElementById("fruitDisplay2"));  // 함수 선언식(div 태그에서 실제로 보여주는 것).  위에서 만든 func_display_2 함수에 대입한다.// arr == arrFruit1    elem == document.getElementById("fruitDisplay1")
    }
});