[JS] 배열과 객체 / Array vs Object

sohyun·2022년 5월 6일
0

Javascript basic

목록 보기
5/7

01. 배열과 객체의 정의

1-1. 배열의 선언방법

let arr = [ ];

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

1-2. 객체의 선언방법

let user = { };

let user = { };		// 빈 객체 선언
user = {
	name:"hyun",
    age:20,
    city:"seoul"
    };				// 객체의 값 할당
console.log(user);  //{name:"hyun",age:20,city:"seoul"};	
  • 중괄호'{ }'를 통해 객체 생성
  • 항상 키와 값(key-value pair)으로 값을 넣어야합니다.
  • 그 안의 값들을 속성(property)이라고 부르며, 한 쌍당 구분은 쉼표로 구분

02. 배열과 객체의 값에 접근하는 법

2-1. 배열의 값 접근

arr[index];

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

2-1. 객체의 값 접근

1.Dot notation : obj.key

let user = {
	name="hyun",
    age=20,
    city="seoul"
    }
/*Dot notation*/
console.log(user.name);			//"hyun"
console.log(user.age);			//20

2.Bracket notation : obj['key']

let user = {
	name="hyun",
    age=20,
    city="seoul"
    }
/*Bracket notation*/
console.log(user['name']);		//"hyun"
console.log(user['age']);		//20
user.email === user['email'] 	//true
/*값 변경*/
user.name ="ssoo";
console.log(user['name']);		//"ssoo"

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

03-1. 배열의 값 추가와 삭제

push, pop, shift, unshift, concat

  • push() : 마지막 index에 배열 추가
let num [1,2,3,4,5];
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(300); 		//[300,2,3,4,5]
  • concat() : 병합하려는 배열의 마지막에 병합, push와 유사
let newNum = num.concat(600);
console.log(num); 		//[300,2,3,4,5]
console.log(newNum); 	//[300,2,3,4,5,600]

pushconcat의 차이 (불변성의 차이,Immutable)

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

03-2. 객체의 값 추가와 삭제

notation,delete,key in obj

  • 값 추가
let user = {
	name="hyun",
    age=20,
    city="seoul"
    }
// 값 추가
user.isStudent = true;
user['hobby'] = ["축구","야구"];
//결과
let user = {
	name="hyun",
    age=20,
    city="seoul",
    isStudent = true,
    hobby= ["축구","야구"]
    }
  • delete: 값 삭제
//값 삭제
delete user.name;
//결과
let user = {
    age=20,
    city="seoul",
    isStudent = true,
    hobby= ["축구","야구"]
    }
  • 키 확인
//키 확인
'city' in user;	 // true
'name' in user;  // false

04. 배열과 객체의 분별할 수 있는 메서드

Array.isArray, length

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

0개의 댓글