Create, Compete & Win at Redbrick Connect 2024! 🎉

객체 조작

객체(배열 객체)를 다루는 방법에 대해 간략히 설명합니다.

객체 데이터 타입을 가진 값들은 원시 값과 다른 데이터 접근 방법을 가지고 있으며, 자바스크립트는 기본적으로 값들을 다루는 다양한 내장 함수를 제공합니다.

객체(Object)

객체는 {}로 둘러싸인 하나 이상의 키-값 쌍을 선언할 수 있습니다. 키-값 쌍은 [키]:[값] 형태로 정의되며, 키는 객체의 속성이 됩니다. [객체 이름]으로 값을 접근하려면 [키]

const emptyObject = {}; // Object with no data
const cube = { title: "cube(123)", color: "red" };
 
console.log(emptyObject.title); // undefined
console.log(cube.title); // cube(123)

이미 생성된 객체의 값을 변경하거나 새로운 속성을 추가/제거할 수도 있습니다.

const emptyObject = {};
const cube = { title: "cube(123)", color: "red" };
 
cube.color = "blue";
emptyObject.color = "yellow";
 
delete cube.title;
 
console.log(cube.color); // blue
console.log(emptyObject.color); // yellow
console.log(cube.title); // undefined

배열 객체(Array Object)

배열 객체는 []로 둘러싸인 하나 이상의 값을 선언할 수 있습니다. 값을 접근하려면 인덱스를 통해 접근해야 합니다. 인덱스는 특정 값이 존재하는 배열 객체의 위치를 나타냅니다. 인덱스는 0부터 시작하는 정수입니다. [배열 객체][인덱스]와 같은 방식으로 값을 접근할 수 있습니다.

const emptyArray = []; // Array with no data
const cubes = ["cube0", "cube1", "cube2"];
 
console.log(emptyArray[0]); // undefined
console.log(cubes[0]); // cube0
console.log(cubes[2]); // cube2

이미 생성된 배열 객체의 값을 변경하거나 새로운 값을 추가/제거할 수 있으며, 기본적으로 포함된 length 속성에 접근하여 배열 객체 내 값의 개수를 알 수 있습니다.

const emptyArray = [];
const cubes = ["cube0", "cube1", "cube2"];
 
emptyArray[0] = "value0";
cubes[0] = "cube3";
 
console.log(emptyArray[0]); // value0
console.log(cubes[0]); // cube3
console.log(cubes.length); // 3

배열 객체 내 데이터를 조작하는 다양한 함수는 다음 문서에서 찾을 수 있습니다.

자바스크립트 배열 메소드