JS-Do it! JS - #9일 (11,12,13)

11.  배열과 객체, 좀 더 깊게 살펴보기

전개구문 : 값을 펼쳐주는 구문

 

나머지 매개변수로 사용할 때

나중에 몇 개의 인수를 받게 될지 알 수 없는 경우일때, 전개 구문을 사용해 매개변수를 만든다

매개변수의 개수를 고정하지 어려우므로 전개 구문을 사용해 매개 변수를 하나의 이름으로 선언한다

function addNum(...numbers){
	let sum=0;
    
    for(let number of numbers)
    	sum+=number;
       
    return sum;
}

 

전개구문을 사용해 복사하면, 원래 배열의 값을 꺼내와 펼친 후, 또 다른 배열을 만든다

이때, 주소를 가져오는 것이 아닌 배열의 요소(값들)을 꺼내온다

따라서 원래의 배열에는 영향을 주지 않는다!

 

객체의 프로퍼티

대괄호 표기법

점 표기법에는 프로퍼티 이름 사이 공백을 사용할 수 없다. 

대괄호 표기법을 사용하면  프로퍼티 이름을 다양하게 만들 수 있다.

book["publiched book"]="2022-11";

프로퍼티 값 단축

function makeUser(name,age){
	return{
    	name,
        age
    }
}

 

구조분해할당

자료의 구조를 분해해서 변수에 할당하는 기능

배열이나 객체는 하나의 변수에 다양한 값이 들어 있는데,

그 중에서 일부만 꺼내 다른 변수로 할당할 때 편리하게 사용 가능

배열 구조 분해 할당하기

let [apple,peach] =["사과","복숭아"]

이때, 변수에 빈 배열을 구조분해하면 각 변수에는 undefined 값이 저장

 

일부 값만 구조 분해 할당하기

let [spring,,fall,]=["봄","여름","가을","겨울"]
spring //봄
fall //가을

 

객체 구조 분해

배열과 마찬가지로 객체에서도 구조 분해 사용 가능

하지만 객체에는 순서가 없으므로 이름,변수 이름이 같아야 해당 키를 찾아 값을 가져올 수 있다.

 

새로운 변수 이름 사용하기

const member={
	name:"Kim",
    age:25
}
let {name:userName,age}=member
userName //"Kim"

 

 

배열 요소에 같은 함수 적용하기 -map()

각 배열 요소에 똑같은 함수를 실행한 후 그 결과를 새로운 배열로 반환하는 메서드

let numbers=[1,2,3,4,5]
let newNumbers=numbers.map(number=>number*2);
newNumbers //[2,4,6,8,10]

 

맵

let myCup=new Map([
	["color","white],
    ["haveHandle",true]
]);

체이닝

myCup.set("type","도자기").set("size","mini")

셋과 체이닝

키 없이 여러 개의 값을 모아놓았지만 값이 중복되지 않는다

let numSet1=new Set()
numSet1.add("one").add("two")

 

제너레이터 함수

function* gen(){
	yield 1;
    yield 2;
}

 

---

12.HTTP 통신과 JSON

 

AJAX (Asynchronous Javascript And XML)

비동기: 동시에 일어나지 않는다

=> 서버에 한꺼번에 자료를 요청하고 수신이 완료될 떄까지 기다리는것이 아니라

자료를 나누어 요청하고, 요청한 자료가 도착하는 동안 다른 작업, 동시에 여러 자료를 가져오고 일부는 먼저 화면에 보여준다

XML: 서버로 보낼 수 있는 자료 형식

 

자바스레드은 싱글 스레드 언어

스레드: 프로세스에서 작업을 실행하는 단위

한 번에 하나의 작업만 처리하는 싱글 스레드, 한 번에 여러 스레드를 사용하면 멀티스레드

 

---

13. 비동기 프로그래밍