[JavaScript] 배열, 객체 메서드

DY·2022년 8월 21일
0

JavaScript

목록 보기
6/12

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

배열

- 빈 배열인지 검사

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

- 유사 배열 객체 (Array.from 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(obj1); //2차원 배열로 나온다. [[key1,value1], [key2,value2], ...]

- 특정 값이 객체의 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", }​

- 객체의 구조분해 할당


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

변수로 받아 object의 key 할당

function test(key){
  let obj = {[key]: true}
  console.log(obj) // { temp : true};
}

test("temp");

mutable immutable

mutableimmutable
splice()slice()
Object.assignjoin()
profile
프론트엔드 개발자가 되기 위해 공부중입니다. 블로그는 공부한 내용을 올리고 있습니다.

0개의 댓글