25일차 - javascript (배열 퀴즈, 객체)

퀴즈3

// var tvxq = ['유노윤호', '최강창민', '영웅재중', '믹키유천', '시아준수'];

// while (true) {
//   var menuInput = +prompt(`현재 멤버: [${tvxq}]\n메뉴를 선택하세요.\n1. 새로운 이름 추가\n2. 기존 이름 삭제\n3. 프로그램 종료`);
  
//   if (menuInput === 1) {
//     // 새로운 멤버 이름 입력
//     var newMember = prompt('새로운 멤버 이름을 입력하세요.');
//     tvxq.push(newMember);
//     alert(`${newMember}이(가) 추가되었습니다.`);
//     break;
//   } else if (menuInput === 2) {
//     // 삭제할 멤버 이름 입력
//   var delMember = prompt(`삭제할 멤버의 이름을 입력하세요.`);
//   for (var i = 0; i < tvxq.length; i++) {
//     if(tvxq[i] === delMember) {
//       alert(`${delMember}이(가) 삭제되었습니다.`);
//       break;
//     }
//   }
//   } else {
//     alert('프로그램을 종료합니다.');
//     break;
//   }
// }



var tvxq = ['유노윤호', '최강창민', '영웅재중', '믹키유천', '시아준수'];

while (true) {
  var choice = prompt(
    `현재 멤버: [${tvxq}]\n메뉴를 선택하세요.\n1. 새로운 이름 추가\n2. 기존 이름 삭제\n3. 프로그램 종료`
  );
  if (choice === '1') {
    var newName = prompt('추가할 새로운 멤버의 이름을 입력하세요.');
    tvxq.push(newName);
    alert(`${newName}이(가) 추가되었습니다.`);
  } else if (choice === '2') {
    var delName = prompt('삭제할 멤버의 이름을 입력하세요.');
    var idx = tvxq.indexOf(delName);
    if (idx !== -1) {
      tvxq.splice(idx, 1);
      alert(`${delName}이(가) 삭제되었습니다.`);
    } else {
      alert(`${delName}은(는) 잘못된 이름입니다.\n다시 입력하세요!`);
    }
  } else if (choice === '3') {
    alert('프로그램을 종료합니다.');
    break;
  } else {
    alert('잘못된 입력입니다. 메뉴 번호를 정확하게 입력해주세요.');
  }
}

3-2. 객체 기초

• 순서가 중요하면 배열
• 순서가 안중요하면 객체

자바스크립트 객체의 구조

• 자바스크립트는 객체기반의 언어, 기본 타입을 제외한 모든 것(배열, 함수, 객체 등)은 모두 객체라고 표현
• 객체는 0개 이상의 프로퍼티(property)로 구성된 집합 자료구조
  -> 프로퍼티는 키(key)와 값(value)의 쌍으로 구성

// 객체 생성
// 우리 집 강아지 정보 저장
var name = "뽀삐";
var kind = "진돗개";
var age = 3;
var injection = true;
var favorite = ["산책", "간식"];
var bark = () => console.log("왈왈!");

var dog = {
  name: '콩순이',
  kind: '진돗개',
  favorite: ["낮잠", "방 어지르기"],
  age: 3,
  injection: true,
  bark: () => console.log("왈왈!")
};

var cat = {
  name: '콩순이',
  kind: '진돗개',
  favorite: ["낮잠", "방 어지르기"],
  age: 3,
  injection: true,
  bark: () => console.log("왈왈!")
};

console.log(dog.name);
console.log(cat.name);

var 게시판글 = {
  글번호: 11,
  작성자: {
    계정명: 'abc',
    닉네임: '깜찍이',
    가입일자: '2023-12-12'
  },
  글내용: 'ㅎㅇㅎㅇㅎㅇ하아이',
  작성일자: "2024-03-26"
};

console.log('=======================');

// 객체에 저장된 데이터 참조(조회)
console.log(dog.age);
console.log(cat.injection);
console.log(cat.favorite[1]); // 배열문법 사용

// 데이터 타입 : 어떤 데이터가 할 수 있는 일을 정의
dog.age++ // age는 number타입
!dog.injection // injection은 논리타입
// favorite은 배열타입이라 배열문법 사용가능
dog.favorite.push('꼬리흔들기'); 
cat.favorite.splice(0, 1);

// slice로 추출했으니 사본이 바뀜 (원본 그대로)
dog.favorite.slice(0).splice(1,1).reverse();
console.log(dog.favorite);

dog.favorite.splice(1,1);
dog.favorite.reverse();
console.log(dog.favorite);

// 객체를 참조하는 두번째 방법
console.log('======================');

var key = 'name';
console.log(dog.name);
console.log(dog['name']);
console.log(dog[key]);
// console.log(dog[name]);

