Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 | 31 |
Tags
- 직무역량캠프
- 국비지원
- 부트캠프
- OPENPATH
- KDT
- 기초
- knu
- 패스트캠퍼스
- javascript
- UXUIPrimary
- 오픈챌린지
- 국비지원취업
- UXUI챌린지
- 국비지원교육
- js
- UXUI기초정복
- 코드스테이츠
- 백엔드개발자
- 오픈패스
- 구현
- 디자인교육
- Be
- 환급챌린지
- 백준
- 디자인챌린지
- 내일배움카드
- baekjoon
- 디자인강의
- 문자열
- 백엔드 부트캠프
Archives
- Today
- Total
군만두의 IT 공부 일지
[DAY4] JavaScript 배열/객체 본문
목차
🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일
⭐요약
JavaScript에서 배열과 객체에 대해서 정리함.
더보기
🚀 배열
1) 배열 | 배열은 [ ]를 사용하여 선언하며, 각 요소는 쉼표로 구분됨. .length 속성으로 배열의 길이를 알 수 있음. .push(), .unshift() 메소드로 배열에 요소를 추가할 수 있고, .pop(), .shift() 메소드로 요소를 삭제할 수 있음. .slice(), .concat(), .join() 메소드는 배열을 조작하는 데 사용되며, 원본 배열을 변경하지 않음. .indexOf(), .includes() 메소드로 특정 요소를 찾을 수 있음. |
2) 객체 | 객체는 { }를 사용하여 선언하며, 키-값 쌍으로 구성됨. Dot notation과 Bracket notation을 통해 객체의 속성에 접근할 수 있음. 객체에 새로운 속성을 추가하거나, .delete 연산자로 속성을 삭제할 수 있음. for...in 반복문과 Object.keys(obj) 메소드를 통해 객체의 속성을 순회할 수 있음. |
⭐배열
1. 배열 기초
- 배열: 순서가 있는 값
- 값 = 요소
- 순서 = 인덱스(1이 아닌 0부터)
- 대괄호를 이용해서 배열을 만들고, 각각의 원소는 쉼표로 구분함.
값은 인덱스를 이용해 접근하며, 인덱스의 값을 변경하려면 변수를 할당하는 것과 같음.
let myNumber = [73, 98, 86, 61, 96];
myNumber.length // 배열의 길이는 5
myNumber[3]; // 배열의 3번째 값을 조회하면 61
myNumber[3] = 52 // 배열의 3번째 값을 변경하면 [73, 98, 86, 52, 96]
Array.isArray(myNumber) // 배열이면 true, 아니면 false 리턴
2. 배열의 메소드
1) 요소 추가: push, unshift
let myNumber = [98, 86, 61];
myNumber.push(96); // 배열 마지막에 96를 추가
myNumber.unshift(73); // 배열 앞에 73를 추가
2) 요소 삭제: pop, shift
let myNumber = [73, 98, 86, 61, 96];
myNumber.pop(); // 배열의 마지막 값을 삭제하고 반환
myNumber.shift(); // 배열의 첫 번째 값을 삭제하고 반환
3) 슬라이싱: slice (원본 변화X)
let myNumber = [73, 98, 86, 61, 96];
myNumber.slice(1, 3) // 배열의 1부터 3 이전 까지의 배열을 반환
4) 배열 이어붙이기: concat (원본 변화X)
let myNumber = [73, 98, 86];
let myNumber2 = [61, 96];
let sum = myNumber.concat(myNumber2) // [73, 98, 86, 61, 96]
5) 배열 요소 문자열로 합치기: join (원본 변화X)
let arr = ["a", "b", "c"];
arr.join(", "); // 'a, b, c'
6) 특정 요소 찾기: indexOf, includes
let myNumber = [73, 98, 86, 61, 96];
myNumber.indexOf(2); // 86
muNumber.includes(86); // true
7) 인덱스를 이용해 요소 추가 or 삭제
let arr = ["a", "b", "c", "d", "e"]; // ['a', 'b', 'c', 'd', 'e']
let sum = arr.slice(1, 3); // ['b', 'c']
⭐객체
1. 객체 기초
- 객체: 키-값의 쌍으로 이루어져 있음
🚀 객체의 값을 사용하는 방법
1) Dot notation
let user = {
firstName:'mj',
lastName: 'Son',
city: 'Seoul'
};
user.lastName; // 'Son'
user.city; // 'Seoul'
2) Bracket notation
let user = {
firstName:'mj',
lastName: 'Son',
city: 'Seoul'
};
// [ ] 안에 키값을 문자열("", '', ``)로 작성
user['lastName']; // 'Son'
user['city']; // 'Seoul'
3) 비교 연산
user['city'] === user.content
4) 값 추가
user.tags = ['신난다'] / user['email'] = 'mj@codestates.com'
5) 삭제 연산
delete user.name; // name 키-값 쌍 삭제
6) 특정 값이 있는지 확인
'Son' in lastName; // true
2. 객체의 속성 접근 방법
1) for문
예) 객체의 속성 중 number 타입을 가지는 속성을 모두 제거하는 코드: Bracket notation을 사용해야 함
for(let prop in obj){
if( typeof obj[prop] === 'number'){
delete obj[prop];
}
}
for in은 반복문으로 사용하고, in은 객체의 속성을 확인하는 용도로 사용함.
2) Object.keys(obj): obj의 모든 key들을 문자열 배열로 반환
⭐후기
- 이제 4일차인데도 배울 내용이 많아서 힘듦. 할 것은 많은데 시간이 모자란 것 같음.
- JavaScript에서 배열과 객체를 복사할 때 얕은 복사와 깊은 복사의 차이점과 구현 방법에 대해 추가적으로 찾아봐야겠음.
- 검색해보니 .map(), .filter(), .reduce()와 같은 고급 배열 메소드가 있음을 알아냄. 이 메소드들의 사용법을 익혀 데이터를 효율적으로 처리하고, 객체 내부에서 함수를 메소드로 정의하는 방법과 this 키워드의 사용법에 대해 공부하겠음.
- 배열과 객체에 대해 학습하면서 JavaScript에서 데이터를 어떻게 구조화하고 관리하는지에 대해 이해할 수 있음. 실제 프로젝트에서 데이터를 다룰 때 이 지식을 활용할 수 있으면 좋겠음.
⭐참고자료
1) MND Web Docs, "Array.prototype.slice()", https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.
'개발일지 > SW직무역량 부트캠프' 카테고리의 다른 글
[DAY3] 과제 - 간단한 웹앱 만들기(Fork, Pull requests) (0) | 2023.07.04 |
---|---|
[DAY3] JavaScript 기초 3(반복문, 함수) (0) | 2023.07.03 |
[DAY3] JavaScript 기초 2(변수, 조건문) (0) | 2023.07.02 |
[DAY3] JavaScript 기초 1(주석, 데이터 타입) (0) | 2023.06.30 |
[DAY2] HTML/CSS 활용(Flexbox) (0) | 2023.06.29 |
Comments