일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 프로그래머스
- 30daysdowoonchallenge
- superstarjypnation
- html
- web
- 큐
- 백준
- mysemester
- 회고
- redux
- React
- 생활코딩
- level1
- 자바스크립트
- useState
- 코드스테이츠
- CSS
- 운영체제
- UX
- UI
- 자료구조
- javascript
- 해시테이블
- 스택
- 카카오
- REST_API
- Til
- Next.js
- vercel
- 프로토타입
- Today
- Total
데굴데굴
TIL: 2022-09-02 본문
⚙️ 오늘 배운 주제
JavaScript 배열
🐹 오늘의 기분
오전에는 배열 개념을 학습하고 오후에는 페어분과 배열 관련 문제들을 함께 풀었다. 배열을 아예 처음 접하는 건 아니었기 때문에 개념 학습은 상대적으로 수월하게 할 수 있었다. 코플릿 문제 풀 때 인덱싱에서 자꾸 실수를 해서 컴퓨터는 왜 0부터 세냐며 나의 무지를 잠시 컴퓨터 탓으로 돌렸었다...ㅎ 아니 근데 왜 0부터 세는데 헷갈리게 특히 slice와 splice 메소드 인덱싱이 정말정말 헷갈렸다. 다시 공부하자....
코플릿 문제들도 한 번 풀고 끝내지 말고 처음 제출한 코드를 보고 또 보면서 고칠 점이 없나 봐야겠다는 생각을 했다. 이게 정말 최선인지 스스로에게 질문해보는 습관은 중요하다. 계속 살펴봐도 이게 최선의 풀이 방법인 것 같다!하는 생각이 들면 레퍼런스 코드랑 비교해보고 개선할 점이 정말로 없는지 체크해야겠다. 개선할 점을 찾으면 나만 보는 곳에 기록해둬야겠다. 문제 유출은 금지!
알고리즘 공부를 여태 파이썬으로 해왔어서 그런지 문법이랑 메소드를 자주 혼동한다. 자바스크립트에 익숙해지자~~
🗝 키워드
배열, 요소, 인덱스, Array.isArray(), length, splice, slice, indexOf, includes, push, pop, shift, unshift, concat, immutable, mutable, console.table()
🗣 스스로에게 설명
배열은 여러 요소가 각자 순서를 가지고 들어가있는 자료구조이다.
순서는 인덱스(index)라고 한다.
리스트는 인덱싱을 통해 동적으로 값을 추가하고 변경할 수 있다. (문자열과의 차이)
배열은 아래처럼 여러 개 겹쳐 작성할 수 있으며, 인덱싱도 대괄호를 여러 개 겹쳐서 한다.
let arr = [[10, 20], [30, 40]]
// arr의 0번째 인덱스의 값 = [10, 20], 그 중의 1번째 인덱스의 값 = 20
console.log(arr[0][1]); // 20
배열의 길이를 확인할 때엔 문자열과 똑같이 length를 이용한다.
배열의 졍해진 인덱스를 초과하여 접근하면 undefined
를 리턴한다. 오류가 발생하지 않는다!
어떤 값의 type이 정확히 배열인지 확인하고 싶을 때엔 Array.isArray()
를 이용한다.
--> typeof로 배열의 타입을 확인하면 'object'가 리턴된다. ( 🔗 )
특정 값의 index를 확인하고 싶을 땐 indexOf()
메소드를 이용한다.
특정 값이 배열에 존재하는지 확인하고 싶다면 includes()
메소드를 이용한다. (불리언 리턴)
mutable = 원본에 영향을 미침
immutable = 원본에 영향을 미치지 않음
배열의 mutable 메소드
splice(start, deleteCount, item)
: 배열의 기존 요소를 지우거나 교체한다. 2번째 3번째 매개변수는 optional이다.push(넣을 값), pop()
: 배열의 맨 끝에 값을 넣거나 빼준다.unshift(넣을 값), shift()
: 배열의 맨 앞에 값을 넣거나 빼준다.
배열의 immutable 메소드
concat
: 배열끼리 합쳐주기도 하고 배열에 특정 값을 추가해주기도 한다. 처음에 넣느냐 끝에 넣느냐에 따라 사용법이 약간 다름. (아래 링크 참고)slice(begin, end)
: 기존 배열의 begin부터 end-1까지 복사하여 새 배열을 리턴 (사용법 더 공부해야 함)join(separator)
: separator로 각 배열의 요소를 연결한다. separator에 빈 문자열을 전달하면 그냥 연결한다.
mutable과 immutable 관련 참고하면 좋은 링크
JS 배열에 요소 추가하는 방법 (mutable, immutable)
이번 포스트에서는 자바스크립트 배열에 요소를 추가하는 방법에 대해 알아보자. 배열에 요소를 추가할 수 있도록 해주는 방식은 mutable(가변) 그리고 immutable(불변) 방식으로 나뉜다. Mutable(가
mingeesuh.tistory.com
❓ 막히는 or 막혔던 부분
자바스크립트 for of 반복문을 사용할 생각을 못해 한참 헤맸었다. 파이썬의 for in 반복문이랑 비슷한 용도인 것 같다. 앞으로 애용해야지
그리고 for of 반복문과 for in 반복문 이 두 개의 차이를 좀 더 찾아봐야겠다.
slice랑 splice 음수 인덱싱 이해하기! 거꾸로 인덱싱은 아직도 너무너무 헷갈린다.
🛠 질문 만들기
- 배열의 길이를 초과하는 인덱스를 접근할 때, 어떤 값이 리턴되는가?
- 배열의 slice와 splice 메소드 중 원본의 값을 변경시키는 것은 어떤 것인가?
- 배열의 요소를 처음부터 끝까지 출력하는 for 반복문을 작성하려고 할 때, for문 내의 조건식은 어떻게 작성해야 하는가?
'Lesson > TIL' 카테고리의 다른 글
TIL: 2022-09-06 (0) | 2022.09.06 |
---|---|
TIL: 2022-09-05 (0) | 2022.09.05 |
TIL: 2022-09-01 (0) | 2022.09.01 |
TIL: 2022-08-31 (0) | 2022.08.31 |
TIL: 2022-08-30 (0) | 2022.08.30 |