// 프로퍼티 수정 (기존에 있는 key로 접근)
console.log('======================');

dog.age = 4;
cat.favorite[1] = '실뭉치';

// console.log(dog);
// console.log(cat);

// 프로퍼티 동적 추가 (기존에 없는 key로 접근)
console.log('======================');

cat.friend = '철수';

console.log(cat);

// 프로퍼티 삭제
delete cat.hate;
delete cat.friend;
delete cat.favorite[1];
console.log(cat);

• 객체를 생성할 때 무작위 수정가능
• 객체안의 객체 생성가능
• 객체에 저장된 데이터 참조(조회)가능
  -> 객체를 참조할 때 아래와 같은 3가지 방법으로 가능

var key = 'name';
console.log(dog.name); // 첫번째 방법: .key
console.log(dog['name']); // 두번째 방법: ['key'] - 꼭 따옴표를 써야됨!
console.log(dog[key]); // 세번째 방법: 따로 변수로 저장 후 출력

• 배열타입으로 생성된 객체는 배열 문법 적용가능 ([i], splice, reverse ... )
• 객체 수정 가능 (기존에 있는 key로 접근)
• 객체 동적 추가 가능 (기존에 없는 key로 접근)
• 객체 삭제 가능

in 연산자로 프로퍼티 존재 여부 확인하기 (for ~ in문)

var phone = {
  company: '삼성',
  color: '펄 화이트',
  model: '갤럭시 S24 Ultra',
  price: 1200000
};

// 값이 아닌 키가 반복됨
for (var data in phone) {
  // console.log(data);
  console.log(phone[data]); // data의 타입이 string이므로 []로 참조(조회)
  // console.log(typeof data);
}

const user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (const key in user) {
  // 키
  alert( key );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[key] ); // John, 30, true
}



// 객체 프로퍼티 유무 확인
// phone에 새로운 프로퍼티 추가하고 싶음
// console.log('memory' in phone); // false
// phone.memory = '32GB';
// console.log('memory' in phone); // true

// phone에 memory가 없으면 추가


// 아래 두가지는 동일한 방식
if (!('memory' in phone)) {
  phone.memory = '32GB';
}
console.log(phone);

var newkey = 'memory';
if (!(newkey in phone)) {
  phone[newkey] = '32GB';
}
console.log(phone);

• for-in문 은 값이 아닌 키가 반복된다는 점에 주의
• 새로운 프로퍼티가 추가하고 싶으면 유무를 확인하고 추가! (이미 존재한다면 수정이되므로 꼭 유무여부를 확인해야함)

객체의 중첩구조

//객체의 중첩구조
//예시 : 게시판

var articles = {
  totalCount: 25578,  //총 게시물 수
  admin: 'abc1234', //게시판 관리자 아이디
  page: 2558, //총 페이지 수
  articleList: [ // 게시물 목록
      {
          bno: 3, //글번호
          title: '가위바위보', //글제목
          writer: '김짱껨뽀',  //작성자
          content: '다덤벼 ^^', //글내용
          viewCount: 53, //조회수
          recomm: 10, //추천수
          regDate: '21-12-07' //작성일자
      }, 
      {
          bno: 2, //글번호
          title: '노는게', //글제목
          writer: '뽀로로',  //작성자
          content: '제일조와~~~', //글내용
          viewCount: 253, //조회수
          recomm: 11, //추천수
          regDate: '21-12-06' //작성일자
      }, 
      {
          bno: 1, //글번호
          title: '아멘', //글제목
          writer: '개신교신자',  //작성자
          content: '할렐루야', //글내용
          viewCount: 23, //조회수
          recomm: 5, //추천수
          regDate: '21-12-05' //작성일자
      }
  ]
};

console.log(articles.articleList.length);
console.log(articles.articleList[2].content);

console.log('=======================');

// 모든게시물의 작성자이름을 전부 추출해서 반복출력
// articles.articleList는 배열이므로 for of 문으로 작성!
for(var bbs of articles.articleList) {
  console.log(bbs.writer);
}

• 객체 안에 배열이 존재할 때 배열에 대한 부분은 배열문법으로 해결가능!! 위에서도 for of문을 통해 추출하였다!

---

퀴즈1

/*
Q1. 아래 문제를 각각 풀어보세요.
1. 빈 객체 user를 만듭니다.
2. user에 키가 name, 값이 John인 프로퍼티를 동적 추가하세요.
3. user에 키가 surname, 값이 Smith인 프로퍼티를 동적 추가하세요.
4. name의 값을 Pete로 수정해보세요.
5. user에서 프로퍼티 name을 삭제하세요.
*/
var user = {};
user.name = 'John';
user.surname = 'Smith';
user.name = 'Pete';
delete user.name;
console.log(user);

