[C/F TIL] 12일차 - JavaScript 객체

Code States
Front-end boost camp
Today
I
Learned

🥝 상꼼한 키위가 땡기는 4월 26일, 12일차 객체 수업 시작쿠.

---

🥝 객체

• 키와 쌍으로 이루어져 있다.

• 키, 값 사이는 콜론(:)으로 구분
  
  -- 자료 : 코드스테이츠 제공

• 객체의 값을 사용하는 방법 :
  -- 방법 1 : Dot notation (정해진 key 값이 있을 때)

let user = {
	firstName: 'Steve',
    lastName: 'Lee',
    email: 'steve@codestates.com',
    city: 'Seoul'
};

user.firstName; // 'steve'
user.city; // 'Seoul'

-- 방법 2: Bracket notation (key값이 바뀔 때 사용)

let user = {
	firstName: 'steve',
    lastName: 'Lee',
    email: 'steve@codestates.com',
    city: 'Seoul'
};

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

// '', "", `` 모두 사용 가능하다.
// 사용하지 않는 건 안된다!! 변수로 취급 됨. 반드시 ! '' "" `` 문자열 사용!

• Dot notation과 Bracket notation이 같은 경우

let tweet = {
  writer: 'stevelee',
  createdAt: '2019-09-10 12:03:33',
  content: '프리코스 재밌어요!'
};

tweet['content'] === tweet.content; // true

• Dot/Bracket notation을 이용해 값을 추가할 수 있다.

let tweet = {
  writer: 'stevelee',
  createdAt: '2019-09-10 12:03:33',
  content: '프리코스 재밌어요!'
};

tweet['category'] = '잡담';
tweet.isPublic = true;
tweet.tags = ['#코드스테이츠', '#프리코스'];

// 삭제 : createdAt 키-값 쌍을 지웁니다.
// delete tweet.crearedAt;
// tweet = {writer: 'stevelee', content: '프리코스 재밌어요!'}

• in 연산자를 이용해 해당하는 키가 있는지 확인 가능

let tweet = {
  writer: 'stevelee',
  createdAt: '2019-09-10 12:03:33',
  content: '프리코스 재밌어요!'
};

'content' in tweet; // true
'updatedAt' in tweet; // false

🥝 객체 문제 풀어보기

• 문제1) 객체와 키를 입력받아 키에 해당하는 값 리턴
  -- 입력 : 인자1 - obj(임의의 속성을 갖는 객체)/ 인자2 - property(string 타입)
  -- 출력 : 입력받은 키에 속한 값을 리턴
  -- 키에 해당하는 값이 없을 경우, undefined을 리턴

function getProperty(obj, property) {
  return obj[property];
}

• 문제2) 객체와 키를 입력받아 키에 해당하는 값을 true로 설정
  -- 입력: 인자1 - obj(임의의 속성을 갖는 객체)/ 인자2 - property(string 타입의 키)
  -- 출력 : 별도의 리턴문을 작성하지 않습니다.
  -- 주의사항 : 함수에 명시적인 리턴문이 없는 경우 함수의 리턴값을 어찌되나 확인해봅시다.

function addProperty(obj, property) {
  obj[property] = true;
}

• 문제3) 객체와 키, 값을 입력받아 키에 값을 할당해야 합니다.
  -- 입력 : 인자1 - obj(임의의 속성을 갖는 객체)/ 인자2 - property(string 타입의 키)/ 인자3 - value (기본자료형, number, string 등)
  -- 출력 : 별도의 리턴문을 작성하지 않는다
  -- 이미 정의된 속성에 해당하는 키 값을 입력받을 경우 입력받은 값을 덮어씀

function addPropertyAndValue(obj, property, value) {
  obj[property] = value;
}

• 문제4) 두 개의 객체와 키를 입력받아 첫번째 객체의 키에 두번째 객체를 할당
  -- 입력 : 인자1 - obj1(임의의 속성을 갖는 객체)/ 인자2 - property (string 타입의 키)/ 인자3 - obj2 (임의의 속성을 갖는 객체)
  -- 출력 : 별도의 리턴문을 작성하지 않는다

