1.후기
배열, 객체는 처음 접해보는 개념이라 낯설다. 그래서 혼자, 혹은 스터디원, 페어와 함께 이리저리 고민해보는 시간이 많았다. 제대로 이해해보려고 검색하다 보면 '완전히 이해하려면 더 깊은 개념까지 알아야 하는구나'라는 느낌에 사용법만 알고 넘어가는 경우가 종종 있다. 후에 다시 마주했을 때 이해가 된다면 기분 좋을 것 같다.
2.새롭게 알게 된 것
Section1 Unit9 - [JavaScript] 배열, 객체
Chapter1. 배열
Chapter2. 객체
<Chapter1. 배열>
1) 배열, 객체:대량의 데이터를 쉽게 다룰 수 있게 해주는 데이터 타입
2) index, element
myArr = [10, 18, 45, 7, 5]
myArr[2] = 45
myArr[100] = undefined
3) array 중첩 가능
myNumber = [[1, 2], [3, 4], [5, 6]] ---> 2차원 배열
myNumber[1][0] ---> 3
4)
배열 0번째 요소: unshift() 추가 <---> shift() 삭제
배열 마지막 요소: push() 추가 <---> pop() 삭제
5)
let example = [2, 9, 7];
Array.isArray(example): 배열인지 아닌지('typeof example'는 object라고 반환하므로 배열 판별 불가)//true
example.indexOf(2): 요소의 인덱스 반환(없으면 -1 반환)//0
example.includes(example, 9): 배열에 요소 존재 여부 판별, Internet Explorer 호환X//true
6)
split(구분자): String 객체를 지정한 구분자를 이용하여 여러 개의 문자열 배열로 반환
join(구분자): 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다(구분자 입력 안 하면 ','로 구분, 빈 문자열이면 모두 붙여서 반환)
7) slice(배열 복사 붙여넣기)
-slice(begin, end)
begin 이상, end 미만까지 새로운 배열 객체로 반환
-slice(begin)
begin부터 끝까지 새로운 배열 객체로 반환
(slice(begin, arr.length)->arr.length 생략 가능->slice(begin))
8) splice(start, 제거할 요소 개수, element(s))
-배열의 기존 요소 삭제
splice(start)--->start부터 끝까지 삭제
splice(start, 1)--->start부터 1개 삭제
-배열의 기존 요소 교체
splice(start, 1, element)
-배열에 새 요소 추가
splice(start, 0, element(s))
9) concat
let example1 = [2, 9, 7];
let example2 = [20, 90, 70]
example1.concat(100): 배열 + 요소//[2, 9, 7, 100]
example1.concat(example2): 배열 + 배열//[2, 9, 7, 20, 90, 70]
10) console.table(배열이름)
11) 배열 안에 특정 요소 존재 판별
words = ['Radagast', 'the', 'Brown']
words.indexOf('the') !== -1//true
words.indexOf('a') !== -1//false
주의: 대소문자 구분
12) 빈 배열 확인
words = ['Radagast', 'the', 'Brown']
words.length === 0
주의: arr === [] 안됨(arr에는 주솟값이 저장되어 있으므로)
13) immutable, mutable
<immutable>(원본 안 변함, 변수에 할당해서 사용해야 함)
Array.concat()
Array.slice()
<mutable>
Array.splice()
Array.pop()//제거된 요소 리턴
Array.shift()//제거된 요소 리턴
Array.unshift()//변경된 배열의 길이 리턴
Array.push()//변경된 배열의 길이 리턴
14)
let arr = [1, 2, 3];--->arr에 주솟값 저장됨
let result = arr--->result에 주솟값 저장됨
결국 arr과 result는 값은 주솟값을 가지고 있음
function addToFrontOfNew(arr, el) {
let result = arr;
result.unshift(el);
return result;
}result를 통해 배열을 변화시켰지만, 결국 원본인 arr도 변화함
15) 헷갈리는 것
slice에서 length 생략 가능
arr[]에서 length 생략 불가
배열의 인덱스로 요소를 찾을 때 없다면(arr[index]): undefined
배열의 요소로 인덱스를 찾을 때 없다면(arr.indexOf(element)): -1
16) 관련 심화 개념
array.from
array.map
forEach
...(전개연산자)
<Chapter2. 객체>
1) for in, for of
for in: 객체에서 사용 편리(키를 순환)
for of: 배열에서 사용 편리(값(요소)을 순환)
참고 사이트: https://blog.naver.com/comalone/222815761611
2)
let tweet = {
writer : 'stevelee',
createdAt : '2019-09-10 12-03:33',
content : '프리 코스 재밌어요!'
}
(O)
//대괄호 안: key를 string 타입으로 작성
tweet['content']
tweet["content"]
tweet[`content`]
//.: 작은따옴표, 큰따옴표, 백틱 필요 없음
tweet.content
//변수 설정됐을 때
let content = 'content';
tweet[content]
(X)
//변수가 아닌데 작은따옴표, 큰따옴표, 백틱 작성 안 함
tweet[content]3) property는 key와 value를 의미
4) Object.keys(객체이름)
키들만 모아서 배열을 만듦
function countNumberOfKeys(obj) {
return Object.keys(obj).length;
}=> obj라는 객체의 키를 모아서 만들 배열의 길이 리턴
5) 키 in 객체이름
키가 객체에 있는지 판별
6) 프로퍼티 추가, 재할당 방법
let obj = {banana: yellow};
obj['apple'] = red;
obj.banana = white;
//obj{banana: white, apple: red}7) 개발자 도구에서 디버깅하는 법
8)
continue: 이번 반복문 횟수는 건너띔
break : 반복문 끝내기
