[React] 자바스크립트 배열

배열

const hobbies= ["Swimming", "Cooking", "Running"];
console.log(hobbies[0]); 

>>>Swimming

 

const content=[~, ~, ~];

내부에 문자열을 저장하거나 하는 식으로 구성

 

hobbies.push("Walking"); //새 원소 추가
console.log(hobbies); //전체 출력

const index= hobbies.findIndex((item) => {
    return item=== 'Swimming'; 
    //각 원소를 스위밍과 비교하고 두 텍스트가 일치하면 함수가 true를 반환하여 스위밍의 인덱스를 가져옴
    //그리고 그 값인 0을 index변수에 저장
});

console.log(index);

 

다른 언어들이랑 거의 비슷...

자바스크립트 강의는 화살표 함수 같이 익숙하지 않은 것들 위주로 가볍게 듣는중

리트코드에서 문제로 풀어보면서 더 익히면 되겠다

---

map

//map을 사용하면 기존 배열은 변경되지 않고 새 배열을 반환함
const editedHobbies = hobbies.map((item) => item + "!" ); //모든 스트링에 !를 추가
//목록의 내용물을 출력하거나 데이터를 JSX로 매핑하는 등 자주 사용

 

 

function transformToObjects(hobbies){

	const editedHobbies= hobbies.map((item)=> ({text: item}));
    //자바스크립트 객체를 담은 새 배열을 만들고
    //각 객체의 text키에 기존 배열의 값을 저장.

	return editedHobbies
}

 

배열 및 객체 분해(디스트럭쳐링)

const [firstName, lastName]= ["Nino", "Maximuscaesarsoje"];

이전의 코드보다 훨씬 짧게 작성 가능

니노막시무스카이저소제

console.log(firstName);

console.log(lastName);

 

const {name: userName, age}= {
	name:"Max",
    age:34
};

//여기서 매개변수 name은 반드시 이름 지켜야.
//alias로 userName지정

 

스프레드 연산자

const hobbies= ["Sports", "Cooking"];

const user= {
	name: "Max",
    age:34
};

const newHobbies=["Reading"];

const mergedHobbies= [...hobbies, ...newHobbies];
//...을 사용하면 병합된 배열의 값이 mergedHobbie에 담기게 됨.
//쉼표로 구분된 개별 값을 새 배열에 추가함
//스프레드 연산자(전개 연산자) ...

console.log(mergedHobbies);

 

 

const extendUser={
	isAdmin: true,
    ...user
}

//user의 모든 키-값 쌍을 가져와 추가

 

 

컨트롤 구조

//for of loop

for (const hobby of hobbies){
	console.log(hobby);

}

 

함수 내에서 함수 정의

-바닐라 자바스크립트에서는 많이 사용하지 않지만

-리액트에서는 자주 사용

function init(){
	function greet(){
		console.log("Hi!");    
    }
    greet();
}

init();

 

const 쓰면 새 값을 할당할 수 없으니 push식으로 새 원소를 추가해야함