/*
Q2. 모든 팀원의 월급에 대한 정보를 담고 있는 객체가 있다고 해봅시다.
var salaries = {
  kim: 1000000,
  park: 1600000,
  lee: 1300000
}
- 모든 팀원의 월급을 합한 값을 구하고, 
  그 값을 변수 total에 저장해주는 코드를 작성해보세요. 
  total엔 3900000이 저장되어야겠죠?
*/
var salaries = {
  kim: 1000000,
  park: 1600000,
  lee: 1300000
}

var total = 0;
for (var money in salaries) { // money - 키
  total += salaries[money]; // salaries[money] - 값
}
console.log(total); 

퀴즈2 (회고)

var userInfo = {
  userList: [
    {
      account: 'kim1234',
      password: 'kkk1234',
      username: '김두한',
    },
    {
      account: 'park9876',
      password: 'ppp9999',
      username: '박찬호',
    },
    {
      account: 'hong7766',
      password: 'hhh1234',
      username: '홍길동',
    },
  ],
};
/*
Q. 회원의 아이디정보와 비밀번호 정보가 들어있는 객체 user가 있습니다. 
   아래 요구사항에 맞는 프로그램을 작성하고 브라우저에서 테스트하세요.
    
- 요구사항
1. 사용자에게 아이디를 입력받으세요.
2. 입력된 아이디가 객체에 존재하는 key가 아니라면
   "존재하지 않는 회원입니다"를 출력하세요.
3. 아이디가 존재한다면 비밀번호를 입력받으세요.
4. 비밀번호가 입력한 아이디에 대응해서 일치한다면
   "로그인 성공"을 출력하고 반복문을 탈출하세요.
5. 비밀번호가 다르다면 "비밀번호가 틀렸습니다" 를 출력하세요.
6. 로그인이 성공할때까지 반복하세요.
*/

// 위 객체에서 배열만 추출
var userList = userInfo.userList;

// 계정을 입력받고 해당 계정이 존재하는지 확인
var inputAccount = prompt('아이디를 입력하세요.'); // 사용자 입력한 계정명

// 회원목록 배열을 반복순회하여 입력한 계정명과 일치하는 계정이 있는 체크
var foundUser = null;
for (var user of userList) {
  if(inputAccount === user.account) {
    foundUser = user;
    break;
  }
}


if (foundUser !== null) {
  // console.log('회원가입 했네?');
  // 비번 검증
  // 사용자에게 비번 입력받기
  var inputPassword = prompt('비번을 입력하세요.');
  if(inputPassword === foundUser.password) {
    alert(`${foundUser.username}님 로그인 성공!!`);
  } else {
    alert('비번 틀렸어!');
  }
} else {
  alert('가입부터 하지?');
}

• 위 퀴즈에서 가장 중요한 부분은 아래부분이다.

// 회원목록 배열을 반복순회하여 입력한 계정명과 일치하는 계정이 있는 체크
var foundUser = null;
for (var user of userList) {
  if(inputAccount === user.account) {
    foundUser = user;
    break;
  }
}

• 여기서 var foundUser = null; 을 만든 이유를 설명해주겠다.
  위 for문을 확인해보면 입력한 아이디와 user의 아이디가 일치하면 비밀번호를 입력하고 비밀번호 검증을 하게된다.
  여기서 var foundUser = user; 코드를 입력하여 입력한 아이디에 맞는 user의 정보를 모두 founduser에게 전해주고 for문을 마친다면 코드를 깔끔하게 나누어 쓸 수 있고 이후에 founduser를 통해 비밀번호 검증코드를 쉽게 짤 수 있다.
• 나는 아래 코드처럼 for문 안에 if문과 else를 같이 넣어 정확하게 풀기 어려웠는데 저렇게 맞는지 틀린지 확인해주는 증거를 남겨놓으면 다음 단계로 넘어가기 쉽다는 것을 깨달았다.

// while (true) {
//   var idInput = prompt("아이디를 입력하세요.");

//   // var isPresentAccount = false;
//   // 1. 입력된 아이디가 객체에 존재하는 key라면
//   for (var user of userInfo.userList) {
//     if (user.account === idInput) {
//       var passwordInput = prompt("비밀번호를 입력하세요.");

//       // 비밀번호 일치 여부
//       for (var user of userInfo.userList) {
//         // 일치
//         if (idInput === user.account && passwordInput === user.password) {
//           alert("로그인 성공!");
//         } else {
//           alert("비밀번호가 틀렸습니다.");
//         }
//         break;
//       }


//     // 2. 입력된 아이디가 객체에 존재하는 key가 아니라면
//     } else {
//       alert("존재하지 않는 회원입니다.");
//     }
//     break;
//   }
//   break;
// }