본문 바로가기

code-states

[code-states][we-win] 5일차 - array & array method, object & object method

 

* 너무 열정 만수르를 해서 그런가, 기가 빨리던 날이라,

정규 시간에 학습을 하면서 google docs 에 작성한 내용을 그냥 그대로 사용하고자 합니다

 

 

오늘 필요할 개념들은 무엇인가?


 

카테고리 : 객체, 타입 // 배열 메소드(일부)

 

오늘의 대략적인 계획 :

 

09:00~17:00 | 객체 13문제 / 객체 & 타입 3문제 / 도합 16문제 / 할당시간 도합 3시간 → 5.5문제 / H

> 한 문제당 넉넉잡아 10분 정도 할당, TDD style 의 빠른 템포로 고민 - 실행 반복

17:00~18:00 | 배열 메소드 26문제 / 할당시간 도합 4시간(월요일 포함) → 6.5문제 / H

> 주말이 포함되어 있으므로, 약간 덜 빡빡하게 마찬가지로 한 문제당 10분정도로 똑같이 가자

> 오늘 풀 문제는 배열 메소드 첫 문제부터 총 7개 정도로 생각중

 

 

[ 오전 중 풀 문제들 ]

 

유형

번호

문제이름

필요개념

추가개념

객체

1

01_getProperty

객체, 키

-

2

02_addProperty

객체, 키

-

3

03_addPropertyAndValue

객체, 키, 벨류

-

4

04_addObjectProperty

객체, 키, 벨류

-

5

05_removeProperty

객체, 키, 벨류

-

6

06_isPersonOldEnoughToVote

객체, 키, 벨류

조건문

7

07_addFullNameProperty

객체, 키, 벨류

문자열 합치기

8

08_removeNumbersLargerThan

객체, 키, 벨류

for ... in 구문

9

09_removeOddValues

객체, 키, 벨류

for ... in 구문

10

10_countNumberOfKeys

객체, 키, 벨류

for ... in 구문

11

11_printObject

객체, 키, 벨류

문자열 다루기

12

12_extends

객체, 속성

객체 다루기

13

13_countAllCharacters

객체, 속성

문자열 다루기

  •  

 

시간에 비해 문제가 꽤 많은 편이다

시간 안에 해당 문제를 해결하려면 객체에 대한 개념이 능숙해야 하고

문제에 들어가기 전 해당 개념들을 dev tools console 로 어느 정도 머리와 손에 익혀 놔야 한다

10시 전까지 밀도 있게 객체에 대해 공부하는 것이 첫 번째 목표이다

 

 

객체

 


 

객체 예시로 좋은 건, 회원 주소록이다

let userFirstName = 'Steve';

let userLastName = 'Lee';

let userEmail = 'steve@naver.com';

let userCity = 'Seoul';


한 사람에 대해 다양한 정보를 만들어야 하는 경우, 이런 식으로 만들면 되긴 하다

 

그러나, 또 다른 사람의 이런 정보들을 받게 된다면?

 

let user2FirstName = 'Steve';

let user2LastName = 'Lee';

let user2Email = 'steve@naver.com';

let user2City = 'Seoul';

이런 식으로 변수를 또 선언해 줘야 한다

번거롭다, 번거로워!

 

 

배열을 이용할 수도 있지 않을까?

 

가능한 방법이긴 하지만, index 를 통해 접근해야 하며

해당 index 에 무슨 값이 있는지를 일일히 파악하고 있어야 해서 직관적이지 못하다

이럴 때 이용하는 개념이 ‘객체’ 이다

 

let user1 = {

firstName : 'inseob',

lastName : 'Jeon',

email : 'sonofhuman20@gmail.com',

city : 'byeollae-dong'

};

객체의 구조는 key - value 라고 볼 수 있는데

firstName, lastName, email 등이 key, 그리고 그에 해당하는 string data 들이 value 다

객체를 선언할 땐 bracket, key 의 구분은 comma 로,

그리고 key : value 는 colon 으로 구분해주면 된다

 

 


 

 

이 객체에 선언한 key : value 를 호출하는 방법은 두 가지가 존재한다

 

