JavaScriptBack to Blog

배열과 객체의 개념과 차이 (Array vs Object)

June 17th, 2020

🍪 배열과 객체의 정의

배열의 선언방법

let arr = [];

let arr = []; // 빈 배열 선언 arr = [1, 3, 5, 7, 9]; // 배열에 값 할당 console.log(arr); // [1, 3, 5, 7, 9]
  • 배열은 순서가 있는 값으로, 그 순서는 인덱스로 구성이 되어있습니다. (번호는 0부터 매김)
  • 그 값들은 요소(element)라고 부르며, 각각의 요소들은 쉼표(comma)로 구분해줍니다.
  • 대괄호'[ ]'를 통해 배열을 만듭니다.

객체의 선언방법

let user = {};

// 빈 객체 선언 let user = {}; // 객체에 값 할당 user = { name: "Jun", email: "jun@gmail.com", city: "Busan" } console.log(user); // {name: "Jun", email: "jun@gmail.com", city: "Busan"}
  • 항상 키와 값(key-value pair)으로 값을 넣어야합니다.
  • 그 값들은 속성(Property)라고 부르며, 한 쌍당 구분은 쉼표(comma)로 구분해줍니다.
  • 중괄호'{ }'를 통해 객체를 만듭니다.

🍪 값을 접근하는 방법

배열의 값 접근

arr[index];

let fruit = ["apple", "banana", "cherry"]; console.log(fruit[0]); // "apple" console.log(fruit[2]); // "cherry" fruit[2] = "corn"; console.log(fruit[2]); // "corn"

객체의 값 접근

1. Dot notation

obj.key

2. Bracket notation

obj['key']

let user = { name: "Jun", email: "jun@gmail.com", city: "Busan" } /* Dot notation */ console.log(user.name); // "Jun" console.log(user.email); // "jun@gmail.com" /* Bracket notation */ console.log(user['email']); // "jun@gmail.com" console.log(user['city']); // "Busan user.email === user['email'] // true /* 값 변경 */ user.name = "Bob"; console.log(user.name); // "Bob"

🍪 값의 추가, 삭제와 각종 메서드

배열의 값 추가와 삭제(push, pop, shift, unshif, concat)

let num = [1, 2, 3, 4, 5]; /* push(): 마지막 index에 배열 추가 */ num.push(100); // --> [1, 2, 3, 4, 5, 100] /* pop(): 마지막 index의 배열 삭제 */ num.pop(); // --> [1, 2, 3, 4, 5] /* shift(): 첫번째 index의 배열 삭제 */ num.shift(); // --> [2, 3, 4, 5] /* unshift(): 첫번째 index에 배열 추가 */ num.unshift(500); // --> [500, 2, 3, 4, 5] /* concat(): 배열을 병합, push()와 유사 */ let newNum = num.concat(300); console.log(num); // --> [500, 2, 3, 4, 5] console.log(newNum); // --> [500, 2, 3, 4, 5, 300]

📌 push와 concat의 차이 (불변성의 차이, Immutable)

  • push: 원본을 바꾸며, 배열의 끝에 요소를 추가하고 그 배열의 길이를 반환
  • concat: 원본을 바꾸지 않으며, 새로 만든 배열을 반환

객체의 값 추가와 삭제(notation, delete, key in obj)

let user = { name: "Jun", city: "Busan", email: "jun@gmail.com", } // 값을 추가하기 user.isStudent = true; user['hobby'] = ['축구', '야구']; /** *{ * name: "Jun", * city: "Busan", * email: "jun@gmail.com", * isStudent: true, * hobby: ["축구", "야구"] *} */ // delete: 값을 삭제하기 delete user.email; /** *{ * name: "Jun", * city: "Busan", * isStudent: true, * hobby: ["축구", "야구"] *} */ // 키 확인하기 'city' in user; // true 'email' in user; // false }

배열과 객체의 차이를 확인할 수 있는 메서드 (Array.isArray, length)

let arr = []; // Array let obj = {}; // Object /* typeof는 배열인지 객체인지 구분 불가 */ typeof(arr) // "object" typeof(obj) // "object" typeof(arr) === type(obj) // true /* Array.isArray()를 통한 분별 */ Array.isArray(arr); // true Array.isArray(obj); // false /* 객체는 length 사용 불가 */ arr.length // 0 obj.length // undefined

김병준

Frontend Engineer

개발할 때 유용했던 순간들을 기록하는 공간입니다.