JavaScript - 객체와 배열 기초

객체(Object)

JavaScript에서 객체는 키-값 쌍의 형태로 데이터를 저장하는 데이터 구조입니다. 여기서 키는 문자열이고 값은 다른 객체를 포함한 모든 데이터 유형이 될 수 있습니다.

 

1. 객체 생성

// 기본적인 객체 생성 구조
(키워드) (객체명) = {key1: value1, key2: value2};

// user 객체 생성 예시
let user = {
	id: "peterlah"
	pw: "dkagh123"
	mail: "peterlah@naver.com"
};

객체를 만들 때는 중괄호({})를 사용하며, 속성과 값을 콜론(:)으로 구분하여 작성합니다. 각 속성과 값은 쉼표(,)로 구분합니다.

// 함수 선언
function CreateUser(id, pw, email) {
	this.id = id;
	this.pw = pw;
	this.email = email;
}

// 생성자 함수를 통해 객체 생성
let user1 = new CreateUser("testid", "testpw", "test@mail.com")

또는 생성자 함수를 통해서도 객체를 생성 가능합니다.

 

2. 객체 속성에 접근하기

let user = {
	id: "peterlah"
	pw: "dkagh123"
	mail: "peterlah@naver.com"
};

console.log(user.id);   // "peterlah"
console.log(user.pw);    // "dkagh123"
console.log(user.mail); // "peterlah@naver.com"

객체 속성에 접근할때는 위의 예시 코드 처럼 [객체명.속성명] 형식으로 해당 속성에 접근합니다.

 

3. 객체 메소드

자바스크립트에서의 객체 메소드란 객체 안에서 속성으로 연결된 함수를 말합니다. 이러한 메서드를 사용하여 개체의 데이터에 대한 동작이나 작업을 수행하고 개체의 동작을 조작하거나 수정할 수 있습니다. 

개발자는 객체안에 본인만의 함수를 객체의 속성으로 연결하여 사용 가능하며, 자바스크립트 객체에서 기본으로 제공하는 메소드를 사용하는 것도 가능합니다.

자바스크립트 객체에는 toString(), valueOf(), hasOwnProperty(), Object.keys() 및 Object.values()와 같은 기본 제공 메서드가 있습니다.

// 사용자 정의 객체 메소드 예시
const person = {
  name: '상우',
  age: 30,
  info: function() {
    console.log(`${this.name}는 ${this.age}살 입니다.`);
  }
};

person.info(); // 상우는 30살 입니다.

위의 코드 샘플을 보면 객체의 속성으로 name과 age가 있고 해당 속성들은 각각 이름과 나이를 값으로 가지고 있습니다. 반면 info라는 속성은 함수를 값으로 가지고 있으며 이 함수는 객체의 이름과 나이를 조합한 문자열을 console 로그로 반환합니다.

// Object.keys() 메소드
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let keys = Object.keys(person);

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

다음은 기본제공 메소드를 한번 봐보겠습니다. Object.keys()라는 기본 메소드를 한번 봐보겠습니다. 이 기본 메소드는 객체의 속성이름을 반환할 수 있습니다. 그래서 위의 샘플 코드처럼 객체에서 어떤 key 값들을 사용하는지 확인하는데 사용하면 유용합니다. 그 외에도 여러 기본 제공 메소드가 있으며 간략하게 설명드리면 아래와 같습니다.

• Object.values() 메소드 : 객체의 속성 값들을 배열로 반환
• Object.entries() 메소드 : 객체의 속성 이름과 속성 값들을 2차원 배열로 반환
• Object.assign() 메소드 : 기존 객체를 복사하여 새로운 객체를 생성

 

배열(Array)

  JavaScript에서 배열은 숫자, 문자열 또는 기타 개체와 같은 값 또는 요소 모음을 저장하는 데 사용되는 데이터 구조입니다. JavaScript의 배열은 인덱스가 0부터 시작합니다. 예를 들어, 첫 번째 요소는 인덱스 0에 있고 두 번째 요소는 인덱스 1에 있는 식입니다. 배열을 정의할때는 대괄호 []로 묶인 쉼표로 구분된 값 목록인 배열 리터럴을 사용하거나 Array 생성자 함수를 사용하여 만들 수 있으며, push(), pop(), shift() 및 unshift()와 같은 메서드를 사용하여 요소를 추가하거나 제거하여 배열을 동적으로 생성할 수도 있습니다.

1. 배열 생성

// 기본적인 배열 생성
let fruits = ["사과", "바나나", "오렌지"]; // 배열을 만들 때는 대괄호([])를 사용하며, 각 요소는 쉼표(,)로 구분

// 배열 생성시 배열의 크기 지정 (생성자 사용)
let numbers = new Array(5); // 배열의 크기를 5로 지정하며 생성

// 배열의 요소 접근 방법
let fruits = ["사과", "바나나", "오렌지"];

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

// 배열의 요소에 접근할 때는 대괄호([]) 안에 인덱스 값을 넣어 접근

 

2. 배열 메소드

// push() 메소드 : 배열의 끝에 요소를 추가
let fruits = ["사과", "바나나"];
fruits.push("오렌지");
console.log(fruits);   // ["사과", "바나나", "오렌지"]

// pop() 메소드 : 배열의 마지막 요소를 삭제
let fruits = ["사과", "바나나", "오렌지"];
fruits.pop();
console.log(fruits);   // ["사과", "바나나"]

// shift() 메소드 : 배열의 첫 번째 요소를 삭제
let fruits = ["사과", "바나나", "오렌지"];
fruits.shift();
console.log(fruits);   // ["바나나", "오렌지"]

// unshift() 메소드 : 배열의 맨 앞에 요소를 추가
let fruits = ["바나나", "오렌지"];
fruits.unshift("사과");
console.log(fruits);   // ["사과", "바나나", "오렌지"]

// splice() 메소드 : 배열의 요소를 삭제하거나, 새로운 요소를 추가
let fruits = ["사과", "바나나", "오렌지"];
fruits.splice(1, 1, "포도");
console.log(fruits);   // ["사과", "포도", "오렌지"]

// slice() 메소드 : 배열의 일부분을 새로운 배열로 생성
let fruits = ["사과", "바나나", "오렌지"];
let slicedFruits = fruits.slice(1, 2);
console.log(slicedFruits);   // ["바나나"]

// forEach() 메소드 : 배열의 각 요소에 대해 콜백 함수를 실행
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});

// 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]

// filter() 메소드 : 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소만 새로운 배열로 반환
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers);   // [2, 4]

// reduce() 메소드
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum);

// find() 메소드 : 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번째 요소를 반환
let numbers = [1, 2, 3, 4, 5];
let foundNumber = numbers.find(function(number) {
  return number > 3;
});
console.log(foundNumber);   // 4

// some() 메소드 : 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인
let numbers = [1, 2, 3, 4, 5];
let hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});
console.log(hasEvenNumber);   // true

// every() 메소드 : 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 모든 요소인지 확인
let numbers = [2, 4, 6, 8, 10];
let isAllEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0;
});
console.log(isAllEvenNumbers);   // true

// sort() 메소드 : 배열의 요소를 정렬
let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort(function(a, b) {
  return a - b; // 오름차순, 내림차순은 b - a
});
console.log(numbers);   // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

// reverse() 메소드 : 배열의 요소를 역순으로 정렬
let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers);   // [5, 4, 3, 2, 1]