객체, 배열 (기초)

객체

1. 객체 생성

1-1. 기본 객체 생성

let person = {
  name: "이름",
  age: 30,
  gender: "남 / 여"
};

• 객체를 만들 때 : 중괄호({})를 사용
• 속성과 값 : 콜론(:)으로 구분하여 작성
• 각 속성과 값 : 쉼표(,)로 구분

1-2. 생성자 함수를 사용한 객체 생성

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

let person1 = new Person("A", 30, "남자");
let person2 = new Person("B", 25, "여자");

=> 생성자 함수 Person()을 사용 -> 객체 person1과 person2를 생성
= 생성자 함수를 사용 -> 객체를 일괄적으로 생성 가능

2. 객체 속성 접근

let person = {
  name: "A",
  age: 30,
  gender: "남자"
};

console.log(person.name);   // "A"
console.log(person.age);    // 30
console.log(person.gender); // "남자"

=> 객체 person의 속성에 접근 -> 값을 출력
= 객체의 속성에 접근할 때 : 점(.)을 사용 -> 속성 이름을 입력

3. 객체 메소드

3-1. Object.keys() 메소드

let person = {
  name: "A",
  age: 30,
  gender: "남자"
};

let keys = Object.keys(person);

console.log(keys);   // ["name", "age", "gender"]

=> Object.keys() 메소드를 사용 -> 객체 person의 속성 이름 -> 배열로 반환
= Object.keys() 메소드 -> 객체의 속성 이름 -> 배열로 반환

3-2. Object.values() 메소드

let person = {
  name: "A",
  age: 30,
  gender: "남자"
};

let values = Object.values(person);

console.log(values);   // ["A", 30, "남자"]

=> Object.values() 메소드를 사용 -> 객체 person의 속성 값 -> 배열로 반환
= Object.values() 메소드 : 객체의 속성 값 -> 배열로 반환

3-3. Object.entries() 메소드

let person = {
  name: "A",
  age: 30,
  gender: "남자"
};

let entries = Object.entries(person);

console.log(entries);

=> Object.entries() 메소드를 사용 -> 객체 person의 속성 이름, 속성 값 -> 2차원 배열로 반환
= Object.entries() 메소드는 객체의 속성 이름, 속성 값들 -> 2차원 배열로 반환

3-4. Object.assign() 메소드

let person = {
  name: "A",
  age: 30,
  gender: "남자"
};

let newPerson = Object.assign({}, person, { age: 35 });

console.log(newPerson);   // { name: "A", age: 35, gender: "남자" }

=> Object.assign() 메소드를 사용 -> 새로운 객체 newPerson 생성
= Object.assign() 메소드 : 기존 객체를 복사 -> 새로운 객체 생성

3-5. 객체 비교

let person1 = {
  name: "A",
  age: 30,
  gender: "남자"
};

let person2 = {
  name: "A",
  age: 30,
  gender: "남자"
};

console.log(person1 === person2);   // false
console.log(JSON.stringify(person1) === JSON.stringify(person2));   // true

=> 두 개의 객체를 생성 -> 객체 비교
= 객체를 비교할 때는 일반적으로 === 연산자를 사용X
-> 대신 JSON.stringify() 함수를 사용하여 객체 -> 문자열로 변환 -> 문자열 비교

3-6. 객체 병합

let person1 = {
  name: "A",
  age: 30
};

let person2 = {
  gender: "남자"
};

let mergedPerson = {...person1, ...person2};

console.log(mergedPerson);   // { name: "홍길동", age: 30, gender: "남자" }

= 객체 병합할 때 : 전개 연산자(...) 사용

배열

1. 배열 생성

1-1. 기본적인 배열 생성

let fruits = ["사과", "바나나", "오렌지"];

= 배열을 만들 때 : 대괄호([])
= 각 요소 : 쉼표(,)로 구분

1-2. 배열의 크기 지정

new Array

let numbers = new Array(5);

=> 배열 numbers(크기: 5)를 생성

2. 배열 요소 접근

let fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]);   // "사과"
console.log(fruits[1]);   // "바나나"
console.log(fruits[2]);   // "오렌지"

=> 배열 fruits : 첫 번째 요소 ~ 세 번째 요소까지 출력
= 배열의 요소에 접근할 때 : 대괄호([]) 안 -> 인덱스 값을 넣음

3. 배열 메소드

3-1. push() 메소드

let fruits = ["사과", "바나나"];

fruits.push("오렌지");

console.log(fruits);   // ["사과", "바나나", "오렌지"]

=> push() 메소드를 사용 -> 배열 fruits의 끝에 "오렌지"를 추가
= push() 메소드 -> 배열의 끝에 요소를 추가

3-2. pop() 메소드

let fruits = ["사과", "바나나", "오렌지"];