function addObjectProperty(obj1, property, obj2) {
  obj1[property] = obj2;
}

• 문제5) 객체와 키를 입력받아 키가 가르키는 속성(property) wprj
  -- 입력 : 인자1 - obj(임의의 속성을 갖는 객체)/ 인자2 - property(string 타입의 키)
  -- 출력 : 별도의 리턴문 작성하지 않는다.

function removeProperty(obj, property) {
  delete obj[property];
}

• 문제6) 객체를 입력받아 'number'타입을 값을 갖는 속성을 모두 제거
  -- 입력 : 인자1 - obj(임의의 속성을 갖는 객체)
  -- 출력 : 별도의 리턴문을 작성하지 않는다

function removeNumberValues(obj) {
  for (let prop in obj) {
    if (typeof obj[prop] === 'number') {
      delete obj[prop];
    }
  }
}

• 문제7) 객체를 입력받아 배열을 값으로 갖는 속성을 모두 제고
  -- 입력 : 인자1 - obj (임의의 속성을 갖는 객체)
  -- 출력 : 별도의 리턴문을 작성하지 않는다.

function removeArrayValues(obj) {
  // for ... in 문 : 객체에서만 사용, 

  for (let prop in obj) {
    if (Array.isArray(obj[prop]) === true) {
      delete obj[prop];
    }
  }
}

• 문제8) 객체를 입력받아 홀수를 값으로 갖는 속성을 모두 제거
  -- 입력 : 인자1 - obj (임의의 속성을 갖는 객체)
  -- 출력 : 별도의 리턴문을 작성하지 않습니다.
  -- 홀수 판단은 'number'타입에만 적용합니다.

function removeOddValues(obj) {
  for (let prop in obj) {
    if (obj[prop] % 2 !== 0 && typeof obj[prop] === 'number') {
      delete obj[prop];
    }
  }
}

• 문제9) 객체를 입력받아 객체가 가진 age 속성값이 합법적으로 투표할 수 있는 나이(18세 이상)인지 여부를 리턴
  -- 입력 : 인자1 - person(age 속성을 갖는 객체)
  -- 출력 : boolean 타입 리턴

// 내가 쓴 답, 정답은 맞았다.
function isPersonOldEnoughToVote(person) {
  for (let age in person) {
    if (person[age] >= 18 && typeof person[age] === 'number') {
      return true;
    }
    else {
      return false;
    }
  }
}

-- 하지만 typeof 코드를 빼고, for문은 돌리지 않아도 될 듯

// 레퍼런스 정답
function isPersonOldEnoughToVote(person) {
  if (person.age >= 18) {
    return true;
  } else {
    return false;
  }
}

• 문제10) 객체를 입력받아 'firstName', 'lastName' 속성값 사이에 띄어쓰기 하나를 둔 단일 문자열을 fullName 속성값으로 할당
  -- 입력 : 인자1 - obj (firstName, lastName 속성을 가진 객체)
  -- 출력 : 별도의 리턴문을 작성하지 않는다.

function addFullNameProperty(obj) {
  obj['fullName'] = `${obj['firstName']} ${obj['lastName']}`;
}

• 문제11) 수와 객체를 입력받아 입력받은 수보다 큰 수를 갖는 속성을 모두 제거
  -- 입력 : 인자1 - num (number타입의 수)/ 인자2 - obj(임의의 속성을 갖는 객체)
  -- 출력 별도의 리턴문은 작성 하지 않음

function removeNumbersLargerThan(num, obj) {
  for (let prop in obj) {
    if (obj[prop] > num && typeof obj[prop] === 'number') {
      delete obj[prop];
    }
  }
}

• 문제12 ) 객체를 입력받아 속성의 개수를 리턴해야 합니다.
  -- 입력 : 인자1 - obj(임의의 속성을 갖는 객체)
  -- 출력 : number 타입을 리턴

