#React 탐라 헤르미온느 3일차 #배열 내장함수와 trusy & falsy

최민재·2023년 4월 5일
0

React 탐라 스터디

목록 보기
6/10

배열 내장함수

forEach 모든 요소 하나하나 실행

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

arr.forEach((elm) => console.log( elm * 2 ));

//위의 화살표함수랑 아래 함수 선언식 = 같다.
/*arr.forEach(function(elm){
	console.log(elm * 2 )}; */
    
_________________________________

const newArr = [ ];

arr.forEach(function(elm) {
	newArr.push(elm * 2);
});

console.log(newArr);

map

더 쉬운 방법


//map 도 forEach 처럼 요소 하나하나 실행한다. 

const arr = [1,2,3,4];
const newArr = arr.map((elm) => {
	return elm *2;
});


< (4) [2,4,6,8]
0 : 2
1 : 4
2 : 6
3 : 8
ex)

const arr2 = [1,3,5,7]
const newArr2 = arr.map((elm) => {
	return elm * 3;
});

console.log(newArr2)

<(4) [3,9,15,21]

.

존재하는지 . includes

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

let number = 3;

console.log(arr.includes(number));
< true

. includes 내장함수는

주어진 배열에서 인자로 받은 값이 존재하는지
그렇지 않은지 boolean식으로 return 해준다.

몇번짼지 . indexOF

//일치하는 값이 하나도 없으면 - 1 을 반환한다.
존재하면 배열의 index 위치를 알려준다.

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

let number = "3";

console.log(arr.indexOF(number));

< -1 


.

. findIndex

복잡한 객체 배열에서 원하는 속성을 갖는 예를 들어 { color : "green" }이라는
속성의 index를 찾고싶다? findIndex


const arr = {
	{ color : "red" },
    { color : "black" },
    { color : "blue" },
    { color : "green" }
};

let number = 3;

console.log(arr.findIndex((elm) => elm.color === "green"));

<3 

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

<0

// 위에랑 같다. 

console.log(arr.findIndex((elm) => {
	return elm.color === "red"
});

// 직독직해 
arr 이라는 배열의 모든 요소를 한 번씩 순회를 합니다. 순서대로.
0번째 요소 컬러는 red 라는 객체가 이 elm 라는 파라미터에 들어오게 되고
 elm.color 는 red 인데 === "red" 이기 때문에 바로 반환 0 해준다.

.find

find 와 findIndex 는 둘다 가장 첫번째로 찾게된 결과물을 준다.

요소 자체를 찾을때는 find
찾는것이 요소의 index 이면 findIndex

const arr = {
	{ color : "red" },
    { color : "black" },
    { color : "blue" },
    { color : "green" }
};


let number = 3;

const element = arr.find(elm) => {
	return elm.color ==="blue";
});

console.log(element);

.filter ( )

const arr = [
	{ num: 1, color: "red" },
    { num: 2, color: "black" },
    { num: 3, color: "blue" },
    { num: 4, color: "green" }
    { num: 5, color: "blue" }
];

console.log(arr.filter((elm) => elm.color=== "blue"));

arr.slice( ) 배열 index 자르기

console.log(arr.slice(0,2));
< 0번째줄과 1번까지만 나온다.

// 왜? 이 첫번째 인자를 begin 이라하고 마지막을 end라고 하는데 
slice 는 end에서 1을 뺀 배열까지 반환한다. 

console.log(arr.slice(0,4));
< 0번째줄과 3번까지만 나온다.

.concat( ) 배열 붙이기

const arr1 = [
{ num: 1, color: "red" },
{ num: 2, color: "black" },
{ num: 3, color: "blue" }
];

const arr2 = [
{ num: 4, color: "green" }
{ num: 5, color: "blue" }
];

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


문자열 사전순 정렬 - . sort ( )

sort ( ) 는 원본 문자열의 정렬을 사전순으로 정렬 해준다.

숫자정렬 - numbers.sort (비교함수)

sort ( ) 는 문자열을 사전순으로 정렬하기 때문에 그냥 실행 시키면 number의 사전적 순서대로 정렬된다.

그래서 비교함수를 넣어야 하는데
비교함수는 3가지 기준으로 비교한다.

const compare = (a,b) => {
	if (a > b) {
    	return 1 ;
    } if (a < b) {
     	return -1 ;
    } return 0 ;

a 와 b를 전달받으면 a > b 여기서 a 가 b 보다 커서 ( 숫자 생각해봐 순서상으로 ) 뒤로 보내니까 1

a < b 면 앞으로 보내지니까 -1

이건 오름차순이고

저 리턴 값을 위에서부터 -1 , 1, 0 으로 바꾸면 내림차순 정렬이 된다.


추가) 전체 주석 처리 방법

여러 라인을 긁은 다음 ctrl + / 아니면 Cmd + /


배열 합치기 . join

  • arr.join( ) 쉼표로 구분해서 합쳐지며
    const arr = ["안녕", "내이름은", "최민재야"]

arr.join( ) = 안녕,내이름은,최민재야

쉼표가 싫으면
arr.join(" ")= 안녕 내이름은 최민재야
이렇게 쉼표가 사라지고 공백이 구분자 역할을 한다.
"바보"를 넣으면 안녕바보내이름은바보최민재야 가 된다.



Truthy & Falsy

참 같은 값 과 거짓 같은 값

False 가 나오는 falsy 값들

undefined, 0, null, " " (빈문자열), -0, NaN


삼항 연산자

a >= 0 ? console.log("양수") : console.log("음수")

let a = [ ];
a.lenght === 0? console.log(" 빈배열") : console.log(" 안 빈 배열 ")

값을 작성하면

const arrayStatus = a.length ===? "빈배열" : "안 빈배열" ;
(대입 연산자)

중첩되는 삼항 연산자 - trusy & falsy 사용 유용

score >= 90 ? console.log("A") : score >= 80 ? console.log("B");

근데 이런 중첩 삼항 연산자는 가능하지만 가독성이 떨어지니
if 조건문으로 써주는게 좋다.

if (score >= 90 {
console.log("A");
}else if (score >= 80){
console.log("B");
}else {
이런식으로.


profile
최코딩 블로그

0개의 댓글

관련 채용 정보