1. 날짜

현재 시간을 가져오는 방법

let d = new Date();

Wed Dec 01 2021 10:35:35 GMT+0900 (한국 표준시) {}
이처럼 현재 시간을 출력할 수 있다.(정확히는 불러와서 d에다가 할당)

이제 위의 시간을 기준으로 가져올 수 있는 정보를 알아보자.

d.getMonth() // 11 월은 0부터시작->오늘은 12월이다! Dec!
d.getDate() // 1일  일은 1부터시작-> 1일을 의미
d.getDay() // 3요일?! 일월화수목금토 0123456 ->오늘은 수요일이니 3!
d.getHours() // 10시를 의미한다.
d.getMinutes() // 35분을 의미한다
d.getSeconds() // 35초를 의미한다(불러왔을 딱 그 시점!)
d.getFullYear() // 2021

2. Array

기본형태

let 배열이름 = [값, 값, 값, ... , 값]; // 대괄호안의 값들!!

2.1 배열 선언과 할당(생성)

//1번
let fruits = ['apple', 'watermelon', 'peach', 'strawberry', 'banana'];
//2번
let fruits2 = new Array(5); //빈배열만들고
fruits2 = ['apple', 'watermelon', 'peach', 'strawberry', 'banana']; //값할당
//3번
let fruits3 = new Array('사과', '수박', '복숭아', '딸기', '바나나'); //빈배열생성과 값 할당을 한번에!

2.2 배열의 인덱스 -> 0번부터 시작!

다차원으로 접어들면 타고타고 들어가는 상황이 있는데,
CSS에서 클래스를 타고 들어갔던 기억을 더듬어서 큰 목차와 작은 목차를
잘 구분해서 진행하자!!

fruits == ['apple', 'watermelon', 'peach', 'strawberry', 'banana'];
fruits[0] // 'apple'
fruits[1] // 'watermelon'

fruits[0] = '한라봉' 
// ['한라봉', 'watermelon', 'peach', 'strawberry', 'banana'] 'apple'에서 '한라봉'으로 바뀌었다
// 문자열과의 차이점!!
// 문자열은 str[0]='a'로 재할당을 해도 값이 변하지 않는다.
// 그러나 배열에서 재할당을 하면 배열의 값이 바뀐다.

let text = '1234' // 배열과 문자열의 차이
text[0] = 'a' //이렇게 해도 'a324'가 아니라, '1234'임

fruits[0][0] 
// 과일배열의 0번째 == '한라봉' -> '한라봉'의 0번째 == '한'
// '한'을 의미하는 문자열임 -> 수정 불가능 
// '한라봉'자체는 문자열이기 때문에 

2.3 메서드체이닝과 replace

메서드 체이닝 -> 메서드를 연달아서 사용이 가능하다.

//.replace(바꿔줄 값, 바뀌어진 값)
'01001'.replace('0', 'a') //하나만 바꿔준다
'01001'.replace(/0/g, 'a').replace(/1/g, '#'); 
// 'a#aa#' 전부다 바꿔준다!!

let phone = '010.1000.1000' // 010-1000-1000 으로 하고싶다
phone.split('.')
// 문자열에서 .을 기준으로 값을 찢어내고, 배열에 담는다.
// ['010', '1000', '1000']
phone.split('.').join('-')
//'010-1000-1000'

2.4 배열에서 뽑아내기 & 추가하기

배열.pop()를 이용하면 가장 마지막에 있는 값이 뽑아진다.

let 과일 = ['사과', '수박', '복숭아', '딸기', '바나나'];
let 과일선물 = ['체리', '멜론'];

let 꺼낸과일 = 과일.pop()
//과일이라는 배열의 마지막 값인 '바나나'가 빠지게 됨
// 과일 -> ['사과', '수박', '복숭아', '딸기']
// 꺼낸 과일 -> '바나나'

과일.push(꺼낸과일) 
// 과일이라는 배열에 추가하겠다(꺼낸과일이라는 변수를)
// 과일 == ['사과', '수박', '복숭아', '딸기', '바나나']
// 다시 바나나가 생긴걸 볼 수 있다.
// 그렇다면 꺼낸과일이라는 변수는 바나나가 사라졌을까? 아니다!!!
// 꺼낸 과일 -> '바나나' 그대로 있다.
과일.push('한라봉')
// '한라봉'이 추가된다.
// 추가되는 지점은 맨 마지막이다.
// ['사과', '수박', '복숭아', '딸기', '바나나', '한라봉']
과일.unshift('귤')
// '귤'이 추가된다.
// 추가되는 지점은 맨 앞이다.
// ['귤', '사과', '수박', '복숭아', '딸기', '바나나', '한라봉']

2.5 배열에서 뽑아내기 & 추가하기(심화)

뽑아내기의 심화(?) 버전을 알아보자.
.slice
.splice

과일 == ['사과', '수박', '복숭아', '딸기', '바나나', '한라봉']

과일.slice(2, 5) // 2번부터 5번앞에까지 가져오겠다
과일.slice(2) // 2번부터 다 가져오겠다
과일.slice(2, -1) // -1은 '한라봉'임 
과일.slice(-5, -2) // -1은 '한라봉임' -5는 '수박'임
// 데이터의 변화가 없음 -> 과일을 찍어봐도 값들의 변화는 없다!
// 과일==['사과', '수박', '복숭아', '딸기', '바나나', '한라봉']
//위의 결과들은 아래에 기재!
['복숭아', '딸기', '바나나']
['복숭아', '딸기', '바나나', '한라봉']
['복숭아', '딸기', '바나나']
['수박', '복숭아', '딸기']