function countNumberOfKeys(obj) {
  return Object.keys[obj].length;
}

-- Object 클래스 알기

• 문제 13 ) 객체를 입력받아 키, 값 쌍을 표현하는 문자열을 리턴, 각 문자열은 한 줄에 '키: 값' 형태로 구성, 각 문자여 끝에는 줄바꿈 문자가 포함
  -- 입력 : 인자1 - obj(임의의 속성을 갖는 객체)
  -- 출력 : string 타입 이런
  -- 콜론 다음에 공백 포함 / 각 문자열 끝에 줄바꿈 문자 포함

function printObject(obj) {
  let keyvalue = '';

  for (let prop in obj) {
    keyvalue = keyvalue + prop + ': ' + obj[prop] + '\n';
  }
  return keyvalue;
}

-- 변수 prop과 obj[prop]의 차이 알기, 빈 문자열 '' 알기

• 문제 14 ) 객체, 키 , 수를 입력받아 주어진 키에 해당하는 값이 배열인 경우 수가 가르키는 인덱스에 해당하는 요소를 리턴
  -- 입력 : 인자1 - obj (임의의 속성을 갖는 객체)/ 인자2 - key (string 타입의 키)/ 인자3 - index (number 타입의 인덱스)
  -- 출력 : 배열의 요소를 리턴
  -- 주의사항 : 주어진 키에 해당하는 값이 배열이고 주어진 수가 배열의 범위를 벗어나지 않는 경우에만 배열의 요소 리턴/ 그 외의 경우, indefined를 리턴

function getElementOfArrayProperty(obj, key, index) {
  // 주어진 키에 해당하는 값이 배열임?
  // 1. 배열이고, 주어진 수가 배열의 범위를 벗어나지 않는 경우
  // 2. 그 외 ==> if

  if (Array.isArray(obj[key]) === false) {
    return undefined;
  } else if (Array.isArray(obj[key]) === true && index < obj[key].length) {
    return obj[key][index];
  }
}

• 문제 15) 배열과 객체를 입력받아 배열의 각 요소들을 객체의 키로 했을 때 그 값을 추출하여 만든 새로운 객체를 리턴
  -- 입력 : 인자1 - arr(string 타입을 요소로 갖는 배열)/ 인자2 - obj (임의의 속성을 갖는 객체)
  -- 출력 : 객체를 리턴해야 함
  -- 입력받은 객체에 존재하지 않는 키는 무시/ 입력받은 객체를 수정하지 않아야 함

function select(arr, obj) {
  let newObj = {};

  for (let key in obj) {
    for (let i = 0; i < arr.length; i++) {
      if (key === arr[i]) {
        newObj[key] = obj[key];
      }
    }
  }
  return newObj;
}

-- if문이 여기 왜 들어가나 잠시 헷갈렸는데, 배열의 index와 객체의 키 값이 맨투맨으로 완전하게 모든 값이 매칭되는 것이 아니므로, 맞는 경우만을 찾아준다. 그래서 if문 사용./ 여기서도 마찬가지로 key 와 obj[key]의 차이를 잘 알아야함

• 문제 16 ) 객체와 키를 입력받아 키에 해당하는 값이 배열인 경우, 마지막 요소를 리턴
  -- 입력 : 인자1 - obj (임의의 속성을 갖는 객체) / 인자2 - property (string 타입의 키)
  -- 출력 : 배열의 요소를 리턴해야 함
  -- 주어진 키에 해당하는 값이 배열이고, 빈 배열이 아닌 경우에만 배열의 요소를 리턴/ 그 외의 경우 undefined 리턴

function getLastElementOfProperty(obj, property) {
  // 배열인지 아닌지 확인 -> if절
  let arr = obj[property];

  for (let key in obj) {
    if (Array.isArray(arr) === false || arr.length === 0) {
      return undefined;
    } else {
      return arr[arr.length - 1];
    }
  }
}

업데이트 중

🥝 12일차 수업을 마치며...

객체 너 이자식 진짜 어렵네