[JavaScript] 기초 6. 객체(Object)와 배열(Array)

유의사항: 해당 글은 공부한 내용을 정리하는 용도이므로, 수정이 필요할 경우 내용의 수정이 있을 수 있습니다.

 

객체(Object 자료형) 

 

자바스크립트에서 객체(Object)는 데이터의 집합으로, 키(key)와 값(value)가 쌍으로 이루어진 속성(property)의 모음이다. 객체는 중괄호 '{}'로 정의하며, 각 속성들은 쉼표로 구분하여 나열한다. 간단히 말해, 여러 개의 값을 저장할 수 있는 변수라 생각하면 된다.

 

객체 기본 구조

기본적인 객체 구조. 콜론(':')을 기준으로 key, value를 적는다. 아래 예제와 같이, 객체에서 각 값의 자료형이 달라도 상관없다. 

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

 

생성자 함수를 이용한 객체 선언

this와 함수를 이용해 객체를 선언할 수 있다. 해당 생성자 함수를 통해, 객체 Person은 name, age, gender를 key값으로 가지는 객체로 선언되었다. this에 대한 자세한 설명은 후에 하도록 하겠다.

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

 

접근

속성의 key값을 통해 value값에 접근한다.

console.log("1", person.name);
console.log("2", person.age);
console.log("3", person.gender);

// Output:
// 1 홍길동
// 2 30
// 3 남자

 

메소드를 이용한 접근

메소드는 객체 내부에 존재하는 함수를 의미한다. 메소드는 기존의 함수와 동일하지만 객체의 속성으로 취급되어 점(.)을 통해서 호출 한다는 점이 다르다. Object자료형은 keys(), values(), entries() 메소드를 통해 속성에 접근할 수 있다.

각 메소드의 예제를 보자.

 

keys

모든 속성의 key를 가져온다.

let keys = Object.keys(person1);
console.log("Keys =>", keys);

// Output:
// Keys => [ 'name', 'age', 'gender' ]

 

values

모든 속성의 value를 가져온다.

let values = Object.values(person1);
console.log("Values =>", values);

// Output:
// Values => [ '홍길동', 30, '남자' ]

 

entries

모든 속성의 key, value를 pair형태로 가져온다.

let entries = Object.entries(person1);
console.log("Entries =>", entries);

// Output:
// Entries => [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

 

복사

객체는 assign() 메소드를 통해 새로운 객체에 값을 복사해올 수 있다.

let newPerson = {};
Object.assign(newPerson, person1, { age: 31});
console.log("newPerson =>", newPerson);

// Output:
// newPerson => { name: '홍길동', age: 31, gender: '남자' }

 

비교

객체를 비교할 때 조심해야 하는 점은 두 객체의 모든 속성이 일치해도 같지 않은 판정이다. 그 이유는 객체는 데이터가 저장된 주소만을 가지고 있기 때문. 서로 다른 객체가 같은 주소를 가지지 않기 때문에 속성과 상관없이 === 연산자의 결과는 false이다.

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

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

console.log(person1 === person2);

// Output:
// false

 

만약 두 객체의 모든 속성이 일치하는 지 확인하고 싶다면, 편법으로 객체를 1차원 문자열로 변환해 일치 여부를 확인할 수 있다.

console.log(JSON.stringify(person1) === JSON.stringify(person2));
console.log(JSON.stringify(person1));
console.log(typeof JSON.stringify(person1));

// Output:
// true
// {"name":"홍길동","age":30,"gender":"남자"}
// string

 

병합

여러 객체를 하나로 합치는 병합 또한 가능하다. spread operator라고 부르는 ...연산자를 통해 객체들의 중괄호를 제거하고 제거된 중괄호를 다시 묶어주면 묶인 객체들은 하나의 객체가 된다. 만약 같은 key값이 객체에 존재한다면, 나중에 나타난 값으로 덮어씌운다.

let person3 = {
    name: "홍길동",
    age: 30,
};

let person4 = {
    gender: "남자",
    age: 25,
};

let perfectMan = {...person3, ...person4};

console.log({...person3});
console.log({...person4});
console.log(perfectMan);

