오늘은 논리곱 연산자(&&), 논리합 연산자(||), find 메서드, sort 메서드 이렇게 4가지에 대해서 배웠다.
논리곱 연산자와 논리합 연산자는 javascript 문법 강의에서 나왔어서 익숙하지만 find와 sort 메서드는 처음 보기에 논리 연산자보다 메서드에 더 집중을 했던것 같다.(물론 둘 다 집중했지만...^^)
1. 논리곱 연산자 ( && )
논리곱 연산자는 모든 조건이 참(true)이여야 참(true)이다.
true && true // ture
true && false // false
false && true // false
false && false // false
2. 논리합 연산자 ( | | )
논리합 연산자는 둘 중 하나가 참(true)이면 참(true)이다.
true || true // true
true || false // true
false || true // true
false || false // false
3. && 와 | | 의 예제
#
let age = 25;
let isMember = true;
// 나이가 18세 이상이면서 회원이어야 접근 가능
if (age >= 18 && isMember === true) {
console.log("접근 허용");
} else {
console.log("접근 불가");
}
// 예상 출력: 접근 허용
조건이 ~이면서 ~이어야 접근 가능이기 때문에 2가지 조건을 다 만족해야 한다. 따라서 논리곱 연산자(&&)를 사용해주면 된다.
여기서 if 조건문은 ()안이 true일 때만 {}안에 실행문을 실행시키기 때문에
if (age >= 18 && isMember) {
console.log("접근 허용");
} else {
console.log("접근 불가");
}
간단하게 isMember === true 말고 isMember만 작성해줘도 된다.
#
let isNotLoggedIn = false;
let isAdmin = true;
// 로그인 상태이거나 관리자여야 접근 가능
if (!isNotLoggedIn || isAdmin) {
console.log("관리자 페이지에 접근 가능");
} else {
console.log("관리자 페이지에 접근 불가");
}
조건이 ~이거나 ~이여야 접근 가능이기 때문에 2가지 조건중 1가지만 만족시키면 된다. 따라서 논리합 연산자(||)를 사용해주면 된다.
더 어려운 예제를 들어보겠다.
#
let purchaseAmount = 150;
let isGoldMember = false;
let isSilverMember = true;
// 구매 금액이 100 이상이고 골드 회원이거나 실버 회원이면 할인을 적용
// (1) 구매 금액이 100이상이다.
// (2) 골드 회원이거나 실버 회원이다.
if (purchaseAmount >= 100 && (isGoldMember || isSilverMember)) {
console.log("할인 적용");
} else {
console.log("할인 미적용");
}
조건이 3가지 조건이 있는데 1가지 조건은 무조건 true여야 하고 나머지 2개의 조건은 둘 중 하나만 true이면 된다. 따라서 먼저 판단해야하는 조건에 괄호()를 써주면 괄호 안을 먼저 판단하고 튀어나온 true나 false를 가지고 나머지 조건과 판단할 수 있다.
즉, purchaseAmount >= 100 && (isGoldMmber | | isSilvermember)중에 (isGoldMmber | | isSilvermember)를 먼저 판단해서 true가 나오고 이 true랑 purchaseAmount가 150이여서 true니깐 true && (false | | true) = true && true = true이다.
4. find 메서드
find는 filter와 95% 똑같은 메서드이다. 5% 다른점은 filter는 조건에 만족하면 모두다 반환하지만, find는 조건에 만족하는 첫번째만 반환한다.
const 회원명부 = [
{
이름: "홍길동",
나이: 25,
성별: "male",
},
{
이름: "홍길순",
나이: 30,
성별: "female",
},
{
이름: "홍길자",
나이: 40,
성별: "female",
},
];
// 회원명부에서 여자인 첫 번째 회원을 찾아보세요.(find 이용)
여자 = 회원명부.find(function (a) {
return a.성별 === "female";
});
console.log(여자);
// 예상 출력: { '이름': '홍길순', '나이': 30, '성별': 'female' }
이렇게 성별이 female인 사람이 홍길순, 홍길자로 2명이 있는데도 find는 첫번째 요소인 홍길순만 출력한다.
5. sort 메서드
- 배열의 정렬 메서드이다.
- 원본배열이 바뀌는 영향이 있다.
- sort도 콜백함수를 가지는데 콜백함수는 인자(input)를 2개 가진다.
- 콜백함수의 return에 필요한 것은 '숫자'이다.
- 숫자로 이루어진 배열을 정렬할 때는 a - b(오름차순), b - a(내림차순)가 가능하다.
- 문자로 이루어진 배열을 정렬할 때는 localeCompare이 필요하다.
function sortArray(arr) {
const result = arr.sort(function (a, b) {
return a - b;
});
return result;
}
function sortArray2(arr) {
const result = arr.sort(function (a, b) {
return a.localeCompare(b);
});
return result;
}
console.log(sortArray([3, 1, 4, 1, 5, 9])); // 출력: [1, 1, 3, 4, 5, 9]
console.log(sortArray2(["바나나", "사과", "포도"])); // 출력: ['바나나', '사과', '포도']
sort 메서드 input의 콜백함수는 두개의 숫자를 매개변수로 가져야 한다. 따라서 문자열이 들어간다면 오류가 뜰 것이다. 오류를 방지하기 위해서 위에서 보이는 것처럼 localeCompate을 사용하면 문자열도 숫자로 바꿀 수 있다.
.
.
.
# 참고
localeCompare이 정확히 뭔지 모르겠어서 검색해보았다.
localeCompare() 메서드
: 참조 문자열이 정렬 순으로 지정된 문자열 앞 혹은 뒤에 오는지 또는 동일한 문자열인지 나타내는 수치를 반환한다.
오늘부터 팀프로젝트 시작이라.... 많이 바빠서 오늘은 이정도만 복습하겠습니다 >_<.....
'수준별 분반' 카테고리의 다른 글
리액트 베이직반 수업 1일차 (0) | 2024.08.12 |
---|---|
240801 걷기반 실습 (0) | 2024.08.01 |
240730 걷기반 실습 (0) | 2024.07.30 |
240729 걷기반 수업 (0) | 2024.07.29 |
240726 걷기반 실습 (1) | 2024.07.26 |