Javascript(어레이) / 자바스크립트 어레이 개념 정리

Javascript(어레이)

Array

어레이는 일련의 자료들을 정렬 한것이다. 어떠한 데이터 타입이라도 올 수 있다.

예시

let concepts = ['creating arrays', 'array structures', 'array manipulation'];

Array 만들기 (array literal)

const hobbies = ['nothing', 'nothing', 'nothing'];
console.log(hobbies) ;

// ['nothing', 'nothing', 'nothing'] 출력

다른방법

const classArray = new Array(0, 1, 2, 3);

Array에 접근하기

어레이는 zero index 를 사용한다. 제일 처음오는게 0번으로, 어레이이름[번호] 식으로 호출한다.

어레이 안의 요소들 갯수보다 더 큰 숫자를 참조하려고하면 ‘undefined’가 반환된다.

const hello = 'Hello World';
console.log(hello[6]);
// Output: W

Array 수정

let seasons = ['Winter', 'Spring', 'Summer', 'Fall'];
 
seasons[3] = 'Autumn';
console.log(seasons); 
//Output: ['Winter', 'Spring', 'Summer', 'Autumn']

let 과 const 를 사용해서 array를 변수에 할당하면, 기본적으로 알고있던 것과는 다르게 const 내의 어레이도 수정은 가능하다. 다만 let은 수정 및 새로운 어레이 할당이 가능하고 const는 그건 불가능하고 안에 값을 수정하는 정도만 가능한 것으로 이해함 .

.length property / .push() Method / The .pop() Method

const newYearsResolutions = ['Keep a journal', 'Take a falconry class'];
 
console.log(newYearsResolutions.length);
// Output: 2

const itemTracker = ['item 0', 'item 1', 'item 2'];
 
itemTracker.push('item 3', 'item 4');
 
console.log(itemTracker); 
// Output: ['item 0', 'item 1', 'item 2', 'item 3', 'item 4'];

const newItemTracker = ['item 0', 'item 1', 'item 2'];
 
const removed = newItemTracker.pop();
 
console.log(newItemTracker); 
// Output: [ 'item 0', 'item 1' ]
console.log(removed);
// Output: item 2

.pop은 좀 특이한 것 같다. 일단 어레이의 맨 뒤 요소를 지우는 것은 기본으로 하고, 어레이의 가장 뒤의 값을 반환하는 것도 한다. 그래서 위 예시에서 어레이 자체를 출력해보면 맨 뒤가 지워진 어레이가 나오고 , 팝을 붙인 애를 할당해서 출력해보면 item2만 나온다.

더 많은 Array method들

코드카데미 문서 링크

위 예시는 어레이를 변경하는 메소드들인데, 아닌 경우도 많다.

다른 메소드들 중 많이 쓰이는 것들은

.join() .slice(), .splice(), .shift() .unshift() .concat()

등이 있다.

.shift() 가장 앞 요소를 제거

.unshift(내용) 가장 앞에 내용에 들어가는 것을 추가

.indexOf(내용) 내용이 어레이의 몇 번째 인덱스에 위치해있는지 반환

.slice() 적용된 어레이의 선택된 요소들을 추가한 copy본을 만든다.

array.slice(start, end);

--- 아래는 예시 ---
const weekDays = [
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday',
  'Sunday',
];

//각각 슬라이스 내에 양수, 음수 , 한개 , 0개 를 입력했을 때 

const outOutOffice = weekDays.slice(1, 4);

console.log(outOutOffice);
// Output: ['Tuesday', 'Wednesday', 'Thursday']

const outOutOffice = weekDays.slice(-6, -3);

console.log(outOutOffice);
// Output: ['Tuesday', 'Wednesday', 'Thursday']

const weekend = weekDays.slice(5);

console.log(weekend);
// Output: ['Saturday', 'Sunday']

const anotherWeek = weekDays.slice();

console.log(anotherWeek);
// Output: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']

---

Arrays and Functions

함수 내부에 함수 밖에있었던 어레이를 전달하여 수정을 가하면, 함수 바깥에서도 그 수정이 유지된다. 이것을 pass by reference 라고 한다.

const flowers = ['peony', 'daffodil', 'marigold'];
 
function addFlower(arr) {
  arr.push('lily');
}
 
addFlower(flowers);
 
console.log(flowers); // Output: ['peony', 'daffodil', 'marigold', 'lily']

• const에 array 수정이 가능한 것은 왜그렇지?
• const가 담고 있는 것은 array 자체가 아니라 array를 참조하는 링크? 그래서 어레이 자체를 없애는 것은 안되지만 그 안에 구성요소들을 조작하는 것은 가능하다.

Nested array

const nestedArr = [[1], [2, 3]];
 
console.log(nestedArr[1]); // Output: [2, 3]
console.log(nestedArr[1][0]); // Output: 2

---

 노션으로 작성