시대에 뒤쳐진 마케터가 되기 싫어서
마케터지만, 코딩을 공부합니다.
배열(Array)
배열을 우선 간단하게 보자면 아래와 같습니다.
let fruit = ['apple', 'grape', 'strawberry'];위 처럼 하나의 변수에 다양한 값들을 넣을 수 있습니다.
저의 생각 속에서는 배열은 그룹(Group)으로 생각하고 있습니다.
배열 안에 연관된 데이터들을 보관하고 활용한다는 측면에서 마케터로서는 친숙한 그룹을 생각하게 됩니다.
그렇다면 이러한 배열로 원하는 값들을 모아놓다면 활용을 해야합니다.
배열의 값을 활용하기 위해서는인덱스(Index)의 이해가 필요합니다.
인덱스는 배열 안에 있는 값들의 라벨로 볼 수 있습니다.
인덱스는 좌측에서 우측으로 0부터 시작하게 됩니다.
위의 배열에서fruit의 0번째 값은 apple이죠.
그리고 마지막 값인strawberry는 2번째 값입니다.
이러한 배열의 값을 하나하나 불러오는 방법은Array[index]를 활용하면 됩니다.
let fruit = ['apple', 'grape', 'strawberry'];
console.log(fruit[0]);
// apple
// 다른 값이 아닌 0번째 값인 apple만 출력배열을 더 잘 활용하기 위해서는 배열의 메서드를 알아야 합니다.
배열의 메서드
기초적으로는 배열의 값을 추가나 제거를 하는 메서드가 있습니다.
추가와 제거 메서드는 기본적으로pushpop이 있고,
경우에 따라서shift나unshift를 쓸 수도 있습니다.
그것도 아니라면slice를 이용해서 특정 배열의 값을 잘라서 활용할 수도 있죠.
배열의 추가(push, unshift)
만약 배열의 값을 추가하고 싶다면push를 사용할 수 있습니다.
push를 사용하면 기존 배열 뒤에 원하는 값을 추가할 수 있습니다.
만약 배열 앞에 값을 추가하고 싶다면,
unshift를 통해서 배열의 앞에 값을 추가할 수 있습니다.
let fruit = ['apple', 'grape', 'strawberry'];
fruit.push('kiwi'); // 4
console.log(fruit);
// ['apple', 'grape', 'strawberry', 'kiwi']
// 뒤의 'kiwi'가 추가
fruit.push('durian'); // 5
console.log(fruit);
// ['durian', 'apple', 'grape', 'strawberry', 'kiwi']
// 배열 앞에 'durian'이 추가
배열의 삭제 (pop, shift)
배열의 추가가 아니라 이번에 삭제를 하고 싶다면pop과shift를 활용할 수 있습니다.pop은 배열의 뒤의 값을 삭제할 수 있고,
shift는 배열의 앞의 값을 삭제할 수 있습니다.
let fruit = ['durian', 'apple', 'grape', 'strawberry', 'kiwi'];
fruit.pop(); // 'kiwi'
console.log(fruit);
// ['durian', 'apple', 'grape', 'strawberry']
// 배열 뒤의 값인 'kiwi'가 삭제
fruit.shift(); // 'durian'
console.log(fruit);
// ['apple', 'grape', 'strawberry']
// 배열 앞의 값인 'durian'이 삭제
배열의 값을 잘라서 출력 (slice)
위의 배열을 삭제하고 추가하는 것은 앞과 뒤만 됐었는데요.
만약 특정 배열의 값만을 출력하길 희망한다면 slice를 쓸 수 있습니다.
slice는 처음 기재하는 값이 시작점이고,
뒤의 기재하는 값은 마지막점 입니다.
만약 뒤의 값을 기재하지 않으면 시작부터 배열의 마지막까지 출력합니다.
⚠️slice(0.3)으로 할 경우 배열의 인덱스 3번 값까지가 아닌 2번 값까지 출력됩니다.
마지막 값은 이하가 아닌 미만으로 적용됩니다.
⚠️ 또한 아주 중요한 것은 slice를 쓴다고해서 원본의 배열이 변경되지 않는다는 점입니다.
만약 slice로 변경된 배열을 간직하고 싶다면 새로운 변수를 선언해서 할당하면 됩니다.
let fruit = ['durian', 'apple', 'grape', 'strawberry', 'kiwi'];
console.log(fruit.slice(0));
// ['durian', 'apple', 'grape', 'strawberry', 'kiwi']
// 마지막 값을 입력하지 않아서 0번째 값부터 마지막까지 모두 출력
console.log(fruit.slice(0,3));
// ['durian', 'apple', 'grape']
//0부터 3미만까지 출력으로 index 0번부터 2번까지 출력
/* 굳이 추출한 배열을 간직하고 싶다면 ... */
let fruitCopy = fruit.slice(0,3);
console.log(fruitCopy);
// ['durian', 'apple', 'grape']
console.log(fruit);
// ['durian', 'apple', 'grape', 'strawberry', 'kiwi']
배열의 메서드는 이 외에도 많이 있습니다.
필요한 메서드는 MDN에서 찾거나 구글링을 하면서 사용하면 될 것 같습니다.
원래 배열과 객체를 하려고 했는데,
배열만 해도 정말 내용이 많다는 걸 느꼈습니다.