JavaScript 에센셜 | 위니북스

객체타입

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

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

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('안녕하세요 라이캣입니다');
  },
};

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를 반환합니다.

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 연산자를 이용해 특정 속성이 객체에 존재하는지 확인할 수 있습니다.

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 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);