3. 객체 (배열, 함수, 객체 리터럴)

객체 ( object )는 자료형의 일종으로 배열(array), 함수(function), 배열이나 함수가 아닌 객체를 포함한다.
배열이나 함수가 아닌 나머지 객체들에는 객체 리터럴, class등 있다.

const fruits = ['사과', '오렌지', '배', '딸기']; 와 같이 배열을 사용하여 값들을 하나로 묶을 수 있다.
그리고 정리내어 있는 모든내용의 배열은 const로 정의가 되었는데 그 이유는 재할당하지 않는 변수는 const로 선언하는게 좋기때문이다.

<  주의 ! >

• 상단의 arrayOfArray라는 배열의 element(=length)는 총 5개이고
• index는 총 4개가 있다 (index0, index1, index2, index3, index4)

( 배열안에 다른 배열이나 변수를 넣을 수 있음 ex) null, true, undefined 그리고 심지어 빈칸 [] 도 가능! 예를 들면 const arrayOfArray = [[1, 2, 3], [4, 5]]; 그리고 빈값도 유효한 값 이므로 요소 개수를 셀 때 포함 한다.

const arrayOfArray = [[1, 2, 3], [4, 5]];
arrayOfArray[0]; // [1, 2, 3]
참고로, 첫번째는 index 0 번 임을 기억해야 한다. 1번이 아니다.

- const a = 10;

       const b = 20;

       const variableArray = [a, b, 30];

       variableArray[1]; // 20 (b의 값)

1) 배열의 요소(element) 개수 구하기

배열 이름 뒤에 .length 를 붙이면 된다.

- const everything = ['사과', 1, undefined, '배열', null];

console.log(everything.length);

 값은 5개가 나온다. 

cf>  everything[1];  // 1 이다.

2) 배열에 요소 수정 (추가 및 삭제) : target

오늘 배울 모든 배열 요소 수정하는 부분은 아래와 같이 표로 정리해 보았다.
시간이 없을 땐 이 표만 달달달! 하고 보면서 복습하도록 한다 😘

배열에 새로운 element를 추가하고 싶을 땐 target[넣고싶은 위치 index]을 쓰면 된다.
다만! 원래 위치에 있던 elemnet는 삭제된다. (replace의 개념이라 보면된다.)
따라서 추가가 아닌 element를 수정할 때도 사용 된다.

const arr = ['가','나','다','라','마'];
target[0] = '바';
console.log(arr);
< ['바','나','다','라','마'];

결과는 ['바','가','나','다','라','마'];가 아니라 0번째 index의 element 였던 '가'가 사라지고 그 자리에 '바'가 들어온다.

3) 배열에 요소 수정 (추가 및 삭제) : unshift & shift & 메소드 이용하지 않고 추가하기

요소가 없는 배열을 선언해보자.

let zoo = [];

cities 라는 변수에 빈 배열을 할당해주었고 아래와 같이 요소를 하나씩 추가할 수 있다.

zoo[0] = "호랑이"; // ["호랑이"]
zoo[1] = "라이거"; // ["호랑이", "라이거"]
zoo[2] = "토끼"; // ["호랑이", "라이거", "토끼"]

그리고 5번째 요소에 미리 "사슴"을 할당해 보자!

zoo[6] = "사슴";

차례대로 요소를 추가해야할 것 같지만, 이렇게 원하는 위치에 마음대로 요소를 할당할 수 있다.
zoo 를 출력하면 뭐라고 나올까? 추가 되지 않은 index3, index4의 값은 ["호랑이", "라이거", "토끼", undefined, undefined, "사슴"]
undefined로 출력되는 것을 확인 할 수 있다.

이처럼 값을 추가하는 방법으로는 첫번째, index로 접근하여 수정이나 추가
두번째,push, unshift 메소드로 추가하는 방법이 있다는 것을 잊지말자.

.unshift 를 붙이면 새로운 element 가 가장 맨 앞에 추가된다.

- const target = ['나', '다', '라', '마', '바'];

target.unshift('가');

console.log(target);

["가", "나", "다", "라", "마", "바"]

.shift 를 붙이면 가장 앞에 있는 element가 삭제된다.

