j25. 자바스크립트 배열 메서드 1/2

자바스크립트 배열 메서드 1/2

자바스크립트 배열의 강점은 배열 메서드 (array methods) 에 있습니다.

---

toString() 메서드는 배열안의 요소를 콤마로 구분된 문자열로 반환합니다.

자바스크립트 toString() 메서드는 배열 안의 배열값을 콤마로 구분된 문자열로 변환해 줍니다.

<p>toString() 메서드는 배열안의 요소를 콤마로 구분된 문자열로 반환합니다.</p>

<p id="toString1"></p>

<script>
var toString2 = ["t", "o", "S", "t", "r", "i", "n", "g"];
document.getElementById("toString1").innerHTML = toString2.toString();
</script>

결과 : t,o,S,t,r,i,n,g

---

join() 메서드는 배열의 모든 요소를 하나의 문자열로 조합해 줍니다.

그런데 이때, join() 메서드를 사용하면 콤마 대신 다른 문자를 삽입하여, 모든 배열의 요소를 하나의 문자열로 조합할 수 있습니다.

즉 toString() 과 완전히 동일한데, 다만 구문 문자 (separator) 를 지정할 수 있다는 것만 다릅니다.

<p>join() 메서드는 배열의 모든 요소를 하나의 문자열로 조합해 줍니다.</p>

<p id="join1"></p>

<script>
var join2 = ["t", "o", "S", "t", "r", "i", "n", "g"];
document.getElementById("join1").innerHTML = join2.join(" - ");
</script>

결과 : t - o - S - t - r - i - n - g

---

배열에서 요소를 빼거나, 새로운 요소를 추가할 때 매우 쉽습니다.

이것을 팝핑 (Popping) 과 푸싱 (Pushing) 이라고 부르는데, 

팝핑 (Popping) 은 항목을 배열에서 빼내는 것이고, 푸싱 (pushing) 은 배열에 집어 넣는 것입니다.

---

pop 메서드는 배열에서 제거한 항목을 반환합니다.

pop() 메서드는 배열에서 마지막 요소를 제거합니다.

또한 pop() 메서드는 배열에서 제거한 (popped out) 그 값을 반환합니다.

<p>pop 메서드는 배열에서 제거한 항목을 반환합니다.</p>

<button onclick="myPopFunction()">맨 뒤부터 하나씩 popping 합니다.</button>

<p id="pop1"></p>

<script>
var hyundaiPop = ["아이오닉", "아반떼", "싼타페", "에쿠스"];
document.getElementById("pop1").innerHTML = hyundaiPop;

function myPopFunction() {
document.getElementById("pop1").innerHTML = hyundaiPop.pop();
}
</script>

버튼을 클릭할 때마다 하나씩 반환되고, 아무 것도 남지 않으면 "undefined" 를 표시합니다.

---

push 메서드는 배열의 맨 끝에 새로운 요소를 추가하고, 새로운 배열의 길이를 반환합니다.

push() 메서드는 배열의 맨 마지막에 새로운 요소를 하나씩 추가 합니다.

또한 push() 메서드는 새로운 요소를 추가한 후에, 새로운 배열의 길이를 반환합니다.

<p>push 메서드는 배열의 맨 끝에 새로운 요소를 추가하고, 새로운 배열의 길이를 반환합니다.</p>

<button onclick="myPushFunction()">맨 뒤에 새로운 요소를 추가합니다.</button>

<p id="push1"></p>
<p id="push2"></p>

<script>
var hyundaiPush = ["아이오닉", "아반떼", "싼타페", "에쿠스"];
document.getElementById("push1").innerHTML = hyundaiPush;

function myPushFunction() {
document.getElementById("push2").innerHTML = hyundaiPush.push("제네시스");
document.getElementById("push1").innerHTML = hyundaiPush;
}
</script>

---

shift 메서드는 배열에서 첫번째 요소를 제거하고, 모든 다른 요소들을 하나씩 당깁니다.

쉬프팅 (Shifting) 은 팝핑 (popping) 과 동일합니다. 다만, 맨 마지막을 제거하는 것이 아니라, 맨 처음을 꺼냅니다.

shift() 매서드는 첫 번째 배열의 요소를 제거 합니다. 그리고 오든 다른 요소들을 한칸 아래의 인덱스로 "이동" 시킵니다.

<p>shift 메서드는 배열에서 첫번째 요소를 제거하고, 모든 다른 요소들을 하나씩 당깁니다.</p>

<button onclick="myShiftFunction()">shift 메서드로 왼쪽부터 하나씩 제거합니다.</button>

<p id="shift1"></p>

<script>
var hyundaiShift = ["아이오닉", "아반떼", "싼타페", "에쿠스"];
document.getElementById("shift1").innerHTML = hyundaiShift;

function myShiftFunction() {
hyundaiShift.shift();
document.getElementById("shift1").innerHTML = hyundaiShift;
}
</script>

---

unshift 메서드는 새로운 요소를 배열의 시작점에 추가합니다.

