(2023. 01. 02) Section1, JS 배열과 객체

배열 학습 목표

• 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.
• length 속성을 이용하여 배열의 길이를 조회할 수 있다.
• 배열의 요소가 배열인 이중 배열을 이해하고, 이중 배열의 요소를 조회하거나 변경할 수 있다.
• 배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.
• 배열에서 사용되는 다양한 메서드를 알고 사용할 수 있다.
  split(), join(), slice(), splice(), Array.isArray(), push(), unshift(), pop(), shift(), indexOf(), includes()
  

1. 특정 인덱스를 조회하거나, 변경하는법

let array = [1, 2, 3, 4, 5];
console.log(array[0]); // 1이 출력된다. 인덱스를 조회하는 법

array[0] = 999;
console.log(array[0]); // 999가 출력된다. 인덱스를 변경하는 법

2. length 속성을 이용하기

console.log(array.length); // 5개 출력된다. 배열의 길이를 조회하는 법

3. 이중 배열

let doubleArray = [[1,2,3],2,3];
console.log(doubleArray[0]);
// [1,2,3]

console.log(doubleArray[0][0]);
// 1

doubleArray[0][0] = 99;
console.log(doubleArray[0][0]);
// 99

4. 배열의 각 요소에 대하여, 반복하는 코드를 실행

// 가장 간단한 방법은 for문을 이용하는 것이다.
for(let i=0; i<array.length; i++){
  console.log(array[i]);
}

// 1
// 2
// 3
// 4
// 5

5. 배열의 메서드

let str = "apple banana orange";
let arr = str.split(" "); // 인자 안에 구분자 값 입력
// arr = ["apple", "banana", "orange"]

let str2 = arr.join(" "); // 인자 안에 구분자 값 입력
// str2 = "apple banana orange"

let arr2 = arr.slice(1);  // 원본 배열 수정 안됨
// arr2 = ["banana", "orange"]

arr.splice(1);  // 원본 배열 자체를 수정
// arr = ["banana", "orange"]

console.log(Array.isArray(arr)); // 인자 값이 배열이라면 true 반환
// true

arr.push('grape'); // 배열의 끝에 요소를 추가한다.
// arr = ["banana", "orange", "grape"]

arr.unshift('pear'); // 배열의 맨 앞에 요소를 추가한다.
// arr = ["pear", "banana", "orange", "grape"]

arr.pop(); // 배열의 맨 끝 값을 제거한다.
// arr = ["pear", "banana", "orange"]
  
arr.shift(); // 배열의 맨 앞 값을 제가한다.
// arr = ["banana", "orange"] 

console.log(str.indexOf("p")); //인자 안의 값을 찾아서 인덱스 위치를 리턴한다. 없다면 -1을 리턴한다.
// 1
console.log(str.includes("p")); //인자 안의 값이 string에 존재하는 지 검사하여 boolean 값으로 리턴해준다.
// true

객체 학습 목표

1. 배열과 객체의 특징을 구분하고, 배열과 객체의 특징에 따라 웹 애플리케이션 개발 시 어떻게 사용되는지 이해한다.
2. 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.
3. 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
4. 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.

1. 객체의 특징

객체는 키와 값으로 이루어져 있다. 키-값 쌍은 쉼표로 구분해준다.

let user = {
  firstName: 'Steve',
  lastName: 'Lee',
  city: 'Seoul'
};

let details = { age: 40 };

2. 객체 프로퍼티의 추가, 변경, 삭제 방법

// 추가하는 방법 3가지
// 1. 점 표기법(dot notation) 사용
user.age = 40;

// 2. 대괄호 표기법 사용
user[age] = 40;

// 3. Object.assign() 기능 (뒤의 요소로 앞의 요소를 덮어버린다. 원본 변경된다)
Object.assing(user, details);

// 4. 스프레드 연산자 사용 (뒤의 요소로 앞의 요소를 덮어버린다.)
let newUser = {...user, ...details};


// 객체 프로퍼티 삭제 방법 (delete)
delete user.city;
delete user['city'];

3. 객체 속성 조회법 (dot notation과 bracket notation의 차이)

user.firstName // 'Steve' (dot notation)
user['firstName'] // 'Steve' (bracket notation)  String 형태로 들어가야 한다.