프로퍼티(Property)와 메서드(Method) 그리고 배열(Arrays)

프로퍼티(Property)와 메서드(Method)

자바스크립트에서 프로퍼티와 메서드는 객체(Object)의 중요한 구성 요소입니다.

1. 프로퍼티(Property)

• 프로퍼티는 객체의 속성을 나타내며, 키-값 쌍으로 저장됩니다.
• 키(Key)는 문자열 또는 심볼(Symb​​ol)이어야 하며, 값(Value)은 원시 값(숫자, 문자열, 불리언 등) 또는 다른 객체, 함수 등이 될 수 있습니다.

// 객체의 프로퍼티 정의
const person = {
  name: "John", // name이 프로퍼티 (키)
  age: 30       // age가 프로퍼티 (키)
};

// 프로퍼티 접근 방법
console.log(person.name); // John
console.log(person.age);  // 30

• 프로퍼티에 접근하는 방법은 두 가지입니다:
  • 점 표기법: object.property
  • 대괄호 표기법: object["property"]

console.log(person["name"]); // John (대괄호 표기법)

2. 메서드(Method)

• 메서드는 객체에 정의된 함수입니다. 즉, 객체의 프로퍼티 중 함수가 할당된 프로퍼티를 메서드라고 합니다.
• 메서드는 해당 객체와 관련된 동작을 정의합니다.

const person = {
  name: "John",
  age: 30,
  // 메서드 정의
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

// 메서드 호출
person.greet(); // Hello, my name is John.

• this 키워드는 메서드 내에서 객체 자신을 참조하는 데 사용됩니다. this.name은 person.name을 참조합니다.

프로퍼티와 메서드 요약

• 프로퍼티: 객체의 데이터를 저장하는 공간
• 메서드: 객체의 동작을 정의하는 함수

---

자바스크립트 배열(Arrays)

배열은 여러 값을 한 번에 저장할 수 있는 자바스크립트의 데이터 구조입니다. 배열은 자바스크립트에서 객체로 취급되며, 인덱스를 통해 값에 접근할 수 있습니다.

1. 배열 생성 방법

배열을 생성하는 방법에는 여러 가지가 있습니다.

// 배열 리터럴 방식
let fruits = ["Apple", "Banana", "Cherry"];

// Array 생성자 사용
let numbers = new Array(1, 2, 3, 4, 5);

2. 배열 접근

배열의 각 요소는 인덱스를 사용해 접근합니다. 배열의 인덱스는 0부터 시작합니다.

console.log(fruits[0]); // "Apple"
console.log(fruits[2]); // "Cherry"

3. 배열의 주요 메서드

배열은 여러 가지 내장 메서드를 제공하여 배열을 조작할 수 있습니다.

• push(): 배열의 끝에 요소를 추가

  fruits.push("Orange");
  console.log(fruits); // ["Apple", "Banana", "Cherry", "Orange"]

• pop(): 배열의 끝에서 요소를 제거

  fruits.pop();
  console.log(fruits); // ["Apple", "Banana", "Cherry"]

• shift(): 배열의 첫 번째 요소를 제거

  fruits.shift();
  console.log(fruits); // ["Banana", "Cherry"]

• unshift(): 배열의 앞에 요소를 추가

  fruits.unshift("Strawberry");
  console.log(fruits); // ["Strawberry", "Banana", "Cherry"]

• splice(): 배열의 중간에 있는 요소를 추가/제거

  fruits.splice(1, 1, "Lemon"); // 인덱스 1에서 1개 제거하고 "Lemon" 추가
  console.log(fruits); // ["Strawberry", "Lemon", "Cherry"]

• slice(): 배열의 일부분을 잘라서 새로운 배열을 만듦

  const sliced = fruits.slice(1, 3); // 인덱스 1부터 3 이전까지 잘라냄
  console.log(sliced); // ["Lemon", "Cherry"]

• concat(): 두 배열을 합쳐서 새로운 배열을 만듦

  const moreFruits = ["Peach", "Mango"];
  const allFruits = fruits.concat(moreFruits);
  console.log(allFruits); // ["Strawberry", "Lemon", "Cherry", "Peach", "Mango"]

• forEach(): 배열의 각 요소에 대해 반복 실행

  fruits.forEach(function(fruit) {
      console.log(fruit);
  });
  // 출력:
  // Strawberry
  // Lemon
  // Cherry

• map(): 배열의 각 요소를 변환하여 새로운 배열을 반환

  const uppercasedFruits = fruits.map(function(fruit) {
      return fruit.toUpperCase();
  });
  console.log(uppercasedFruits); // ["STRAWBERRY", "LEMON", "CHERRY"]

• filter(): 조건에 맞는 요소들로 새로운 배열을 생성

  const longFruits = fruits.filter(function(fruit) {
      return fruit.length > 5;
  });
  console.log(longFruits); // ["Strawberry", "Cherry"]

• find(): 조건에 맞는 첫 번째 요소를 반환

  const cherry = fruits.find(function(fruit) {
      return fruit === "Cherry";
  });
  console.log(cherry); // "Cherry"

• indexOf(): 특정 요소의 인덱스를 반환

  const index = fruits.indexOf("Cherry");
  console.log(index); // 2

4. 배열의 길이

배열의 길이는 length 프로퍼티로 확인할 수 있습니다.

console.log(fruits.length); // 3

---

요약

• 프로퍼티: 객체의 속성 (값을 저장).
• 메서드: 객체의 동작을 정의하는 함수.
• 배열: 여러 값을 저장하는 리스트 형식의 자료구조.
  • 배열에는 여러 내장 메서드가 있으며, 이를 이용해 배열을 추가, 삭제, 탐색, 변환할 수 있습니다.