fruits.pop();

console.log(fruits);   // ["사과", "바나나"]

=> pop() 메소드를 사용 : 배열 fruits의 마지막 요소를 삭제
= pop() 메소드 : 배열의 마지막 요소를 삭제

3-3. shift() 메소드

javascriptCopy code
let fruits = ["사과", "바나나", "오렌지"];

fruits.shift();

console.log(fruits);   // ["바나나", "오렌지"]

=> shift() 메소드를 사용 -> 배열 fruits의 첫 번째 요소를 삭제
= shift() 메소드 : 배열의 첫 번째 요소를 삭제

3-4. unshift() 메소드

let fruits = ["바나나", "오렌지"];

fruits.unshift("사과");

console.log(fruits);   // ["사과", "바나나", "오렌지"]

=> unshift() 메소드를 사용 -> 배열 fruits의 맨 앞에 "사과"를 추가
= unshift() 메소드 : 배열의 맨 앞에 요소를 추가

3-5. splice() 메소드

let fruits = ["사과", "바나나", "오렌지"];

fruits.splice(1, 1, "포도");

console.log(fruits);   // ["사과", "포도", "오렌지"]

=> splice() 메소드를 사용 -> 배열 fruits의 두 번째 요소를 삭제 , "포도" 추가
= splice() 메소드 : 배열의 요소를 삭제 , 새로운 요소를 추가

3-6. slice() 메소드

let fruits = ["사과", "바나나", "오렌지"];

let slicedFruits = fruits.slice(1, 2);

console.log(slicedFruits);   // ["바나나"]

=> slice() 메소드를 사용 -> 배열 fruits의 두 번째 요소부터 세 번째 요소까지 새로운 배열로 만듬
= slice() 메소드 : 배열의 일부분 -> 새로운 배열로 만듬.

3-7. forEach() 메소드

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

=> forEach() 메소드를 사용 -> 배열 numbers의 모든 요소를 출력
= forEach() 메소드 : 배열의 각 요소에 대해 콜백 함수를 실행

3-8. map() 메소드

let numbers = [1, 2, 3, 4, 5];

let squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers);   // [1, 4, 9, 16, 25]

=> map() 메소드를 사용 -> 배열 numbers의 모든 요소를 제곱한 새로운 배열을 만듬
= map() 메소드 : 배열의 각 요소에 대해 콜백 함수를 실행 -> 결과를 새로운 배열로 반환

3-9. filter() 메소드

let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers);   // [2, 4]

=> filter() 메소드를 사용 -> 배열 numbers에서 짝수만 추출한 새로운 배열을 만듬
= filter() 메소드 : 배열의 각 요소에 대해 콜백 함수를 실행 -> 그 결과가 true인 요소만 새로운 배열로 반환

3-10. reduce() 메소드

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum);

=> reduce() -> 덧셈?(누산기)
= (추후 정리)

3-11. find() 메소드

let numbers = [1, 2, 3, 4, 5];

let foundNumber = numbers.find(function(number) {
  return number > 3;
});

console.log(foundNumber);   // 4

=> find() 메소드를 사용 -> 배열 numbers에서 3보다 큰 첫 번째 요소를 찾음
= find() 메소드 : 배열의 각 요소에 대해 콜백 함수를 실행, 그 결과가 true인 첫 번째 요소를 반환

3-12. some() 메소드

let numbers = [1, 2, 3, 4, 5];

let hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});

console.log(hasEvenNumber);   // true

=> some() 메소드를 사용 -> 배열 numbers에서 짝수가 있는지 확인 (number % 2 === 0;)
= some() 메소드 : 배열의 각 요소에 대해 콜백 함수를 실행, 그 결과가 true인 요소가 하나라도 있는지 확인

3-13. every() 메소드

let numbers = [2, 4, 6, 8, 10];

let isAllEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0;
});

console.log(isAllEvenNumbers);   // true

=> every() 메소드를 사용 -> 배열 numbers의 모든 요소가 짝수인지 확인
= every() 메소드 : 배열의 각 요소에 대해 콜백 함수를 실행, 그 결과가 true인 요소가 모든 요소인지 확인

3-14. sort() 메소드

let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];

numbers.sort(function(a, b) {
  return a - b;
});

console.log(numbers);   // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

=> sort() 메소드를 사용 -> 배열 numbers를 오름차순 정렬
= sort() 메소드 : 배열의 요소를 정렬

3-15. reverse() 메소드

let numbers = [1, 2, 3, 4, 5];

numbers.reverse();

console.log(numbers);   // [5, 4, 3, 2, 1]

=> reverse() 메소드를 사용하여 배열 numbers의 순서를 뒤집는다(내림차순?)
= reverse() 메소드 : 배열의 요소를 역순 정렬