⭐️ 배열, 객체 keypoint ❗️

배열 = array

객체 = obj

.

📌 str[0]

문자열의 0번째 index 출력

'this' 라는 string(문자열)이 있을 때,

str[1] 입력하면,

this의 첫번째 index인 t 출력.
.

📌 array[1]

배열의 1번째 index 출력
.

📌 array.slice(start,end) → end-1까지

[1, 2, 3, 4, 5, 6, 7] 이라는 배열이 있을 때,

array.slice(0,3) 입력하면 // index 0 부터 index 2까지 출력

[1, 2, 3] 출력된다.

array.slice(2,6) 입력하면 // index 2부터 index 5까지 출력

[3, 4, 5, 6]

.

📌 function allKeys (obj) {

for (let insu in obj) { // [key:value]를 가진 obj 안에 모든 key를 insu라는 변수명으로 지정. 변수명을 반복시킬거야. 라는 뜻.

즉, [key:value] 전체가 obj 인 것.

key를 insu 라는 변수명으로 지정한 것.

그렇다면, obj의 value값을 가져오려면 ? → obj[insu]

insu는 변수명이기 때문에 obj['insu']라 쓰지 않는다.

obj['insu']라고 쓸 경우는 insu라는 변수명의 값이 name 일 경우다

obj['name'] 혹은 obj.name 라고 입력했을 때, value값을 호출한다.

.

상세설명 :

key : value 형식으로,

name : 'Anna' 가 있다. ← 이 전체 부분을 property라는 변수라 칭하자.

여기서, property의 value값인 'Anna'를 출력하는 2가지 방법 :

property.name

     OR

property['name']

But❗️ 변수를 쓸 때는 bracket notation [  ] 사용   ❗️

→ 위에 insu 변수명 썼을때 obj[insu]라고만 써주는 이유.

.

< Another example >

let obj = {
key : [ 'Tim' , 'Kim' ]
};

여기서, obj[key] 입력하면, value값인 ['Tim' , 'Kim'] 이 출력된다.

.

배열

element : 값

index : 순서 (번째) 0부터 시작

원본 배열을 변화시키는(수정하는) 메서드

📌 .unshift() 맨 앞 element 추가 - 길이 반환

📌 .shift() 맨 앞 element 삭제 - 값을 가지고 나옴

📌 .push() 맨 뒤 element 추가 - 길이 반환

📌 .pop() 맨 뒤 element 삭제 - 값을 가지고 나옴

새로운 배열을 리턴하는 메소드 (원본 배열을 바꾸지 않는 메소드)

📌 .slice()

Array.prototype.slice 는 start 부터 end 까지 대상 배열에서 꺼내와 새로운 배열을 만들어 값을 집어 넣는다. start 와 end 가 주어지지 않으면 전체 배열을 복사한다. → 얕은 복사
let arr= [1,2,3] arr.slice()
→ [1,2,3] 출력

---

.unshift() 사용예시

▪️ 배열의 첫번째 요소가 삭제된 배열을 리턴해야 합니다.
function removeFromFront(arr) {
  return arr.shift
}

가 아니라❗️ 

function removeFromFront(arr) {
  arr.shift();
  return arr;
}

.shift() 사용예시

▪️ 배열의 마지막 요소가 삭제된 배열을 리턴해야 합니다.
function removeFromBack(arr) {
  arr.pop()
  return arr;
}
   ▶️ removeFromBack([1,2,3]) 입력시, [1,2] 가 출력된다. (제거되고 남은 값이 출력됨)
     (원래 arr가 수정되는 원리)

⭐️ let arr= [1,2,3]
	 arr.pop();
▶️ 이 경우에는 3 이 출력된다.
	(제거되는 값이 출력됨)

.slice() 사용예시

▪️ 배열의 마지막 요소가 제외된 **새로운 배열**을 리턴해야 합니다.
function removeFromBackOfNew(arr) {
 return arr.slice(0, arr.length-1)
}

▶️ 새로운 배열을 리턴할 땐, 마지막 요소를 제거하여 기존 배열을 수정하는 .pop() 메소드를 사용하지 않는다.

.slice() 와 .push() 함께 사용예시

맨 뒤에 요소를 추가한 배열을 결과로 얻고 싶은데, push는 '길이'를 반환하는 메소드라 못쓰겠고,,, 그럼 어떻게 해야하지?

▶️ 이럴 때, slice 와 push 를 함께 사용한다 ~!

▪️ 배열과 요소를 입력받아 새로운 요소가 맨 뒤에 추가된 **새로운 배열**을 리턴해야 합니다.
function addToBackOfNew(arr, el) {
  const newArr = arr.slice();   ▶️ slice를 하면 새로운 배열이 탄생하기 때문에 새로운 변수인 newArr를 만들어줘서 그 속에 새 배열을 넣는것임
  newArr.push(el);       // 이 부분 계산값은 '길이'반환이지만,
  return newArr;         // 최종적으로 newArr 리턴하니까 결국 배열 자체를 반환하게 된다
}

.slice() 와 .unshift() 함께 사용예시

맨 앞에 요소를 추가한 배열을 결과로 얻고 싶은데, unshift는 '길이'를 반환하는 베소드라 못쓰겠고,,, 그럼 어떻게 해야하지?

▶️ 이럴 때, slice와 unshift를 함께 사용한다 ~!

▪️ 배열과 요소를 입력받아 맨앞에 새로운 요소가 추가된 **새로운 배열**을 리턴해야 합니다.
function addToFrontOfNew(arr, el) {   // arr=[1,2,3]  el=0 이라고 치면
	const newArr= arr.slice()           // newArr=[1,2,3]  (slice()로 복사만 했으니까)
	newArr.unshift(el)                  // unshift는 길이 반환하니까, 이 부분 계산값은 4
	return newArr;                     // 배열 자체를 리턴하니까, 최종적으로 [0,1,2,3] 출력
}

< 원래 배열 수정 리턴 vs. 새로운 배열 리턴 > 비교

▪️ 배열과 인덱스를 입력받아 해당 인덱스의 요소를 제외한 배열을 리턴해야 합니다.
🔶 push 사용

function getAllElementsButNth(arr, n) {      ▶️ arr=[1,2,3]  n=1 이라고 가정. (2를 뺄거임)
  let result = [];

  for (let i = 0; i < arr.length; i++) {      i=0
    if (i !== n) {                            i가 1이 아니라면    (i가 1인 차례가 오면 무시되고 바로 i=2로 넘어감. if문이 for문 안에 갇혀있으니, for문 안에서 계속 반복될수밖에 없음.)
      result.push(arr[i]);                    [].push(arr[0])   맨뒤에 요소추가 (길이반) [1]
    }
  }                                          

  return result;                              ▶️ 최종적으로 [1,3] 출력
}

▪️ 배열과 인덱스를 입력받아 해당 인덱스의 요소를 제외한 **새로운 배열**을 리턴해야 합니다.
🔶 slice 사용

function getAllElementsButNth(arr, n) {
  if(n > arr.length) {                 
    return arr;
  }

  let arr1= arr.slice(0,n)
  let arr2= arr.slice(n+1,arr.length)
  return arr1.concat(arr2);
}

배열의 마지막 값 구하기

let array = [1,2,3,4,5]

array[array.length - 1] // 5 출력.

→ array[4] 는 array의 4번째 index 출력하라는 의미니까 맨 마지막에 있는 5 출력됨.

.

객체

배열 vs. 객체

배열 : 순서가 있다

객체 : 의미(key)가 있다

📌 for ... in 객체에 쓰는 반복문

📌 for ... of 배열에 쓰는 반복문

.

let tweet = {
writer: 'stevelee',
createdAt: '2019-09-10 12-03:33',
content: '프리코스 재밌어요!'
};

입력                       출력
tweet.content      // -> "프리코스 재밌어요!"
tweet['content']   // -> "프리코스 재밌어요!"