배열에 요소 추가 & 제거하기

 

배열에 요소를 추가하거나 제거하는 방법에는 여러 가지 방법이 있습니다. 

 

하나씩 정리하도록 하겠습니다.

 

 

push()

const hobbies = ["Sports", "Cooking"];

hobbies.push("Reading");

console.log(hobbies); // ['Sports', 'Cooking', 'Reading'] 출력

push()를 사용하면 배열의 마지막에  새 요소를 추가합니다.

 

 

unshift()

const hobbies = ["Sports", "Cooking"];

hobbies.unshift("Reading");

console.log(hobbies); // ['Reading', 'Sports', 'Cooking'] 출력

새 요소를 배열의 마지막이 아니라 배열의 맨 앞쪽에 추가하고 싶다면 unshift()를 사용하시면  추가한 요소 "Reading"이 배열의 맨 앞쪽에 위치하게 됩니다.

 

 

 

 

pop()

const hobbies = ["Sports", "Cooking", "Reading"];

hobbies.pop(); // 제일 마지막 요소 제거

console.log(hobbies); // ['Sports', 'Cooking'] 출력

pop()을 사용하면 배열의 마지막 요소를 삭제할 수 있습니다. 

 

const hobbies = ["Sports", "Cooking", "Reading"];

const poppedValue = hobbies.pop(); // 상수 poppedValue에 ['Sports', 'Cooking'] 참조값 할당

위의 코드 예시처럼 제거한 값을 상수나 변수에 참조값을 할당하여 사용하실 수도 있습니다.

 

 

 

shift()

const hobbies = ["Sports", "Cooking", "Reading"];

hobbies.shift(); // 맨 앞 요소 제거

console.log(hobbies); // ['Cooking', 'Reading'] 출력

shift()를 사용하면 맨 앞에 있는 요소를 제거할 수 있습니다. 

 

 

 

 

push()와 unshift()의 배열의 길이 반환

const hobbies = ["Sports", "Cooking", "Reading"];

const unshiftedValue = hobbies.unshift("Coding");

console.log(unshiftedValue); // 4 출력

 

const hobbies = ["Sports", "Cooking", "Reading"];

const pushedValue = hobbies.push("Coding");

console.log(pushedValue); // 4 출력

push()와 unshift()를 사용한 것을 상수나 변수에 할당하면 새로운 배열의 길이인 숫자를 반환합니다. 

 

 

 

 

unshift()와 shift()

shift()는 배열의 모든 요소를 왼쪽으로 한 자리씩 이동시키기 때문에 shift()를 사용하면 첫 번째 요소가 제거되는 것입니다. 

 

반대로 unshift()는 모든 요소를 오른쪽 끝으로 이동시킵니다.

const hobbies = ["Sports", "Cooking"];

hobbies.unshift("Reading");

즉 unshift()를 이용해 값을 넣게 되면 첫 번째 요소에 있는 'Sport'를 두 번째 요소로 보내고, 두 번째 요소에 있는 'Cooking'을 세 번째 요소로 보냅니다. 

 

이렇게 되면 첫 번째 요소에는 빈 문자열이 저장되어 있게 되는데 이 빈 문자열에 'Reading'이 저장되게 되는 것입니다.

 

const hobbies = ["Sports", "Cooking", "Reading"];

hobbies.shift();

shift()는 반대로 생각하시면 됩니다.

 

첫 번째 요소에 두 번째 요소인 'Cooking'을 보내고, 두 번째 요소에 세 번째 요소인 'Reading'을 보내게 됩니다.

 

이렇게 기존의 첫 번째 요소였던 'Sports'는 제거되게 됩니다.

 

 

 

 

정리하자면 unshift()와 shift()는 배열의 모든 요소에 영향을 미치며 모든 요소를 이동시킵니다.

 

또한 push()나 pop() 보다 실행이 느립니다.

(push()나 pop()은 배열의 마지막만 건드리고 다른 요소는 건드리지 않기 때문입니다.)

 

 

 

 

만약 배열의 다른 위치에 요소를 추가하거나 조작하려면 배열의 인덱스에 접근하는 방법을 이용하시면 됩니다.

let hobbies = ["Sports", "Cooking", "Reading"];

hobbies[1] = "Coding"; // "Cooking"을 "Coding"으로 교체

console.log(hobbies); // ['Sports', 'Coding', 'Reading'] 출력

위의 예시 코드처럼 배열의 인덱스로 접근하여 값을 교체할 수 있습니다.

 

 

 

let hobbies = ["Sports", "Cooking", "Reading"];

hobbies.splice(1, 0, "Good food");

console.log(hobbies); // ['Sports', 'Good food', 'Cooking', 'Reading'] 출력

배열의 다른 위치에 요소를 추가하려면 splice() 메서드를 사용하시면 됩니다.

 

splice()를 사용하면 원하는 위치에 값을 추가할 수 있습니다.

 

splice()의 첫 번째 인자는 위치시킬 배열의 인덱스입니다. 위의 코드에서는 1이니 인덱스가 1인 위치에 값을 추가되었습니다.

 

 

 

splice()