과일.splice(2, 3) // 인덱스 2부터 3개를 가져오겠다->그리드의 span과 비슷
// ['복숭아', '딸기', '바나나'] 를 가져오게 된다.
// 데이터의 변화있음
// 과일 == ['사과', '수박', '한라봉']

// 다시 과일을 원래상태로 복구 시키고
과일 = ['사과', '수박', '복숭아', '딸기', '바나나', '한라봉']

과일.splice(1, 3, 'apple') 
// [수박', '복숭아', '딸기']가 뽑아나와진다.
// 잘라진자리에 'apple'이 들어간다.
// 과일 ==['사과', 'apple', '바나나', '한라봉']

추가하기의 심화버전
.concat

// 헷갈림을 방지하여 새로 배열 선언
let 과일 = ['복숭아', '딸기', '바나나']
let 제주과일 = ['귤', '한라봉', '천혜향']

과일.concat(제주과일); // 과일의 배열 값 뒤에 제주과일들이 붙게 됨
['복숭아', '딸기', '바나나', '귤', '한라봉', '천혜향']
제주과일.concat(과일); // 제주과일의 배열 값 뒤에 과일들이 붙게됨
['귤', '한라봉', '천혜향', '복숭아', '딸기', '바나나']
// 아래처럼 원래의 배열엔 변화가 없다
과일 
['복숭아', '딸기', '바나나']
제주과일
['귤', '한라봉', '천혜향']

붙인 배열을 쓰고 싶다면, 새로운 공간을 마련해서 넣어주자!!
(변수를 선언해서 할다하자는 뜻)

2.6 배열 -> 문자열 바꾸기

배열로 나열되 값들을 문자열로 바꾸어보자
.toString
.join

과일.toString()
// 배열을 문자열로 바꾸어준다.
// 대괄호가 사라지고, 값들을 문자열로 붙여준다.
// 이 때, 각 값들을 구분하기위해 (,)를 붙여준다.
// '귤,사과,수박,복숭아,딸기,바나나,한라봉'

과일.join('!!*')
// 배열을 문자열로 바꾸어준다. (toString과 방식이 약간 다름)
// toString에서 (,)대신 ''안의 문자로 바꾸어서 문자열을 반환한다.
// '귤!!*사과!!*수박!!*복숭아!!*딸기!!*바나나!!*한라봉'

2.7 정렬하기 & 순서뒤집기

정렬을 시켜보고 순서를 뒤집어보자
(이상한 규칙으로 정렬을 시키는데 그것이 무엇인지도 알아보자)
.sort
.reverse

과일 == ['사과', '수박', '복숭아', '딸기', '바나나', '한라봉']
과일.sort()

let data = [10, 20, 30, 11, 22, 25];
data.sort()
// ['딸기', '바나나', '복숭아', '사과', '수박', '한라봉']
// 사전식으로 정렬된다.

//새로운 변수선언
let data = [10, 20, 30, 11, 22, 25, 111];
data.sort()
// [10, 11, 111, 20, 22, 25, 30]
// 사전식정렬은 숫자에서 의문이 생긴다.
// 숫자의 대소비교가 아님을 이해하자

// 헷갈리지 않기 위해 다시 할당
data = [10, 20, 30, 11, 22, 25, 111];
data.reverse() 
// [111, 25, 22, 11, 30, 20, 10]
// 현재 정렬되어 있는 상태에서 뒤집어 엎어버린다
// 역정렬의 개념이 아니다 (정렬 vs 순서)

data.sort(function(a,b){return a-b});
//오름차순 정렬
// 앞의값 빼기 뒤의값 한걸 기준으로 정렬하겟다
data.sort(function(a,b){return b-a}); 
// 내림차순 정렬

오름차순과 내림차순은 지금은 일단 외운다.

2.8 다차원배열 -> 배열안에 배열들

하나의 큰 배열안에 또 다른 배열들을 넣어보자.

let 행렬 = [[1,2,3],
          [4,5,6],
          [7,8,9]];
행렬[0] // [1,2,3]
행렬[0][0] // 1
행렬[0] + 행렬[0] // '1,2,31,2,3' 
//문자열로 바뀐 뒤 문자열간 합이 이루어짐 
// 그래서 결과 값도 문자열이 됨
행렬[0] * 행렬[0] // NaN
행렬[0] - 행렬[0] // NaN
행렬[0] / 행렬[0] // NaN

배열안에 배열안에 배열을 넣어보자(?!)

let arr = [
        // class 1
        // 국어 영어 수학
        [[10, 20, 30], // alex
         [11, 21, 31], // kate
         [12, 22, 32]], // simon
        // class 2
        [[40, 50, 60], // 철수
         [41, 51, 61], // 영희
         [42, 52, 62],] // 바둑이
        ];

arr[0] // class 1
arr[1] // class 2

arr[0][0] // alex
arr[0][1] // kate
arr[0][2] // simon

arr[1][0] // 철수
arr[1][1] // 영희
arr[1][2] // 바둑이

arr[0][0][0] // alex's 국어 : 10
arr[0][0][1] // alex's 영어 : 20
arr[0][0][2] // alex's 수학 : 30
...
arr[1][2][2] // 바둑이's 수학 : 62