Do it! 자바스크립트

7강 배열을 쉽게 다루자! Array 객체

1. Array 객체란?

👉 여러 개의 항목을 하나의 변수에 저장할 때, '배열(Array)'를 사용

• Array 객체로 배열 만들기

var myArray = new Array(); // Array 객체의 인스턴트를 만듭니다.

var numbers = ["one", "two" , "three" , "four"];   // 리터럴을 사용한 배열
var numbers = new Array ("one", "two" , "three" , "four");   // Array 개체를 사용한 배열

• 배열에서 for문 사용하기

var seasons = ["봄","여름","가을","겨울"]
seasons.length
4

for( var i = 0; i < seasons.length; i++){
	console.log(season[i]);
}
봄
여름
가을
겨울

2. Array 객체의 함수 알아보기

• 둘 이상의 배열을 연결하는 concat( ) 함수

var nums = ["1", "2", "3", "4"];
var chars = ["a", "b", "c", "d"];
nums.concat(chars)
(8) ['1', '2', '3', '4', 'a', 'b', 'c', 'd']
chars.concat(nums)
(8) ['a', 'b', 'c', 'd', '1', '2', '3', '4']

• 배열 요소를 연결하는 join( ) 함수

nums.join()        // ( ) 일때는 그냥 연결
'1,2,3,4'
nums.join("-")     // - 넣었을때는 -으로 연결
'1-2-3-4'

• 새로운 요소를 추가하는 push( ) 함수와 unshift( ) 함수

배열에 맨 끝에 추가하려면 push ( )
배열에 맨 앞에 추가하려면 unshift ( )

var nums = ["1", "2", "3"]
nums.push("4","5")         // 4,5를 추가
5                         // 배열 요소의 개수가 반환
nums
(5) ['1', '2', '3', '4', '5']

nums.unshift("0")          // 0 추가
6
nums
(6) ['0', '1', '2', '3', '4', '5']

• 배열에서 요소를 추출하는 pop( ) 함수와 shift( ) 함수

  맨 뒤에 있는 요소를 추출할 때, pop( )
  맨 앞에 있는 요소를 추출할 때, shift( )

var study = ["html", "css", "java"]
study.pop()
'java'
study
(2) ['html', 'css']


var js = ["es+6","node","react","angular","vue"]
js.shift()
'es+6'

• 원하는 위치의 요소를 삭제하거나 추가하는 splice( ) 함수
  👉 중간 부분의 요소를 추가하거나 삭제, 한꺼번에 2개 이상의 요소를 추출, 삭제 할 때

▪ 인수가 1개일 경우

var numbers = [0,1,2,3,4,5]
numbers.splice(2)            // 인덱스 2(세 번째 요소) 이후 끝까지 삭제
(4) [2, 3, 4, 5]             // 삭제된 요소
numbers
(2) [0, 1]                   // 삭제되고 남은 배열

▪ 인수가 2개일 경우

var study = ["html", "css", "web", "jquery"]
study.splice(2,1)          // 인덱스 2에서 한 개 삭제
['web']                    // 삭제된 요소
study
(3) ['html', 'css', 'jquery']

▪ 인수가 3개 이상일 경우

study.splice(2,1,"js") 
['jquery']                  // 인덱스 2에서 1개 삭제
study
(3) ['html', 'css', 'js']   // 삭제한 자리에 새로운 요소 추가
 
study.splice(2,0,"jquery")  // 인덱스 2에서 삭제 없이 추가
[]                         // 삭제가 없어서 빈 배열
study
(4) ['html', 'css', 'jquery', 'js']    // 인덱스 2자리에 새로운 요소 추가


var chars = ["a", "e", "f"]
chars.splice(1,0,"b","c","d")        
[]
chars
(6) ['a', 'b', 'c', 'd', 'e', 'f']

• 원하는 위치의 요소들을 추출하는 slice( ) 함수

var colors = ["red","green","blue","white","black"]
colors.slice(2)                     // 인덱스 2부터 끝까지 추출
(3) ['blue', 'white', 'black']
colors
(5) ['red', 'green', 'blue', 'white', 'black']    // 원래 배열은 변경되지 않음