const target = ['가','나','다','라','마'];
target.shift();
console.log(target);
< ["나","다","라","마"]

4) 배열에 요소 수정 (추가 및 삭제) : push & pop

.push를 붙이면 새로운 element 가 가장 맨 마지막에 추가된다.

const target = ['가', '나', '다', '라', '마'];

target.push('바');

console.log(target);

["가", "나", "다", "라", "마", "바"]

'뭔진 모르지만 새로운 것을 배우지 않고, 그냥 마지막 요소를 null로 바꾸면 되지 않나?' 하고 생각할 수 있다.
정답은 '안된다' 인데 그 이유를 살펴보자.

const target = ['가','나','다','라','마'];
target[target.length-3]
<3         
// target[target.length]는 target[5]. index상으로는 배열에 해당 element없다. 따라서 우리는 마지막 element를 뜻하고 싶을 때 target[target.length-1] 이라고 한다!

target[target.length-1] = null  //마지막 element를 null로 바꾸겠다는 뜻.
                                // null이란, 미확인 값이나 아직 적용되지 않은 값.
console.log(target);
< ["가","나","다","라",null]      //마지막 요소가 삭제된게 아니라 null값으로 대체되었다. 

따라서 마지막 값을 null로 바꿔주더라도 그것은 null값으로 대체되었을 뿐, 삭제된게 아니다.
이러한 이유로 우리는 .pop을 사용할 수 밖에 없다.

target.pop();
console.log(target);
<["가","나","다","라"]

< 참고 >
question>
const를 변수로 사용할 경우 수정되는것이 불가능하다고 했는데 어떻게 배열에선 수정이 가능한건가요?
answer>
우선 const에는 새로운 값을 대입(=)하지만 못한다고 기억하면 됩니다!
const에 객체 (배열, 함수, 객체 리터럴)가 대입된 경우 객체 내!부!의 속성이나 배열의 요소는 수정할 수 있습니다.

const target2 = ['a','b','c','d'];
target2 = ['f','g'];  // 재할당 불가능!!
target2[0] = 'h'; // 가능!!

5) 배열 안에 있는 요소 수정: element

만약 배열 안에 요소를 수정하고 싶다면?

- const element = ['a', 'b', 'c', 'd', 'e'];

       element [2] = 'o'

>값은 ["a", "b", "o", "d", "e"]

6) 배열 안에 있는 요소 삭제 및 추가: splice

첫 번째 요소나 마지막 요소를 제거하는 것 말고 중간 요소를 제거하거나 다른 요소 제거하는 방법을 배워보자. 그 마법을 갖고 있는 아이는 바로 .splice이다.
splice 기능을 자세히 알아보자.

const target = ['가', '나', '다', '라', '마'];
 target.splice(1, 1);   //index가 1인 것에서 1번째 것만 빠져라
 console.log(target);

값은 ["가", "다", "라", "마"]

index가 1인 '나'만 빠졌다.

- const target = [ '가', '나', '다', '라', '마'] ;

      target.splice(2,2); // index가 2인 것으로부터 2개 삭제

      console.log(target);

      값은 ["가", "나", "마"]

만약 splice뒤에 ( , ) 에 ()만 들어온 경우라면?

- const target = ['가', '나', '다', '라', '마'];

  target.splice(1);    // index 1의 값 포함, 이후로 모두 지운다

  console.log(target);

  값은 [ "가"]

cf> splice로 값을 없애는 것 뿐만 아니라, 채우는 것도 가능하다.

const target = ['가', '나', '다', '라', '마'];

 target.splice(1,3, '차', '타'); // index 1의 값 포함, 세번째까지 값 지우고 지운 자리에 '차'와 '타'를 넣는다.
 console.log(target); // ['가', '마'] 상태에서 '차'와 '타'를 지운 자리에 붙여준다.
 
 값은 ["가", "차", "타", "마"]

cf> 값을 없애지 않고 splice로 값을 넣는 것도 가능하다.

  const target = ['가', '나', '다', '라', '마'];

  target.splice(1, 0, '차', '타');   // index 1번 값으로부터 0개 지우고 지운 자리 앞에 '차' 와 '타' 를 넣는다.

  console.log(target);       

  값은 ["가", "차", "타", "나", "다", "라", "마"]