[한 입 크기로 잘라먹는 React.js] - JavaScript 기초 알기 ( 배열 내장함수, 단락 회로 평가 )

React.js

자바스크립트의 라이브러리

=> 자바스크립트를 알아야함 + 동작환경인 Node.js를 다룰 수 있어야함

(이전에 배웠던 내용은 따로 정리하지 않고 새로 배운 내용을 위주로 정리함)

---

 

📍 배열 내장함수

1. 배열을 순회하는 내장함수

// for문 대신 배열을 순회하는 방법
let arr = [1,2,3,4];
arr.forEach((el)=>console.log(el)) // [1,2,3,4]
// arr의 요소가 콜백함수의 인자로 하나씩 들어가 새로운 배열을 만들어냄

여기서 새로운 배열 newArr에 arr의 요소에 *2를 한 값을 요소로 넣어주려면?

// newArr에 arr요소에*2한 값을 요소로 넣기
const newArr = [];
arr.forEach((el)=>newArr.push(el*2))
console.log(newArr) // [2,4,6,8]


// 배열 내장 메소드 중 .map을 사용하면 더 간단하게 구현할 수 있음
const newArr = arr.map((el)=>{
    // .map은 콜백함수 내에서 return이 가능함
    return el*2;
})
console.log(newArr) // [2,4,6,8]

 

2. 배열 내 특정 요소 찾기 (존재하는지 아닌지)

const arr = [1,2,3,4];
let number = 3;
arr.forEach((el)=>{
    // forEach로 요소를 하나씩 돌려 number와 일치하는게 있는지 찾기
    if(el === number){
        console.log(true); // true
    }
})
// 위 코드를 한 줄로 줄이면
console.log(arr.includes(number)) // true
// ()안의 인자가 배열에 존재하는지를 true/false로 나타냄

// 인덱스 번호를 알고싶다면 indexOf메소드를 사용
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(5)); // -1 <- 없으면 -1을 반환

만약, 배열의 요소가 객체인 경우 findIndex메소드를 사용한다.

// 요소가 객체인 경우에는 .findIndex()사용
const arr = [
    {color : 'red'},
    {color : 'black'},
    {color : 'blue'},
    {color : 'green'},
    {color : 'black'},
];
console.log(arr.findIndex((el)=>el.color==='blue')) // 2
// 콜백함수의 인자로 객체가 들어옴
// 단, 해당된 요소가 1개 이상인 경우 제일 앞쪽의 index를 리턴 
console.log(arr.findIndex((el)=>el.color==='black')) // 1

이 index를 이용해 배열에 접근해보자.

// index를 이용해 배열에 접근하기
const idx = arr.findIndex((el)=>el.color==='blue');
console.log(arr[idx]); // {color : 'blue'}
// 하지만 굳이 findIndex를 사용하지 않고 .find메소드를 사용함
// .find메소드를 사용하면 조건에 일치하는 요소를 그대로 가져오기 때문
const element = arr.find((el)=>el.color==='black');
console.log(element); // {color : 'black'}

 

 

3. 배열을 필터링하기

const arr = [
    {num : 1, color : 'red'},
    {num : 2, color : 'black'},
    {num : 3, color : 'blue'},
    {num : 4, color : 'green'},
    {num : 5, color : 'red'},
    {num : 6, color : 'blue'},
];
console.log(arr.filter((el)=>el.color==='blue')); // [{num : 3, color : 'blue'}, {num : 6, color : 'blue'},]
// 해당하는 모든 (객체)요소가 배열로 리턴됨

 

 

4. 배열 정렬하기

const chars = ['나','다','가'];
console.log(chars); // ['나','다','가']
// 사전순으로 정렬하기 위해서는 .sort메소드를 사용
chars.sort();
console.log(chars); // ['가','나','다']
// .sort는 새로운 배열을 리턴하는게 아닌 원본 배열을 정렬함

.sort메소드는 문자열을 기준으로 정렬을 하기 때문에 숫자의 경우 원하는 순서대로 정렬되지 않는다.

let number = [0,1,2,30,10,3,20];
number.sort();
console.log(number); // [0,1,10,2,20,3,30]
// 숫자를 오름차순으로 정렬하기 위해서는 .sort()의 인자로 비교함수를 만들어서 넣어주어야함
// 비교함수 -> 오름차순
const compare = (a,b) => {
    if(a>b){
        return 1; // 큰 값이 뒤에 위치
    }
    if(a<b){
        return -1; // 작은 값이 앞에 위치
    }
    return 0; // a=b일때 자리를 바꾸지 않음
}
number.sort(compare);
console.log(number); // [0,1,2,3,10,20,30]
// 내림차순 정렬을 하는 경우에는 부호를 바꿔주면 됨
const compare = (a,b) => {
    if(a>b){
        return -1; // 작은 값이 뒤에 위치
    }
    if(a<b){
        return 1; // 큰 값이 앞에 위치
    }
    return 0; // a=b일때 자리를 바꾸지 않음
}

 

---

📍 단락 회로 평가

뒤에 오는 피연산자를 확인할 필요 없이 연산을 끝내버리는 것

1 ) && (AND)
false && true => 모두 true일 때만 true이므로 앞에 false가 온 경우 평가가 종료됨

2) || (OR)
true || false => 하나만 true여도 true이므로 앞에 true가 온 경우 평가가 종료됨

📌 truthy / falsy한 값인 경우에도 해당한다.

const getName = (person) =>{
    const name = person && person.name;
    return name || '이름이 등록되지 않았습니다.';
};
let person; // 할당을 해주지 않아 undefined 상태
const name = getName(person);
console.log(name); // 이름이 등록되지 않았습니다.