● 2월 27일 (Unit8 - JavaScript 배열, 객체)

● 오늘 공부한 것

• 배열의 메서드
  • length : 배열의 길이를 반환해준다.
  • push : 배열의 맨 뒤에 값을 추가해준다.
  • pop : 배열의 맨 뒤에 있는 값을 삭제해준다.
  • unshift : 배열의 맨 앞에 값을 추가해준다.
  • shift : 배열의 맨 앞의 값을 삭제해준다.
  • indexOf : 특정한 값이 배열에 있는지 확인 후, 찾는 즉시 그 index 값을 반환해준다.
  • includes : 특정한 값이 배열에 있는지 확인 후, 찾는 즉시 boolean 값으로 값을 반환해준다. 
  • Array.isArray() : 매개변수에 있는 게 array인지 확인 후, boolean 값으로 반환해준다.
  • console.table() : 매개변수에 있는 array를 테이블표로 보여준다.
  • reverse : 배열을 뒤집어서 반환한다.
  • join : 인수로 전달받은 문자열로 연결한 문자열을 반환한다.

let arrayTest = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// arrayTest의 길이를 반환
console.log(arrayTest.length);
// 10

// arrayTest의 맨 뒤에 11을 추가
arrayTest.push(11);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

// arrayTest의 맨 뒤 요소 제거
arrayTest.pop();
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// arrayTest의 맨 앞 요소 추가
arrayTest.unshift(0);
//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

//arrayTest의 맨 앞 요소 제거
arrayTest.shift();
//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

//arrayTest안에 있는 위치 찾기
arrayTest.indexOf(5);
arrayTest.indexOf(-1);
// 4 -1

//arrayTest이 값을 가지고 있는지 확인
arrayTest.indexOf(9);
arrayTest.indexOf(11);
// true false

//arrayTest가 array인지 확인
typeof arrayTest
// object
Array.isArray(arrayTest);
Array.isArray(3);
// true false

//arrayTest의 순서를 거꾸로 반환
arrayTexst.reverse();
// [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

//arrayTest를 '-' 문자열로 연결
arrayTest.join('-')
// '1-2-3-4-5-6-7-8-9-10'

console.table(arrayTest)

콘솔창 출력값

• 이외의 배열의 메서드

• slice(start, end)
  1. 배열의 시작과 끝값을 기준으로 한 배열을 반환한다.
  2. 안에 들어가는 매개변수들은 모두 index 값이며 시작 인덱스부터 end 인덱스 이전까지 반환한다.
  3. 참조가 되는 배열을 변형시키지 않는다.

let arrayTest = ["banana", "apple", "orange", "grape", "kiwi", "watermelon"];

arrayTest.slice(0, 1);
// [ "banana" ];

arrayTest.slice(0, 3);
// [ 'banana', 'apple', 'orange' ]

arrayTest.slice(3, 6);
// [ 'grape', 'kiwi', 'watermelon' ]

arrayTest.slice(2, 5);
// ["orange", "grape", "kiwi"];

 

• splice(start, deleteCount, add)
  1. 배열의 시작 index를 정한다.
  2. deleteCount , 즉 잘라낼 개수를 정한다.
  3. 지우고 난 뒤 추가할 값을 넣는다. 공란으로 두면 추가되지 않는다.
  4. 참조가 되는 배열을 잘라내는 것이기 때문에, 배열을 변형시킨다.

let arrayTest = ["banana", "apple", "orange", "grape", "kiwi", "watermelon"];

arrayTest.splice(0, 2);
// [ 'banana', 'apple' ]

// arrayTest의 값
// [ 'orange', 'grape', 'kiwi', 'watermelon' ]

let arrayTest = ["banana", "apple", "orange", "grape", "kiwi", "watermelon"];

arrayTest.splice(2, 3);
// [ 'orange', 'grape', 'kiwi' ]

// arrayTest의 값
// [ 'banana', 'apple', 'watermelon' ]

let arrayTest = ["banana", "apple", "orange", "grape", "kiwi", "watermelon"];

arrayTest.splice(3);
//[ 'grape', 'kiwi', 'watermelon' ]

//arrayTest의 값
//[ 'banana', 'apple', 'orange' ]

let arrayTest = ["banana", "apple", "orange", "grape", "kiwi", "watermelon"];

arrayTest.splice(3, 2, "pear");
// [ 'grape', 'kiwi' ]

//arrayTest의 값
// [ 'banana', 'apple', 'orange', 'pear', 'watermelon' ]

 

● 추가 공부한 것

- 항상 배열의 고차함수에 대해서 공부해야된다고 생각하고 있었는데, 각잡고 공부했다..

#Array 배열고차함수

 

---

● 끝맺음

• 느낀점
  
  • 배열을 다시 배우는 김에 고차함수를 정렬하면서 공부하니까 잘했다는 생각이 들었다.
  • splice, slice도 언제 한번 다시 정리해야지 했는데, 이김에 정리하니까 정리되고 .. 좋다..
  • 역시 내가 스스로 입력해보고 출력하는걸 봐야지 머리에 잘 남는다.
• 수업이외의 학습
  • 알고리즘 3문제 풀었나..
  • 오전에 CS 포스팅 2개.. 근데 잘 이해안됐음
  • 깃공부
  • node js 공부
  • canvas three.js 공부 1시간
  • 모던 자바스크립트 읽기 1시간 (스터디 준비)