[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부터)
• 대괄호를 이용해서 배열을 만들고, 각각의 원소는 쉼표로 구분함.

[사진]  Array(배열)

 

값은 인덱스를 이용해 접근하며, 인덱스의 값을 변경하려면 변수를 할당하는 것과 같음.

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. 객체 기초

• 객체: 키-값의 쌍으로 이루어져 있음

[사진] Obeject(객체)

🚀 객체의 값을 사용하는 방법

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가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.