한입 크기로 잘라 먹는 리액트 : 반복문, 배열 내장함수 편

 

 

 --- 강의노트

 

해당글은 인터넷 강좌인

한입 크기로 잘라 먹는 리액트를 듣고, 직접 작성한 글입니다ㅏㅏㅏ

오타와 오역이 있을 수 있음을 알립니다ㅏㅏ 

( 주로, 제가 이미 알고 있었던 내용일 경우, 예시가 상당히 성의없을 수 있...... )

 

1. 배열

let person = {
	name: "이예린",
	age: 27,
    	tall: 169
};


// 배열 내의 key 값만 가지고 올 때,
const personKeys = Object.keys(person);


// key 값으로 현재 value 찾기
for (let i = 0; i < personKeys.length; i++) {
	const currentValue = person[currentKey];
}


// 배열 내의 value 값만 가지고 올 때,
const personValues = Object.values(person);

for (let i = 0; i < personValues.length; i++) {
	const currentKey = personValues[i];
}

 

2. 배열 내장함수

const arr = [1, 2, 3, 4];

// 1. *foreach()* 간단하게 사용하기
arr.forEach(element) => console.log(element * 2);

// 출력값 : 2, 4, 6, 8



// 2. *map()* 위의 내용을 간단하게 새 배열로 만드는 걸 도와주는 함수
const newArr = arr.map((element) => {
	return element * 2;
});


// foreach문 사용하여 특정 값 존재 여부 확인
let num = 3;

arr.foreach((element) => {
	if (element === num ) {
    	console.log(true);
    }
});

// 출력값 : true



// 3. *includes()* 위의 내용을 간단하게 확인 할 수 있는 함수
console.log(arr.includes(num));

// 출력값: true --> 반대의 경우엔 false 리턴



// 4. *indexOf()* 배열 내의 특정 값이 몇번째 인덱스인지 확인하는 함수
const arr = [1, 2, 3, 4];
let num = 3;

console.log(arr.indexOf(num)); // 해당 값이 배열내에 없을 때는 -1 리턴

// 출력값 : 2



// 5. *findIndex()* 배열 내에 객체가 들어있을 경우에, 인덱스 번호를 찾는 콜백 함수
// ***해당 함수는 배열 내에서 가장 먼저 특정 조건을 만족하는 값의 인덱스를 리턴***
const arr2 = [
	{ color: "red"},
    { color: "black"},
    { color: "blue"},
    { color: "green"}
];

console.log(arr.findIndex(arr2.findIndex(element) => element.color === "red"));

// 출력값 : 1



// 6. *find()* 배열에 특정 조건을 만족하는 element를 리턴하는 함수
const element = arr2.find(element) => {
	return element.color === "blue";
}

console.log(element);

// 출력값 : {color: "blue"}



// 7. *filter()* 배열에 특정 조건을 만족하는 모든 값을 배열로 리턴하는 함수
const arr3 = [
	num: 1, color: "red" },
    num: 2, color: "blue" },
    num: 3, color: "black" },
    num: 4, color: "green" },
    num: 5, color: "green" }
];

const filterArr = arr2.filter((element) => element.color === "green"));

// 출력값 :
(2) [Object, Object]
    0: Object
        num: 4
        color: "green"
    1: Object
        num: 5
        color: "green"



// 8. *slice()* 배열을 자를 때 사용하는 함수
// 첫번째 인자 : begin, 두번째 인자 : end
// 두번째 인자로 들어온 수의 전 인덱스까지 잘라 리턴
console.log(arr3.slice(0, 4));

// 출력값 :
(4) [Object, Object, Object, Object]
    0: Object
        num: 1
        color: "red"
    1: Object
        num: 2
        color: "brue"
    2: Object
        num: 3
        color: "black"
    3: Object
        num: 4
        color: "green"


// 9. *concat()* 배열을 붙이는 함수
const arr4 = [
	{num: 1, color: "red"},
	{num: 2, color: "red"},
	{num: 3, color: "red"}
];

const arr5 = [
	{num: 4, color: "red"},
	{num: 5, color: "red"},
];

console.log(arr1.concat(arr2));

// 출력값 :
(5) [Object, Object, Object, Object]
    0: Object
        num: 1
        color: "red"
    1: Object
        num: 2
        color: "red"
    2: Object
        num: 3
        color: "red"
    3: Object
        num: 4
        color: "red"
    4: Object
        num: 5
        color: "red"
        
// 10. *sort()* 배열 내의 값을 사전순으로 정렬하는 함수 --> 숫자배열에 쓸 경우, 1,10,2,20 등의 순서로 정렬
let chars = ["다", "나", "가"];

chars.sort();

console.log(chars);

// 출력값 :
(3) ["가", "나", "다"];
0: "가"
1: "나"
2: "다"

// 11. *join()* 배열 내의 값을 연결해주는 함수
const arr6 = ["오", "필승", "코리아"];

console.log(arr6.join(" ")); // join()은 인자로 구분자를 넣어주면 된다ㅏㅏ

// 출력값 : 오 필승 코리아