// Output:
// { name: '홍길동', age: 32 }
// { gender: '남자', age: 25 }
// { name: '홍길동', age: 25, gender: '남자' }

 

---

배열(Array)

자바스크립트에서 배열은 Object 자료형 종류 중 하나이며, 여러 개의 값(데이터)을 순서대로 저장하는 데이터 구조이다. 배열은 동적으로 크기를 조절할 수 있으며, 인덱스를 사용하여 각 원소에 접근할 수 있다는 점이 특징이다.

 

배열 기본 구조

// 초기화 및 선언
let fruits = ["사과", "바나나", "오렌지"];

// 크기를 미리 지정할 수 도 있다.
let number = new Array(5);

 

접근 

인덱스를 통해 접근할 수 있다.

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

// Output
// 사과
// 바나나
// 오렌지

 

배열 메소드

 

push(), pop(), shift(), unshift(), splice(), slice()

원소 추가 및 삭제와 같은 기본적인 기능을 가진 메소드들이다. 알아두면 좋으니 참고하자.

push()

배열의 마지막 위치에 원소를 추가한다.

fruits = ["사과", "바나나", "오렌지"];
fruits.push("키위");
console.log("2 => ", fruits);

// Output:
// 2 =>  [ '사과', '바나나', '오렌지', '키위' ]

 

pop()

배열의 마지막 위치에 원소를 제거한다.

fruits = ["사과", "바나나", "오렌지"];
fruits.pop();
console.log("3 => ", fruits);

// Output:
// 3 =>  [ '사과', '바나나' ]

 

shift()

배열의 가장 앞에 있는 원소를 제거한다.

fruits = ["사과", "바나나", "오렌지"];
fruits.shift();
console.log("4 => ", fruits);

// Output:
// 4 =>  [ '바나나', '오렌지' ]

 

unshift()

배열의 가장 앞에 원소를 추가한다.

fruits = ["사과", "바나나", "오렌지"];
fruits.unshift("포도");
console.log("5 => ", fruits);

// Output:
// 5 =>  [ '포도', '사과', '바나나', '오렌지' ]

 

splice()

지정한 위치부터 지정한 개수만큼 삭제하고 원소를 추가한다.

// splice(시작 위치, 삭제할 원소 개수, 삽입할 원소들)
fruits = ["사과", "바나나", "오렌지"];
fruits.splice(1, 1, "포도");
console.log("6 => ", fruits);

// Output:
// 6 =>  [ '사과', '포도', '오렌지' ]

 

slice()

지정한 시작 위치부터 끝 위치 전까지의 원소들을 배열 형태로 반환한다.

// slice(시작 위치, 끝 위치)
fruits = ["사과", "바나나", "오렌지"];
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits)

// Output:
// 7 =>  [ '바나나', '오렌지' ]

 

forEach(), map(), filter(), find()

해당 메소드들은 콜백함수들이다. 콜백함수는 매개변수 자리에 함수가 들어가는 것을 의미하는데, 자세한 설명은 후에 다루겠다.

forEach()

배열의 원소들을 차례로 접근한다.

let numbers = [4, 1, 5, 4, 5];
numbers.forEach(function(item){      
    console.log(item);
})

// Output:
// 4
// 1
// 5
// 4
// 5

 

map()

배열의 모든 원소들에 해당 코드를 적용한다. 항상 원본 배열의 길이만큼 리턴한다.

let numbers = [4, 1, 5, 4, 5];
let newNumbers = numbers.map(function (item){
    return item * 2;
});

console.log(newNumbers);

// Output:
// [ 8, 2, 10, 8, 10 ]

 

filter()

조건에 맞는 원소들을 리턴한다.

let numbers = [4, 1, 5, 4, 5];
let filterNumbers = numbers.filter(function (item){
    return item > 3;
})

console.log(filterNumbers);

// Output:
// [ 4, 5, 4, 5 ]

 

find()

조건에 맞는 첫번째 원소를 리턴한다.

let numbers = [4, 1, 5, 4, 5];
let result = numbers.find(function(item){
    return item > 3;
})

console.log(result);

// Output:
// 4