반대로 unshift() 메서드는 새로운 요소를 배열의 맨 처음에 추가합니다. 그리고 기존의 요소들은 하나씩 오른쪽으로 이동 (unshifts) 시킵니다.

<p>unshift 메서드는 새로운 요소를 배열의 시작점에 추가합니다.</p>

<button onclick="myUnshiftFunction()">새로운 요소를 배열의 처음에 추가합니다.</button>

<p id="unshift1"></p>

<script>
var hyundaiUnshift = ["아이오닉", "아반떼", "싼타페", "에쿠스"];
document.getElementById("unshift1").innerHTML = hyundaiUnshift;

function myUnshiftFunction() {
hyundaiUnshift.unshift("제네시스");
document.getElementById("unshift1").innerHTML = hyundaiUnshift;
}
</script>

shift() 메서드는 시프트 되어 제거된 (shifted out) 문자를 반환합니다.

반면 unshift() 메서드는 새로운 배열의 길이를 반환합니다.

unshift() 메서드는 IE8 및 그 이하 버전에서는 제대로 동작하지 않습니다. 값이 삽입되기는 하는데 반환되는 값은 배열의 길이가 아니라 "undefined" 를 반환합니다.

---

인덱스 번호 (index number) 로 배열에 접근합니다.

배열 요소들은 자신들의 인덱스 번호 (index number) 를 사용하여 접근 합니다.

배열 인덱스 (indexes) 는 0 부터 시작합니다. [0] 이 맨 처음 배열 요소이고, [1] 이 두번째 요소, [2] 가 세번째 요소 순입니다.

<p>인덱스 번호 (index number) 로 배열에 접근합니다.</p>

<button onclick="myIndexFunction()">배열의 두번째 요소인 아반떼 대신에 제네시스로 교체할 것입니다.</button>

<p id="number1"></p>

<script>
var hyundaiIndex = ["아이오닉", "아반떼", "싼타페", "에쿠스"];
document.getElementById("number1").innerHTML = hyundaiIndex;

function myIndexFunction() {
hyundaiIndex[1] = "제네시스";
document.getElementById("number1").innerHTML = hyundaiIndex;
}
</script>

---

삭제된 요소의 자리는 배열내에 "정의되지 않은 구멍 (undefined holes) 로 남습니다.

자바스크립트 배열은 객체 (objects) 이기 때문에, 각 요소들은 자바스크립트 삭제 연산자 (JavaScript operator delete) 에 의해 삭제 될 수 있습니다.

<p>삭제된 요소의 자리는 배열내에 "정의되지 않은 구멍 (undefined holes) 로 남습니다.</p>

<button onclick="myDeleteFunction()">배열의 두번째 요소인 아반떼를 지운 다음 두번째 요소를 다시 열어보겠습니다.</button>

<p id="delete1"></p>

<script>
var hyundaiDelete = ["아이오닉", "아반떼", "싼타페", "에쿠스"];
document.getElementById("delete1").innerHTML = hyundaiDelete;

function myDeleteFunction() {
delete hyundaiDelete[1];
document.getElementById("delete1").innerHTML = hyundaiDelete[1];
}
</script>

delete 를 사용하면 배열내 "정의되지 않은 구멍 (undefined holes)" 을 남겨두기 때문에, 이렇게 하지 않으려면, pop() 나 shift() 를 사용합니다.

---

splice() 메서드는 배열에 새로운 요소를 삭제 및 추가를 동시에 할 수 있습니다.

splice() 메서드는 배열내 새로운 항목을 추가하는데 사용될 수 있습니다.

<p>splice() 메서드는 배열에 새로운 요소를 삭제 및 추가를 동시에 할 수 있습니다.</p>

<button onclick="mySpliceFunction()">맨 처음에서 1개를 지우고, 2개 를 추가합니다.</button>

<p id="splice1"></p>

<script>
var hyundaiSplice = ["아이오닉", "아반떼", "싼타페", "에쿠스"];
document.getElementById("splice1").innerHTML = hyundaiSplice;
function mySpliceFunction() {
hyundaiSplice.splice(0, 1, "제네시스", "그랜저");
document.getElementById("splice1").innerHTML = hyundaiSplice;
}
</script>

splice(0, 1, "", ""); 에서 첫번째 파라미터 0 은 새로운 요소들이 자르고 추가될 위치를 말합니다. 즉 맨 앞에 추가하겠다는 의미입니다.

그 다음 두번째 파라미터 1 은 먼저 있던 요소들을 몇개를 지울 것이냐 입니다. 즉 1개의 요소는 지우겠다는 의미입니다.

그 다음 "", "" 쌍따옴표 안에 있는 내용들이 바로 새로 추가되는 요소들 입니다.

splice() 메소드를 요소 제거할 때 사용하면, 배열 내에서 "빈공간, holes" 을 남기지 않고 요소를 제거할 수 있습니다.

위의 예에서, hyundaiSplice.splice(0, 1); 로 하면, 맨 처음 요소를 하나 삭제하고 추가 한것은 없으므로, 왼쪽으로 당기게 되어 "빈공간, holes" 이 생기지 않습니다.

---

[광고] Udemy 동영상 강의로 보기