JavaScript 객체 / 메소드 / 배열

 

객체(Object)를 사용하여 여러 개의 값을 하나의 변수에 담고 관리할 수 있다.

 

1.객체 생성

1-1. 기본적인 객체 생성 구조

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

 

person이라는 객체  생성한다.

객체를 만들 때는 중괄호{}를 사용하며, 속성(Key)와 값(Value)를 콜론: 으로 구분하여 작성한다.

각 속성과 값은 쉼표, 로 구분한다.

 

 

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

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

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 25, "여자");

 

생성자 함수 person()를 사용하여 객체 person1 person2를 생성한다.

생성자 함수를 사용하면 객체를 일괄적으로 생성 할 수 있다.

 

 

 

2. 객체 속성 접근

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

console.log(person.name);   // "홍길동"
console.log(person.age);    // 30
console.log(person.gender); // "남자"

 

객체 person의 속성에 접근하여 값을 출력한다.

객체의 속성에 접근할 때는 점. 을 사용하여 속성 이름을 입력한다.

 

 

3. 객체 메소드

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

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자"
  };
  
  let keys = Object.keys(person);
  
  console.log("keys ==>", keys);   // ["name", "age", "gender"]

 

Object.keys() 메소드를 사용하여 객체 person의 속성이름(Key)를 배열로 반환한다.

 

 

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

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자"
  };
  
  let values = Object.values(person);
  
  console.log("values ==>",values);   // ["홍길동", 30, "남자"]

 

Object.keys() 메소드와 마찬가지로, 객체 person의 값(value)를 배열로 반환한다.

 

 

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

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let entries = Object.entries(person);

console.log(entries);

 

대표사진 삭제

사진 설명을 입력하세요.

Object.entries() 메소드를 사용하여 객체 person의 속성 이름과 속성 값들을 2차원 배열로 반환한다.

 

 

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

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자"
  };

  let newPerson = {};
  Object.assign(newPerson, person);
  
  console.log(newPerson);   // { name: "홍길동", age: 35, gender: "남자" }

 

새로운 객체 newPerson을 만든 후, Object.assign() 메소드를 이용하여 person 객체를 복사하여 newPerson 객체에 값을 복사한다.

 

 

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자"
  };

  let newPerson = {};
  Object.assign(newPerson, person, {age: 35 });
  
  console.log(newPerson);   // { name: "홍길동", age: 35, gender: "남자" }

 

대표사진 삭제

사진 설명을 입력하세요.

newPerson 객체에 person 객체를 복사하는데, age 값만 바꾸고 싶다면 위 코드 처럼 작성한다.

 

 

3-5. 객체 비교

let person1 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let person2 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

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

 

두 개의 객체를 생성하고, 객체 비교를 해본다.

console.log(person1 === person2) 이 코드에서 false가 나온 이유는 아래와 같다.

객체의 크기는 굉장히 크다, 그렇기 때문에 메모리에 저장할 때 별도의 공간에 저장하는데, 객체가 가지고 있는 값은 별도 공간에 대한 주소라는 뜻이다.

 

따라서 person1 의 저장공간 주소와 person2의 저장공간 주소가 다르기 때문에 false가 출력되는 것이다.

 

객체를 비교할 때는 일반적으로 === 연산자를 사용할 수 없습니다. 대신 JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교를 합니다.

 

 

3-6. 객체 병합

let person1 = {
    name: "홍길동",
    age: 30,
  };
  
  let person2 = {
    gender: "남자"
  };

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

 

person1 에는 이름과 나이가 있고, person2 에는 성별만 존재한다.

person1 과 person2를 합치면 완벽하지 않을까? 이럴때는 전개연산자 ... 을 사용하여 객체를 풀어헤쳐서 perfecman 에 넣어준다.

 

 

4. 배열

배열은 나열을 하는데, 인덱스를 가지며, 첫번째 인덱스는 0부터 시작한다

 

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

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

 

 

 

4-2. 배열의 크기 지정

let numbers = new Array(5);

 

크기가 5인 배열 numbers를 생성한다.

 

 

4-3. 배열의 길이

let fruits = ["apple", "banana", "orange", "grape"];
let numbers = new Array(5);

console.log(fruits.length);
console.log(numbers.length);

 

 

4-4. 배열의 요소 접근

let fruits = ["apple", "banana", "orange", "grape"];
console.log(fruits[1]);

 

 

 

5. 배열 메소드

5-1. PUSH & POP 메소드

let fruits = ["apple", "banana", "orange", "grape"];
console.log(fruits);

fruits.push("mango");
console.log(fruits);

fruits.pop();
fruits.pop();
fruits.pop();
console.log(fruits);

 

대표사진 삭제

사진 설명을 입력하세요.

fruits 배열 맨뒤의 grape에 push를 이용하여 mango 를 추가하였다.

그리고, pop을 이용여 마지막 요소 mango, grape, orange를 제거하였다.

 

 

5-2. SHIFT 메소드

 

let fruits = ["apple", "banana", "orange", "grape"];
console.log(fruits);

fruits.shift();
console.log(fruits);

 

대표사진 삭제

사진 설명을 입력하세요.

shift를 사용하여 fruits 배열 맨앞의 apple을 제거하였다.

 

5-3. UNSHIFE 메소드

let fruits = ["apple", "banana", "orange", "grape"];
console.log(fruits);

fruits.unshift("tomato");
console.log(fruits);

 

대표사진 삭제

사진 설명을 입력하세요.

unshift 를 사용하여 fruits 배열 맨앞에 tomato를 추가하였다.

 

 

5-4. SPLICE 메소드

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

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

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

 

splice() 메소드를 사용하여 배열 fruits의 두 번째 요소를 삭제하고, 그 자리에 "포도"를 추가합니다. splice() 메소드는 배열의 요소를 삭제하거나, 새로운 요소를 추가할 수 있습니다.

 

 

5-5. SLICE 메소드

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

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

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

 

 

slice() 메소드를 사용하여 배열 fruits의 두 번째 요소부터 세 번째 요소까지 새로운 배열로 만듭니다. slice() 메소드는 배열의 일부분을 새로운 배열로 만듭니다.