Java script 기초 3

박새롬·2023년 8월 22일

1. Array와 Object 자료형

1-1. Array 자료형

여러가지 자료를 한곳에 저장하고 싶을 때 사용하는 자료형이다.대괄호를 열고 자료를 콤마로 구분해서 집어넣으면 된다.
그럼 여러 자료를 엑셀처럼 저장가능하다.
시작기호가 [ <- 이거면 무조건 array 자료형이다.array 자료에서 데이터 뽑을 땐 대괄호를 뒤에 뭍이면 된다.
[x]라고 쓰면 x번째 자료를 출력해 준다.

array 자료를 수정하고 싶으면 등호를 이용해서 수정하면 된다.
자료 추가도 가능하다.
여러 자료를 변수 하나에 저장하고 싶으면 array를 사용하면된다.

1-2.Object 자료형

이것도 여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형이다.
중괄호를 열고 자료를 콤마로 구분해서 집어넣으면 된다.
시작기호가 { <- 이거면 무조건 object자료형이다.
그런데 자료 왼쪽에 자료의 이름을 붙여서 저장해야 한다.

자료의 이름은 key, 실제 자료는 value라고 부른다.
그래서 object 자료형은 key:value 형태로 자료를 저장할 수 있다.
array 자료에서 데이터 뽑을 땐 대괄호를 뒤에 붙이면 되는데
[자료이름]이렇게 써야한다.
또는 .자료이름 이렇게 써도 가능하다.

1-3. array와 object 차이점

▲ array를 사용하면 저장시에 간단하지만나중에 자료 뽑을 때 약간 어렵다.
가격 뽑을 때 가격자료가 몇번째에 위치해있었는지를 기억해야한다.

▲object로 넣으면 저장은 귀찮지만
가격뽑을때 가격의 key이름이 뭐였는지를 기억하면된다.

array는 순서개념이 있다. 왼쪽에 적을 수록 더 앞에있는 자료이다.
object는 순서개념이 없다.가장 왼쪽에 적었다고 해도 첫번째임을 보장해주지 않는다.
그래서 array는 순서개념이 있다보니

가나다순 정렬
x번 자료부터 x번 자료까지 자르기
x번 자료 자르기
맨뒤, 맨앞에 자료넣기
원하는 자료가있는지 검색

순서개념이 필요한 많은 것들을 할 수 있다.

array자료.sort()하면 가나다순 정렬,
array자료.slice(x,y)하면 x번부터 y번까지 자를 수 있고
array자료.push(x)하면 x를 맨 뒤에 입력할 수 있고
이런 기본함수들이 준비되어있다.

2. forEach 와 for in

2-1. forEach

array 자료 뒤에 붙일 수 있는 forEach()라는 기본함수가 있다.이렇게 쓰면 pants안의 데이터 갯수만큼 forEach 콜백함수 안에있는 코드가 실행된다.
3번 실행되는 코드이다.
array자료 다룰 때 for 반복문 쓰기 귀찮으면 forEach 사용하면 된다.

2-2. forEach의 콜백함수

콜백함수 안에 파라미터 2개까지 작명이 가능한데
첫 파라미터는 반복문 돌 때 마다array안에 있던 하나하나의 데이터가 되고, 둘째 파라미터는 반복문 돌 때 마다 0부터 1씩 증가하는 정수가 된다.

2-3. for in

object 자료 갯수만큼 반복문을 돌리고 싶으면
for in 반복문을 쓰면 된다. 콘솔창에 '안녕'이 2회 출력된다.
그리고 for in 반복문 쓰면 object 자료 안에 있는 key와 vlaue를 다 출력해 볼 수 있다.
지금 key라고 작명하는 부분은 반복문이 돌 때 마다 object 자료 안에 있던 key값이 된다.출력해보면 name, age가 나온다.
key말고 실제 자료인 value를 출력하고 싶으면
console.log(obj[key])이렇게 쓰면 된다.

2-4. 반복문의 용도

실은 코드 복사붙여넣기용으로 쓰는게 for 반복문이라 했는데
array나 object 자료 전부 꺼내서 쓰고 싶을 때도 반복문을 쓰면 유용하다
그래서
1. 코드복붙하고싶으면
2. array, object 자료 다 꺼내고 싶을 때
반복문 사용하면 유용하다.

3. arrow function 문법

함수 만드는 다른 문법이 있다. 특히 콜백함수 만들 때 자주 쓰는 방법인데function 키워드 대신 => 화살표를 ( ) 우측에 부착해도 똑같이 함수만들 수 있다.
저걸 arrow function 이라고 한다.

그냥 함수와 arrow function의 기능차이는 하나가 있는데
함수 안에서 this를 써야할 경우
그냥 함수는 함수안에서 this를 알맞게 재정의해준다
arrow function은 함수안에서 this를 재정의해주지않고 바깥에 있던 this를 그대로 사용한다.
그래서 이벤트 리스터 콜백함수 안에서 this를 써야할 때 arrow function을 쓰면 의도와 다르게 동작 할 수 있다.

4. Ajax

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는
간단한 브라우저 기능을 AJAX라고 한다
그거 쓰면 새로고침 없이도 쇼핑몰 상품을 더 가져올 수도 있고
새로고침 없이도 댓글을 서버로 전송할 수도 있고
그런 기능을 만들 수 있는 것이다.fetch 함수는 Edge 브라우저 이상에서만 동작한다.
.then(res => res.json()) 코드가 필요한 이유는
서버와 데이터를 주고받을 때는 문자만 주고 받을 수 있어서이다.
array,object 이런거 전송불가.
JSON으로 바꿔서 전송하면 가능하다.
array 나 object에 따옴표를 다 쳐서 '{ "price" : 5000 }' 대충 이렇게 만들면 JSON이라는 자료가 되는데 JSON은 문자로 인식하기 때문에 서버와 데이터주고받기가 가능하다.
기본함수 fetch() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔주지 않는다.
그래서 fetch() 로 가져온 결과를 array/object로 바꾸고 싶으면 res.json() 이런 코드 한 줄 추가해주면 된다.

5. Array 정렬

5-1. array 정렬 하는 법

array 자료는 순서개념이 있다보니 정렬도 가능하다.
그먄 문자 가나다순으로 정렬하려면 .sort() 붙이면 되는데
숫자정렬은 이렇게 코드짜면 된다.이러면 숫자순으로 잘 출력된다.

동작원리를 알아보자.1. a, b는 array 안의 자료들이다.
2. return 오른쪽이 양수면 a를 오른쪽으로 정렬해주고
3. return 오른쪽이 음수면 b를 오른쪽으로 정렬해준다
4. 그리고 array 안의 자료들을 계속 뽑아서 a, b에 넣어준다
이렇게 동작해서 a - b 저렇게 쓰면 숫자순 정렬이 되는 것이다.

5-2. array에 자주 쓰는 filter 함수

array 자료에서 원하는 자료만 필터링 하고 싶으면 filter 함수를 쓰면 된다.

1. a라고 작명한건 array에 있던 데이터를 뜻하고
2. return 우측에 조건식을 넣으면 조건식에 맞는 a만 남겨준다
3. 그리고 filter는 원본을 변형시키지 않는 고마운 함수기 때문에 새로운 변수에 담아서 써야한다.

5-2. array에 자주 쓰는 map 함수

array 안의 자료들을 전부 변형하려면 map 함수를 쓰면 된다.
1. a라고 작명한건 array안에 있던 데이터를 뜻하고
2. return 우측에 변경될 수식을 넣으면 된다.
3. 그리고 map은 원본을 변형시키지 않는 고마운 함수기 때문에 새로운 변수에 담아서 써야한다.

응용하면 쇼핑몰에서 "달러 -> 원화로 변환하기" 이런 기능도 만들 수 있다.

sort 함수는 원본을 변형시켜버린다.
원본을 변형시키면 나중에 원본으로 되돌아갈 수 없으니까 귀찮아 질 수 있어서
array/object자료 조작시엔 원본을 따로 복사해두고 조작하는 경우도 있다.

6. 로컬스토리지

6-1. 로컬스토리지 사용방법

수정하는 방법은 없어서 꺼내서 수정하고 다시 저장하면된다.
문자나 숫자만 저장할수있고,
sessionStorage.어쩌구로 바꾸면 Session Storage에 저장가능하다.

6-1. 로컬스토리지에 array/object 저장하려면

array/object를 로컬스토리지에 저장하면 강제로 문자로 바꿔서 저장된다.
그러면 자료가 깨질수 있기때문에
array/object를 JSON으로 바꾸면 문자취급을 받기 때문에 안전하게 로컬스토리지에 저장할 수 있다.1. JSON.stringify() 안에 array/object 집어넣으면 JSON으로 바꿔준다.
2. 그걸 localStorage에 저장하라고 코드짠다