객체타입

객체 타입은 여러 값을 한 번에 저장할 수 있는 데이터 타입입니다. 원시 타입이 한 가지 값만 저장할 수 있는 것과 달리, 객체 타입은 여러 데이터를 이름(키)과 값의 쌍으로 저장할 수 있습니다.

let name = 'licat';
let age = 20;

// 객체 타입
let user = {
  name: 'licat',
  age: 20,
};

객체 타입은 생성 후에도 내용을 변경할 수 있는 가변성(mutable) 을 가집니다. 객체의 속성을 추가, 수정, 삭제할 수 있으며, 객체 자체는 그대로 유지됩니다. 객체 타입 변수는 실제 객체를 직접 저장하지 않고, 객체가 저장된 메모리 주소를 가리키는 참조(reference)를 저장합니다.

let user = {
  name: 'licat',
  age: 20,
};
user.age = 30;
console.log(user);

1. 객체 (Object)

객체는 키(key)와 값(value)의 쌍으로 데이터를 저장합니다. 키와 값의 쌍을 속성(property) 라고 하며, 값이 함수인 경우에는 이 속성을 메소드(method) 라고 합니다.

객체는 중괄호 {}를 사용하여 생성합니다. 키와 값은 콜론(:)으로 구분되며, 각 프로퍼티는 쉼표(,)로 구분됩니다. 키는 문자열 또는 심볼 타입을 사용할 수 있으며, 다른 타입을 사용하는 경우 문자열로 변환됩니다. 값으로는 모든 자바스크립트의 값을 사용할 수 있습니다.

let user = {
  name: 'licat',
  age: 30,
  address: {
    city: '제주',
    district: '아라동',
  },
  greet: function () {
    console.log('안녕하세요 라이캣입니다');
  },
};

최신 문법을 사용하면 객체를 좀 더 간결하게 표현할 수 있습니다. 변수의 이름과 프로퍼티의 키가 같은 경우 축약하여 작성할 수 있습니다. 메소드도 function 키워드를 생략하고 바로 작성할 수 있습니다.

let company = 'weniv'
let user = {
  company, // company : company
  greet() {
    console.log('안녕하세요 라이캣입니다');
  }
}

console.log(user);

1.1 객체 속성 접근

객체의 속성에 접근하는 방법은 두 가지가 있습니다.

점 표기법: 객체.속성명
대괄호 표기법: 객체[속성명]

속성의 이름이 변수명 규칙을 따르지 않은 경우에는 점 표기법을 사용할 수 없습니다. 또한 존재하지 않는 속성에 접근하면 undefined를 반환합니다.

let user = {
  name: 'licat',
  age: 30,
  address: {
    city: '제주',
    district: '아라동'
  },
  greet() {
    console.log('안녕하세요 라이캣입니다');
  }
}

console.log(user.name);
console.log(user['name']);
console.log(user['company']);

user.greet();
user['greet']();

1.2 객체 속성 수정

객체의 속성을 추가하거나 수정하려면 객체 속성 접근법과 함께 할당 연산자를 사용합니다. 기존에 존재하는 속성의 키에 접근하면 새로운 값으로 변경되며, 존재하지 않는 속성 키를 사용하면 새로운 속성이 추가됩니다.

let user = {
  name: 'licat',
  age: 30,
  address: {
    city: '제주',
    district: '아라동'
  },
  greet() {
    console.log('안녕하세요 라이캣입니다');
  }
}

user.company = 'weniv';
console.log(user);

속성을 삭제하려면 delete 키워드를 사용합니다.

let user = {
  name: 'licat',
  age: 30,
  address: {
    city: '제주',
    district: '아라동'
  },
  greet() {
    console.log('안녕하세요 라이캣입니다');
  }
}

delete user.address;
console.log(user);

1.3 객체 속성 확인

in 연산자를 이용해 특정 속성이 객체에 존재하는지 확인할 수 있습니다.

let user = {
  name: 'licat',
  age: 30,
  address: {
    city: '제주',
    district: '아라동'
  },
  greet() {
    console.log('안녕하세요 라이캣입니다');
  }
}

console.log('age' in user);
console.log('company' in user);

1.4 객체 순회

객체의 모든 속성을 확인하는 방법으로는 for ... in 반복문을 사용할 수 있습니다.

let user = {
  name: 'licat',
  age: 30,
  address: {
    city: '제주',
    district: '아라동'
  },
  greet() {
    console.log('안녕하세요 라이캣입니다');
  }
}
for (const key in user) {
  console.log(`${key}: ${user[key]}`)
}

2. 배열 (Array)

배열은 여러 값을 순서대로 저장하는 객체입니다. 각 값은 배열의 요소(element)이며, 인덱스(index)를 통해 접근할 수 있습니다. 문자열의 인덱스와 마찬가지로 배열에서도 인덱스는 0부터 시작합니다.

배열은 대괄호([])를 사용하여 생성하며, 요소를 쉼표(,)로 구분됩니다. 요소는 자바스크립트의 모든 값이 될 수 있으며, 동일한 타입이 아니어도 됩니다.

let fruits = ['사과', '바나나', '오렌지', '딸기'];
console.log(fruits[0]);

let types = ['string', 123, true, {}, [], function(){}]
console.log(types);

또한 Array() 함수를 사용하여 배열을 생성할 수도 있습니다. Array 괄호 안에 요소를 나열하여 배열을 생성하거나, 한 개의 숫자를 입력하면 해당 개수만큼 요소가 비어있는 배열을 만들 수 있습니다.


const arr1 = new Array(4, 5, 6);
const arr2 = new Array(3);

console.log(arr1)
console.log(arr2)

2.1 배열 요소 접근

배열의 각 요소는 인덱스를 사용하여 접근할 수 있습니다. 범위를 벗어난 인덱스를 사용하는 경우 undefined를 반환합니다.

let colors = ['빨강', '파랑', '노랑', '초록'];

console.log(colors[0]);
console.log(colors[2]);
console.log(colors[colors.length - 1]);
console.log(color[5]);

2.2 배열 요소 수정

배열의 요소는 인덱스를 사용하여 새로운 값을 할당하거나, 배열의 메서드를 사용하여 추가할 수 있습니다.

let numbers = [10, 20, 30];

// 수정
numbers[0] = 0;
console.log(numbers);

// 배열 끝에 추가
numbers.push(40);

// 배열 시작에 추가
numbers.unshift(5);
console.log(numbers);

배열의 요소를 삭제하기 위해서 여러 메서드를 사용할 수 있습니다.

let letters = ['h', 'e', 'l', 'l', 'o']

// 마지막 요소 제거
let lastElem = letters.pop();
console.log(lastElem);
console.log(letters);

// 첫 번째 요소 제거
let firstElem = letters.shift();
console.log(firstElem);
console.log(letters);