코드스테이츠 프론트엔드 부트캠프 12일차

2023-04-26(수)

코드스테이츠 부트캠프 12일차

 

Section 1 Unit8 - [JavaScript] 배열, 객체

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Chapter 2. 객체

입력하는 정보는 사용자마다 다르고 각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가

동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 구 있습니다.

 

이렇게 공통적인 속성을 가지는 경우 객체를 사용해야 합니다.

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Chapter 2-1. 객체 기초

객체 (Object)

-> 회원 주소록을 만들어본다고 가정해봅시다.

매번 이런 식으로 여러 개의 변수를 꼭 선언해줘야 할까요? 

각 변수는 이름으로 구분할 수 있을 뿐, 서로 어떠한 관계도 없습니다.

 

-> 배열을 써보면 어떻게 될까요

let user = [

  'Steve', 'Lee', 'steve@codestates.com', 'Seoul', ];

= 각 값이 하나의 변수로 묶여있긴 하지만, 이 경우에는 각 index가 어떤 정보를 갖고 있는지 미리 알고 있어어 합니다.

= indx로 접근할 경우 가독성도 떨어집니다. ex) user[1] // Lee

 

-> 이럴때 사용하는게 객체입니다. 이러한 주소록에 적합한 자료 구조입니다. 

-> 객체의 선언은 다음과 같습니다.

 

let user = {

firstName : 'Steve', 

lastName : 'Lee',

email : 'steve@cdoestates.com',

city : 'Seoul'

};

 

fistName , lastName 같은 것들은 key 라고 부르고 'Steve', 'Lee' 같은 것들을 값 value라고  부릅니다.

키와 값 사이는 콜론 ( : ) 으로 구분합니다.

키와 값은 쉼표로 구분해줍니다.

중괄호를 이용해서 객체를 만듭니다.

 

-> 객체의 값을 사용하는 방법은 두 가지가 있습니다.

 

let user = {

firstName : 'Steve', 

lastName : 'Lee',

email : 'steve@cdoestates.com',

city : 'Seoul'

};

 

user.fristName;   //  'Steve'

user.city;  //  'Seoul'

= Dot notation

이런식으로 값을 가져올 수 있습니다.

 

user['firstName'];  // 'Steve'

user['city']; // Seoul

=Bracket notation

 

 

연습문제 

let tweet = {

writer : 'stevelee',

createdAt : '2019-09-10 12:03:33',

content : '프리코스 재밌어요!'

};

stevelee라는 아이디를 가진 유저가 SNS에 새로운 글을 올렸습니다. 

그가 작성한 글 "프리코스 재밌어요!" 라는 내용을 

bracket notation으로 어떻게 가져올까요?

 

답 = tweet[ 'content' ];

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Chapter 2-2 객체 다루기

사용법

tweet['content'] === tweet.content 는 같지만

tweet[content] 와 tweet.content 는 다르다

 

차이점

Bracket notation 과  Dot notation 의 차이점

Bracket notation 은 키값이 변할때나 동적일때 써야한다.

 

공통점

Bracket notation 과  Dot notation 둘다 키를 추가할 수 있다.

키값의 밸류로는 어떠한 값의 클래스가 오던 괜찮다.

 

DELETE

delete 키워드를 이용해 삭제가 가능합니다.

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

코플릿 헷갈렸던 문제

10번문제 / 12번문제 / 15번문제 / 17번문제 / 21번문제 

 

복습

10번문제

객체를 입력받아 'firstName', 'lastName' 속성값 사이에 띄어쓰기 하나를 둔 단일 문자열을

fullName 속성값으로 할당해야 합니다.

-입출력 예시 -

const person = {
  firstName: 'Jade',
  lastName: 'Smith',
};

addFullNameProperty(person);
console.log(person.fullName); // --> 'Jade Smith'

function addFullNameProperty(obj) {

  obj.fullName = obj.firstName + ' ' + obj.lastName;

}

으로 입력하면 되는데 여기서 두 객체를 합칠때는 이문제에서 fullname 이라는 변수를 객체안에 생성하고 그안에 

두 값을 합친 문자열을 넣는 방식인데 두 값을 합칠때는 + 를 사용하여 두 값을 합치고 문자열 ( '  ' )을 사용하여

두 값들이 합쳐지는 값 사이에 띄어쓰기를 사용하여 값을 나타낼 수 있게 된다.

 

 

12번문제

객체를 입력받아 속성의 개수를 리턴해야 합니다.

-입출력 예시 -

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

let output = countNumberOfKeys(obj);
console.log(output); // --> 3

function countNumberOfKeys(obj) {

  return Object.keys(obj).length; // Objcet.keys == 객체의 속성 이름들을 순회되는 열거할 수 있는 배열로 반환

}

으로 입력하면 되는데 이 문제는 몇개의 속성을 가지고 있는지 숫자형으로 리턴해줘야 하는 문제인데

여기서 Object.keys 라는 메서드를 사용하여 오브젝트 안에 key값들을 배열로 변환할 수 있게된다.

이렇게 key값들을 배열로 변환한 후 그 배열로 변환한 값의 길이를 측정해 속성의 개수를 출력하는 형식으로 해결한다.

여기서 velue의 값의 수를 출력하고 싶다면 Object.value 라는 메서드를 사용하여 value의 값들을 배열로 변환하여 진행

 

15번문제

배열과 객체를 입력받아 배열의 각 요소들을 객체의 키로 했을 때 그 값을 추출하여 만든 새로운 객체를 리턴해야 합니다.

-입출력 예시-

const arr = ['a', 'c', 'e'];
const obj = { a: 1, b: 2, c: 3, d: 4 };

