[JavaScript 기초] 객체 / 배열

강의명 : 제임스코딩 풀스택 개발 입문 5주 완성 - 섹션 7 JavaScript 객체와 배열

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 1. JavaScript 기본

 

1. 객체

2. 배열

 

---

1. 객체

const class = {
	//객체의 속성들 정의
	key : value;
        key : value;
        ...
}

 

- 속성(property)으로 구성된 데이터 집합

- { } 안에 '속성이름(key) : 속성값(value)'으로 정의한다.

- key는 string 타입이지만 value는 모든 타입이 올 수 있다. 함수가 value가 되면 method라고 부른다.

 

1) value에 접근하기

class.key;		//점 표기법(dot notation)
class[key];		//대괄호 표기법(bracket notation)

 

2) key가 class 내에 존재하는지 확인

key in class;

 

3) key 추가 & 삭제

// 새로운 key 추가 or 기존 key의 value값 수정
class.key = value;
class[key] = value;

// key 삭제
delete class.key;
delete class[key];
class.key = null;	//null로 만들어서도 삭제 가능

 

4) key, value 값 순회

for(let key in class) {
	console.log(key);		//key 값 순회
	console.log(class.key);		//value 값 순회
}

 

5) key, value 값 배열 반환

const keys = Object.keys(class);		// key 배열 리턴
const values = Object.values(class);		// value 배열 리턴

const properties = Object.entries(class);	// key-value 이차원 배열 리턴

 

6) 객체 이어붙히기

- 기존 객체에 입력받은 객체들의 속성들을 복사, 생성된 객체는 기존 객체와 동일한 타입에 포함된다.

const Person = {
	name: 'Mark',
	age: 26
};

const memberInfo = {
	friend : 'Lee',
};

// Person 객체에 memberInfo의 속성들을 업데이트
const PersonUpdated = Object.assign(Person, memberInfo);

console.log(Person === PersonUpdated);		// true, 여전히 Person 객체로 인식
console.log(Person);			// {name: 'Mark', age: 26, friend: 'Lee'}

 

 

 

 

2. 배열 Array

// 배열 선언
let list = [];
let arr2 = new Array();
const nation = ['Korea', 'Japan', 'China'];
const color = new Array("red", "blue", "black");

// 객체도 원소로 포함 가능
const list = [
    {num : 1, color:"red"},
    {num : 2, color:"blue"},
    {num : 3, color:"black"},
];

 

- 순서가 있는 요소(element)로 구성된 데이터 집합 (배열도 객체의 일종)

- 하나의 배열에 여러개 자료형이 혼재되어 있을 수 있다.

 

1) 원소 추가 & 삭제

- push / unshift : 기존 list 변화 + 요소가 추가된 후 배열의 길이를 리턴

- pop / shift : 기존 list 변화 + 삭제된 요소값을 리턴

let list = [1, 2, 3, 4, 5];

// 배열의 뒤에서 원소 추가, 삭제
list.push(6);
console.log(list.push(7));		// 원소 추가 후 list 길이 7 리턴

list.pop();
console.log(list.pop());		// 삭제된 원소 6 리턴

// 배열의 앞에서 원소 추가, 삭제
list.unshift(원소);
list.shift();

// 객체 원소 추가할 때
list.push({key : value});

 

 

2) 배열 자료형 확인

- typeof : 배열을 'object'로 리턴

- Array.isArray : 배열인지 아닌지 true, flase로 반환

typeof arr;		// object로 반환
Array.isArray(list);	// true, flase로 반환

 

 

3) 배열 원소 탐색

- array.find / array.findIndex : 객체 element로 구성된 list에서, 어떤 조건을 만족하는 객체 element나 index를 얻고싶을 때 사용, 가장 처음 조건을 만족하는 element의 index를 반환

list.includes(원소)		// 원소의 포함여부 true, false 반환

list.indexOf(원소, 탐색을 시작할 index)		// 원소의 index 리턴, 존재하지 않으면 -1 리턴
list.includes(원소, 탐색을 시작할 index)		// 배열 내 원소의 존재 유무를 리턴

list.findIndex((element) => {element.key === value;});
list.find((element) => {element.key === value;});

 

 

4) 배열 필터링

- array.slice :  배열의 start index부터 end index까지 원소를 복사해서 새로운 배열로 반환

- array.filter : 조건을 만족하는 원소들만 걸러 새로운 배열로 반환

// 배열 slicing
list.slice(start index, end index)	// start~end-1까지 slicing
list.slice(start index)			// start~배열끝까지 slicing
list.slice()				// 전체 배열 복사

// 배열 filter
list.filter((element) => 필터링 조건));
list.filter((element) => element.num === 1);

 

 

5) 배열 내 원소를 결합

- arr.join("구분자") : "구분자"를 포함해서 배열의 모든 원소 합침

const list = ["안녕하세요", "만나서", "반갑습니다."]
list.join(" ");

 

6) 배열 간 결합

- array.concat : 기존 배열 + 인자로 전달되는 모든 배열 + 인자로 전달되는 모든 값, 모두 복사해서 새로운 배열로 반환

let nums = [1, 2, 3];
let nums2 = [4, 5];

nums.concat(nums2); 		// [1, 2, 3, 4, 5]
nums.concat(nums2, 6, 'a'); 	// [1, 2, 3, 4, 5, 6, 'a']
nums.concat(); 			// [1, 2, 3] 기존 배열 복사

 

 

7) 배열 원소 순회

- array.forEach(함수) : list 각각의 element를 순회하며 함수를 적용

- array.map(함수)  : list 각각의 element를 순회하며 함수를 적용한 결과로 나오는 새로운 배열 리턴

for(let i=0; i<list.length; i++){
	console.log(list[i]);
}

for(let element of list){
	console.log(element);
}

list.forEach(function (element){console.log(element);});

//배열 순회하며 새로운 배열을 생성
const list2 = list.map((element) =>{return element*2;});

 

 

8) 배열 정렬
- arr.sort() : 원본 배열을 정렬 (원본 배열을 변화시킴), 각 element를 String Type으로 인식하고 정렬하기 때문에 필요한 경우 정렬 기준을 제시하는 compare 함수를 지정해야함

// 숫자 배열을 정렬하고 싶은 경우
const compare = (a,b) => {
	if (a>b){
        return 1;  //a가 b보다 뒤에 있다.
    }
    if (a<b){
    	return -1;  //a가 b보다 앞에 있다.
    }
    	return 0;
    }

// list.sort(비교함수) 형태
list.sort(compare)

 

 

 

 

 

 

 

Reference

https://velog.io/@dami/JS-%EB%AA%85%EC%8B%9C%EC%A0%81-%ED%98%95%EB%B3%80%ED%99%98explicit-coercion-%EC%95%94%EC%8B%9C%EC%A0%81-%ED%98%95%EB%B3%80%ED%99%98implicit-coercion
https://velog.io/@blackwidow/parseInt%EC%99%80-Number%EC%9D%98-%EC%B0%A8%EC%9D%B4
https://velog.io/@seize/JavaScript-null-%EB%B3%91%ED%95%A9-%EC%97%B0%EC%82%B0%EC%9E%90