[JAVASCRIPT] 객체와 배열 개념과 차이

#1 배열과 객체

Object(객체)정의

자바스크립트에서 원시 타입을 제외한 모든 데이터 타입은 객체이다. 객체는 여러가지 값 혹은 함수도 가능하다.
객체가 보유한 값을 "프로퍼티"라고 하며, 객체가 보유한 함수는 "메서드"라고 한다. key, value 구조의 자료구조이다. 객체의 프로퍼티와 메서드들은 "키값"으로 구분된다.

배열의 선언방법

let arr = [ ];
arr = [1, 3, 5, 7, 9]
console.log(arr);

• 배열은 순서가 있는 값으로, 그 순서는 인덱스로 구성이 되어있습니다.
  (번호는 0부터 매김)
• 그 값들은 요소(element)라고 부르며, 각각의 요소들은 쉼표(comma)로 구분
• 대괄호'[ ]'를 통해 배열을 만듭니다.

객체의 선언방법

let user = {};
user = {
	name: "Park",
    email: "park@naver.com",
    city: "Seoul"
}
console.log(user);

• 항상 키와 값(key-value pair)으로 값을 넣어야합니다.
• 그 값들은 속성(Property)라고 부르며, 한 쌍당 구분은 쉼표(comma)로 구분됨.
• 중괄호'{ }'를 통해 객체를 만듭니다.

#2 값을 접근한는 방법

배열의 값 접근

• 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"

객체의 값 접근

• obj.key // Dot notation
• obj['key'] // Bracket notation

let user = {
	name: "Park",
    email: "park@naver.com",
    city: "Seoul"
}
 /*Dot notation*/
console.log(user.name);  
console.log(user.email); 
 
/*Bracket notation*/
console.log(user['email']); // --> "park@naver.com"
console.log(user['city']);  // --> "Seoul"
 
user.email === user['email'] // true
 
/*값 변경*/
user.name = "Bob";
console.log(user.name); // --> "Bob"

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

배열의 값 추가와 삭제(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: "Park",
    email: "park@naver.com",
    city: "Seoul"
}
 
/* 값을 추가하기 */
user.isStudent = true;
user['hobby'] = ['축구', '야구'];
 
/**
 *{
 *  name: "Park",
 *  city: "Seoul",
 *  email: "park@naver.com",
 *  isStudent: true,
 *  hobby: ["축구", "야구"]
 *}
 */
 
/* delete: 값을 삭제하기*/
delete user.email;
 
/**
*{
*  name: "Park",
*  city: "Seoul",
*  isStudent: true,
*  hobby: ["축구", "야구"]
*}
*/
 
/* 키 확인하기 */
'city' in user; // true
'email' in user; // false
}

참조

https://ko.javascript.info/