[JavaScript] 배열, 객체

코딩하면서 모르는 내장함수가 있거나 헷갈릴때마다 정리예정..

---

 

 

#  배열

 

- 빈 배열인지 검사  

let arr1 = [];
console.log(arr1.length === 0) // true
console.log(arr1 === [])	// false       -> arr1과 []의 주소값이 다르기 때문에 false라고 나온다.

- 유사 배열 객체 (Array.form return value)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

//특정 데이터로 부터 배열을 만듬.

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

- reverse()

배열을 뒤집음.

let t = "가나다"; t.split("").reverse().join();​

- split()

- 특정 문자로 문자열을 자름

let words = "  " //공백 2번
let arr = words.split(" ");
console.log(arr) //["","",""];​

- splice()

- 특정 인덱스부터 제외할 문자 갯수를 지정해서 원본배열을 수정함.
- 옵션으로 제외후 요소 추가도 가능 (item1, item2 ... 자리)
- 리턴값은 제거한 요소들을 배열로 리턴함.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])​

- join()

- 배열을 전달받은 인자를 추가하여 문자열로 변환함.
- 리턴값은 새로 만든 문자열
- immutable

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

- spread 문법

배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용

const arr1 = [1,2,3];
const arr2 = [4,5,6];
let arr3 = [0,...arr1, ...arr2,7];
console.log(arr3) // [0,1,2,3,4,5,6,7]

- 객체도 병합이 가능. 키가 같으면 해당 값은 나중에 병합하는 값으로 설정됨

 

- rest 문법

파라미터를 배열의 형태로 받아서  사용.  다른언어들의 가변인자매개변수와 비슷.
spread syntax를 통해 간단히 구현이 가능하다.

function getAllParams(...args){
	return args;
}

getAllParms("a","b","c")​

- 매개변수보다 적은 인자를 전달할 경우

 function getAllParams(required1, required2, ...args) {
      return [required1, required2, args];
 }
 
const t =  getAllParams(123);
console.log(t) = [123,undefined,Array(0)];​

 

- 문자열에서 특정 인덱스 수정

- 문자열은 인덱스로 해당 인덱스에 해당하는 값을 바꾸지 못한다. 
- 데이터 흐름을 추적하기 어렵게 만들기 때문, 프로그래밍시 고려해야할 요소가 너무 많아짐
- string값은 기본선언시 immutable로 선언이된다.
- 필요시 사용자가 함수를 만들어서 사용하는게 가장편리함. 

function splitfunc(index, character, str) {
  str = str.slice(0,index-1) + character + str.slice(index, str.length)	//상황에 맞게 적절히수정해서 사용
  return str;
}​

 

 

 # 객체

- c++, java, c# 같은 객체지향 언어는 미리 class를 선언하고 객체를 만들기 때문에 프로퍼티 추가가 안된다. 하지만 javascript는 클래스 선언 없이 해쉬테이블처럼 동적으로 프로퍼티를 추가할수 있다.

 

- 객체의 key값 구하기

Object.keys(obj1) // 객체의 key들이 배열로 나온다.

- 객체의 value 구하기

Object.values(obj1) //배열로 나온다.

- 객체의 key, value 구하기

Object.entries();

 

- 특정 값이 객체의 key에 존재하는지 여부

Object.keys(obj1).includes(key) // 이방법은 매우 느린방법

obj1.hasOwnProperty(key) //프로토타입객체는 탐색하지않음. 일반적으로 추천하는 방법

- 객체의 길이 구하기.

Object.keys(obj1).length // key의 개수를 배열로 반환하고 그 배열의 길이를 구함.

- 객체 병합

// Object.assign(target, source)
// muttable
// 인자에 주소값이 있으면 주소값을 복사함. 깊은복사 안됨.
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

/* target에 source를 추가. 곂치는 key값은 source값으로 할당 */
const returnedTarget = Object.assign(target, source);

console.log(target); Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget); Object { a: 1, b: 4, c: 5 }

- 함수의 arguments return

공부하면서 함수도 각자 객체가 생성이 된다고 봤던것같다. 프로토타입과 관련이 있는듯하다. 공부하고 수정예정이다.

function getAllParamsByArgumentsObj() {
      return arguments;
    }
    
const argumentsObj = getAllParamsByArgumentsObj('first', 'second', 'third');
console.dir(argumentsObj) // Arguments객체 반환 {0:"first", 1:"second", 2:"third", }​

 

- 객체의 구조분해 할당

- 배열의 구조분해 할당은 spread문법을 활용해서 사용이 가능하고 사용법이 쉽다.
- 객체의 구조분해 할당도 비슷하지만 처음보는 형태라 모호하다.

const student = { name: '박해커', major: '물리학과' }

const { name } = student;
console.log(name) // "박해커"

/* spread문법 사용 */  

const student = { name: '최초보', major: '물리학과' }
const { name, ...args } = student
console.log(args) // major:"물리학과";
  
const student = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' }

function getSummary({ name, lesson: course, grade }) {
         return arguments;
}
getSummary(student) //객체로 반환됨 name, lesson, major, grade -> key

 

 

mutable	immutable
splice()	slice()
Object.assign	join()