240731 걷기반 수업

오늘은 논리곱 연산자(&&), 논리합 연산자(||), 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() 메서드

: 참조 문자열이 정렬 순으로 지정된 문자열 앞 혹은 뒤에 오는지 또는 동일한 문자열인지 나타내는 수치를 반환한다.

 

오늘부터 팀프로젝트 시작이라.... 많이 바빠서 오늘은 이정도만 복습하겠습니다 >_<.....