var colors2 = colors.slice(1,4)
colors2
(3) ['green', 'blue', 'white']
colors
(5) ['red', 'green', 'blue', 'white', 'black']

3. 여행 준비물 점검 프로그램 만들기

• 점검 목록 프로그램 만들기 - 입력 필드 만들기

	<h2>여행 준비물 점검 목록</h2>
		<form>
			<input type="text" id="item" autofocus="ture">
			<button type="button" id="add" class="addBtn">추가</button>
		</form>
		<div id="itemList"></div>
		<link rel="stylesheet" href="css/input.css">

• 점검 목록 프로그램 만들기 - 항목 추가하기

var itemList = [];
var addBtn = document.querySelector("#add");   // #add인 요소를 가져와 addBtn으로 저장
addBtn.addEventListener("click",addList);      // addBtn을 클릭하면 addList 함수 실행
function addList(){
    var item = document.querySelector("#item").value;
    if (item != null){
        itemList.push(item);    // itemList 배열 끝에 item 변숫값 추가
        document.querySelector("#item").value = "";
        document.querySelector("#item").focus();
    }
}

• 점검 목록 프로그램 만들기 - 화면에 점검 목록 표시하기

    }
    showList();  // 목록을 표시하는 showlist() 함수 실행
}
function showList(){
    var list = "<ul>";           // 목록을 시작하는 <ul>태그 지정
    for (var i=0; i<itemList.length; i++){       // 배열 요소마다 반복
        list += "<li>" + itemList[i] + "</li>";   // 각 요소를 <li>~</li>로 묶음
    }
    list += "</ul>"         // 목록을 끝내는 </ul> 태그 저장
    document.querySelector("#itemList").innerHTML = list;
}

• 점검 목록 프로그램 만들기 - 챙긴 준비물 목록 지우기

var itemList = [];
var addBtn = document.querySelector("#add");   // #add인 요소를 가져와 addBtn으로 저장
addBtn.addEventListener("click",addList);      // addBtn을 클릭하면 addList 함수 실행
function addList(){
    var item = document.querySelector("#item").value;
    if (item != null){
        itemList.push(item);    // itemList 배열 끝에 item 변숫값 추가
        document.querySelector("#item").value = "";
        document.querySelector("#item").focus();
    }
    showList();  // 목록을 표시하는 showlist() 함수 실행
}

function showList() {
    var list = "<ul>";  // 목록을 시작하는 <ul> 태그 저장
    for (var i=0; i<itemList.length; i++) {  // 배열 요소마다 반복 
        list += "<li>" + itemList[i] + "<span class='close' id=" + i + ">X</span></li>";  // 요소와 삭제 버튼을 <li>~</li>로 묶음
    }
    list += "</ul>";   // 목록을 끝내는 </ul> 태그 저장
    
    document.querySelector('#itemList').innerHTML = list;  // list 내용 표시

    var remove = document.querySelectorAll(".close"); // 삭제 버튼을 변수로 저장, 배열 형태가 됨
    for (var i = 0; i<remove.length; i++){           // remove배열의 모든 요소 확인
        remove[i].addEventListener("click",removeList);  // 요소를 클릭하면 removeList() 실행
    }
}
function removeList(){
    var id = this.getAttribute("id");    // this(누른 삭제 버튼)의 id 값 가져와 id 변수에 저장
    itemList.splice(id,1);      // itemList 배열에서 인덱스 값이 id인 요소 1개 삭제
    showList();    // 변경된 itemList 배열을 다시 화면에 표시
}

---

💬 하루 되돌아보기
오늘은 배열을 공부했는데, 여태 했던 부분 중에 제일 이해가 안되고 머리에 안들어왔다.
점검 목록 프로그램 실습 전까지는 하나하나는 이해가 됬지만
점검 목록 프로그램 만드는 부분은 다시 천천히 해보고 이해 시켜야 할 거 같다
약간 멘붕?...ㅠ