1. Dot Notation

 

user1.city;

//"byeollae-dong"

user1.firstName;

//"inseob"

objectName.key 와 같은 식으로, 중간에 dot 을 통해 불러낼 수 있는 방법이다

즉, object 의 속성을 호출하는 방법이라고 볼 수 있다.

 

 

2. square-bracket notation

user1['city'];

//"byeollae-dong"

user1['firstName'];

//"inseob"

objectName[‘key’] 를 통해 해당하는 value 를 불러낼 수 있는 방법이다

유의할 점은 dot notation 과 달리

square bracket 안에 key 를 string parameter 로 전달해야 한단점

 

intellisense 가 도와주긴 하겠지만, param 을 string style 의 key 로 받는단 점 잊지 말자!

* square bracket notation 연습

let tweet = {

writer : 'inseob',

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

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

};



//연습문제, tweet object 에서, content 를 bracket notation 을 통해 가져와보세요

tweet['content'];

"프리코스 재밌어요!"

둘의 차이는 무엇인가?

 

dot notation 은 dynamic variation 에 대응할 수 없다

그러나, bracket notation 은 dynamic variation 에 대응할 수 있다

 

기타 속성

 

변수 재 선언을 통해 재할당도 가능하고

delete keyword 를 통해 키-값을 쌍으로 날릴 수도 있다

in 연산자를 이용해 해당하는 키 가 있는지 확인할 수도 있다

 

 

 

 

객체 특화형 반복문, 그리고 그 외

 

 


 

for in

for in 의 경우, 객체의 key 값을 variable 로 잡는다

 

 

for of

for of 의 경우는 Symbol.iterate 속성을 가지는 collection 전용이다

 

 

for each

?

 

 

in 연산자의 사용

 

셀 전체 선택

  • 0열 선택0열 다음에 열 추가
  • 0행 선택0행 다음에 행 추가

열 너비 조절

행 높이 조절

 

let obj = {

'a' : 1,

'b' : 2,

'c' : 3

};



'a' in obj

//true



typeof ('a' in obj);

//"boolean"

 

어떤 object 안에 내가 원하는 key 가 존재하는지 확인할 수 있게 해 주는 연산자

사용은 ‘key’ in object 로 써 주면 되며, 결과값으로 true/false, boolean type 을 return 한다

 

 

 

오늘 배운 것 중,

주말 동안에 알아봐야 할 내용들


 

bracket notation 과 dot notation 의 차이는 무엇일까

전자는 dynamic variation 에 응용이가능함 후자는 불가능함

 

객체 특화형 반복문 마스터 하기

for of, for each, for in, for each 까지

 

mdn 에서 메서드가 어떤 기능을 하는 것도 알아보지만, 어떤 값을 ‘리턴' 하는지도 알아보자

ex. Array.push(elements); 의 경우, elements 를 array 끝에 추가하는 기능도 있으나

해당 elements 가 추가된 Array 의 length 값을 return 하는 기능도 존재한다

ex. Array.pop(); 의 경우, Array 맨 끝의 elements 를 삭제해주는 기능도 있으나

삭제된 elements 를 return 하는 기능도 존재한다

MDN docs 를 피상적으로 읽어보는 게 아니라, 전체적으로 읽어보고 정리하고 해보면서

해당 메서드를 정확히 이해하는 것이 중요하다고 할 수 있겠다

 

메서드를 정리할 때 , 기능 / return / 비고사항 / 예제코드를 표의 형식으로 정리하는 건 어떨까

 

축약형 연산자 ( i++ / i +=1 / i = i + 1 )

i++ 는 요즘 잘 안 쓴다, 가급적 이해하기 좋은 2번째랑 3번째를 사용한다

 

property of js

property 라는 것은 무엇을 의미하는 것일까

key 값은 무조건 string 형식만 가능하다

 

square bracket notation, 그리고 dot notation 의 차이점을 이해하기

 


 

5일차 개발일지 끝

 

ps. 어제 맞춰놓은 알람 덕분에, 시프티 출근/퇴근 체크는 누락 없이 잘 할 수 있었다