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