JavaScript 기본 개념 공부 day2(3)

와 오늘 공부해야될 양 왜이렇게 많니.....ㅠㅠㅠㅠ 힘내~~~ 이겨내~~~~~~

1. 배열

---

순서가 있는 컬렉션을 다뤄야 할 때 객체를 사용하면 순서와 관련된 것이 없어서 사용하기가 불편하다. 이때 사용해주는 것이 배열이다. 배열은 [1,2,3,4] 이렇게 사용한다. let arr = new Array() 를 쓰거나 let arr = [] 를 쓰면 빈 배열을 만들 수 있다. 

배열 끝부분 수정하기

pop은 배열의 끝에 있는 요소를 삭제 하며 push는 배열의 가장 끝에 요소를 추가한다.

let fruits = ["사과", "오렌지", "배"];
console.log( fruits.pop() ); 
fruits.push("배");
console.log( fruits );

배열 앞부분 수정하기

shift는 배열의 가장 앞 요소를 삭제하며 unshift는 배열 가장 앞에 요소를 추가한다.

let fruits = ["사과", "오렌지", "배"];
console.log( fruits.shift() ); 
console.log( fruits ); 

fruits.unshift('사과');
console.log( fruits );

push와 unshift는 요소 여러개를 한 번에 추가할 수도 있다.

fruits.push("오렌지", "배");

toString

toString은 쉼표로 구분되어있는 문자열이 반환된다. 아래의 경우 true가 반환된다. 

let arr = [1, 2, 3];
alert( String(arr) === '1,2,3' );

2. 배열과 메서드

---

splice 와 slice

splice는 특정 위치에 있는 요소부터 몇개까지 삭제할 지를 결정해주며 slice는 어디부터 어디까지 삭제할지를 결정해준다.

let arr = ["I", "study", "JavaScript", "right", "now"];
arr.splice(1, 1);
arr.splice(0, 3, "Let's", "dance");
alert(arr.slice(1, 3));

두번째는 0번째부터 3개를 지운 후 "Let's", "dance" 를 추가 하라는 명령어이다. 

concat

기존 배열의 요소를 사용해서 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할 때 사용할 수 있다.

let arr = [1, 2];
console.log(arr.concat([3, 4]))

위와 같은 경우에 arr에 있는 요소와 새로 추가한 요소가 합쳐져서 [1,2,3,4]라는 배열을 만들게 된다. 추가하는 요소가 객체인 경우 객체는 분해되지않고 통으로 복사되어 추가된다. [ 1, 2, { '0': 'something', length: 1 } ] 이런 형태가 된다.

let arr = [1, 2];

let arrayLike = {
  0: "something",
  1:'else',
  [Symbol.isConcatSpreadable]: true,
  length: 2
}; //key값으로 항상 0부터 하나씩 커지는 숫자를 사용해야 한다

console.log(arr.concat(arrayLike))

forEach

forEach는 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 한다. 아래처럼 원하는 함수동작을 작성하면 된다.

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
    console.log(`${item} is at index ${index} in ${array}`);
  });

배열 탐색하기(indexOf, lastIndexOf와 includes)

arr.indexOf(item, from)는 인덱스 from부터 시작해 item(요소)을 찾는다. 요소를 발견하면 해당 요소의 인덱스를 반환하고, 발견하지 못했으면 -1을 반환
arr.lastIndexOf(item, from)는 위 메서드와 동일한 기능을 하는데, 검색을 끝에서부터 시작한다는 점만 다름arr.includes(item, from)는 인덱스 from부터 시작해 item이 있는지를 검색하는데, 해당하는 요소를 발견하면 true를 반환 (위치를 찾고싶은게 아니라 있는지 없는지 찾고싶을때 사용)

find 와 findindex

find는 조건에 맞는 요소를 반환하고 findindex는 조선에 맞는 인덱스를 반환한다.

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];
let user = users.find(item => item.id == 1);
//id 값이 1인 item을 찾아서 변수 user에 넣어라

console.log(user.name);

sort

배열안에 있는 숫자는 문자로 인식하기 때문에 sort를 바로 쓸 수 없다. 

 

let arr = [23,43,56,45]

arr.sort( (a, b) => b - a ); //내림차순
arr.sort( (a, b) => a - b ); //오름차순
console.log(arr)

Object.keys, values, entries

아래와 같은 객체에서 값을 추출할 때 사용합니다.

let user = {
  name: "John",
  age: 30
};

• Object.keys(user) = ["name", "age"]
• Object.values(user) = ["John", 30]
• Object.entries(user) = [ ["name","John"], ["age",30] ]

Object.fromEntries()를 사용하면 배열을 객체로 변환시킬 수 있다.