let output = select(arr, obj);
console.log(output); // --> { a: 1, c: 3 }

function select(arr, obj) {

  let newObj = {};

  for (let prop in obj) {

    for (let i = 0; i < arr.length; i++) {

      if (prop === arr[i]) {

        newObj[prop] = obj[prop];

      }

    }

  }

  return newObj;

}

으로 입력하면 되는데 여기서 newObj라는 객체를 만들고 obj의 값들을 prop라는 변수를 만들어 반복문을 통해 모든 값을

넣고 다시 배열의 길이만큼 반복문을 돌려 prop안에 들어있는 값들이 배열의 첫번째 인덱스부터 마지막 인덱스의 값까지

들 중에서 같은것이 있다면 그 값들을 새롭게 만들어 놓은 newObj라는 객체안에 넣어 중복되는 값들을 출력할 수 있게 

진행하면 된다. 만악 여기서 문제가 중복되는 값들을 빼고 새로운 값들을 추가해줘야 했다면

첫번째 if 문을 (!(prop === arr[i])와 같이 바꿔주면 된다.

 

17번문제

배열과 수를 입력받아 수가 가리키는 인덱스에 해당하는 객체의 'name' 속성값을 리턴해야 합니다.

-입출력 예시-

let output = getValueOfNthElement([{ name: 'Kelly' }, { name: 'Anna' }], 1);
console.log(output); // --> 'Anna'

output = getValueOfNthElement([{ name: 'Kelly' }, { name: 'Anna' }], 2);
console.log(output); // --> 'Anna'

output = getValueOfNthElement(
  [{ name: 'Jim' }, { name: 'Tim' }, { name: 'Pooh' }],
  1
);
console.log(output); // --> 'Tim'

output = getValueOfNthElement([], 0);
console.log(output); // --> 'no name'

function getValueOfNthElement(arr, num) {

  if (!arr.length) {

    return 'no name';

  } else if (num > arr.length - 1) {

    return arr[arr.length - 1]['name'];

  } else {

    return arr[num]['name'];

  }

}

으로 입력하면 되는데 여기서 배열의 길이가 존재하지 않는다면 'no name'을 리턴해주고 , 2번째 예시에서 num값이 배열

의 길이보다 큰 값인 2를 입력받았을 경우에는 가장 마지막 인덱스 값을 출력해주고 그렇지 않은 경우에들은 모두경우에는

모두 입력받은 숫자의 인덱스 값들을 출력해주는 형식으로 마무리 한다.

 

 

21번문제

문자열을 입력받아 가장 많이 반복되는 문자(letter)를 리턴해야 합니다.

-입출력 예시-

 

let output = mostFrequentCharacter('apples not oranges');
console.log(output); // --> 'p'

output = mostFrequentCharacter('hello world');
console.log(output); // --> 'l'

output = mostFrequentCharacter('   ');
console.log(output); // --> ''

output = mostFrequentCharacter('');
console.log(output); // --> ''

output = mostFrequentCharacter('abba');
console.log(output); // --> 'b'

function mostFrequentCharacter(str) {

  let obj = { mostCount: 0, mostFrequent: '' };

  for (let i = 0; i < str.length; i++) {

    if (str[i] === ' ') {

      continue;

    }

    if (obj[str[i]] === undefined) {

      obj[str[i]] = 0;

    }

    obj[str[i]] += 1;

    if (obj[str[i]] > obj['mostCount']) {

      obj['mostCount'] = obj[str[i]];

      obj['mostFrequent'] = str[i];

    }

  }

  return obj['mostFrequent'];

}

으로 입력하면 되는데 여기서는 새로운 객체를 생성하여 카운트 값을 넣어 가장 많은 문자를 카운트 할 수 있게 해주고

가장 많이 반복되는 문자열을 넣기위한 변수를 생성한다.

 

이후 입력받은 문자열의 길이만큼 반복문을 돌린 후 첫번째 조건에서 띄어쓰기를 제외하기 위한 조건을 넣어

만약 문자가 띄어쓰기라면 continue; 종료문을 사용하여 즉시 종료하여 제외하도록 진행을 시켜준다.

 

두번째 조건에서는 만약 문자가 새로 만들어 놓은 객체에 하나씩 문자를 집어넣는 과정에서 해당 문자가 존재 하지 않다면

0의 값을 주고 카운트를 1 올려준다. 여기서 카운트 1을 올려주는 이유는 존재하지 않았기 때문에 값을 넣어주고 넣어준 후

1을 추가해주는 형식이다.

 

예를들면 hello를 입력받아 반복문과 조건을 통해 h부터 시작이 될텐데 h라는 값이 처음 생성한

obj라는 객체안에 존재하지 않기 때문에 h = 0이라는 변수와 값을 생성해 넣어두고 동시에 h라는 값이 한개 들어왔기 때문

에 카운트 1을 올려주는 형식이다

 

 

이런식으로 진행이 되면서 다음 조건으로 넘어오면 

새롭게 넣어준 값보다 처음 카운트 하기위해 넣어준 mostCount 값보다 크다면 그 값을 저장하고 해당 문자를 

가장 반복되는 문자열을 넣기 위해 만들어 놓은 변수안에 넣는다.

 

이렇게 계속 반복문을 통해 중복되는 문자는 카운트가 증가하고 가장 많은 카운트가 나온 문자는 

가장 반복되는 문자열을 넣기 위해 만들어 놓은 변수안에 넣기 때문에 최종적으로 가장 많이 출력된 문자가

이 변수안에 들어가 있을것이기 때문에 반복문이 종료된 후 리턴값을 obj 객체안에 생성해 놓은 mostFrequent 라는 변수를

리턴해주면 된다.