📝 [JS 공부기록] 자바스크립트 데이터와 알아야할 개념들

숫자와 수학

• toFixed() → 소수점 자리수
• parseInt(str) → 숫자를 정수로 추출
• parseFloat(str) → 숫자를 실수로 추출

Math 내장 객체

• Math.abs() → 주어진 숫자의 절대값을 반환
• Math.min(2, 8) → 주어진 숫자의 최소값 반환
• Math.max(2, 8) → 주어진 숫자의 최대값 반환
• Math.ceil(3.14) → 주어진 숫자를 올림처리
• Math.floor(3.14) → 주어진 숫자를 내림처리
• Math.round(3.14) → 주어진 숫자를 반올림처리
• Math.random() → 랜덤한 숫자 반환

배열 API

Array.prototype

• .find()

  const array1 = [5, 12, 8, 130, 44]
  
  const found = array1.find(el => el > 10)
  
  console.log(found)

• .length - 배열의 길이를 알려주는 속성
• .concat() - 두개의 배열 데이터를 병합하여 반환(원본 데이터 손상X)
• .forEach() - 배열의 원소 개수만큼 콜백 함수 실행

  let fruits = ['Apple', 'Banana', 'Pineapple']
  
  fruits.forEach(elements, index, array) {
  	console.log(elements, index, array)
  }

• .map() - 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열 반환(본래의 배열과 길이가 같음!)

  const b = fruits.map((fruit, i) => ({
  	id: i,
  	name: fruit
  }))

• .filter() - 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

  const numbers = [1, 2, 3, 4]
  const fruits = ['Apple', 'Banana', 'Cherry']
  
  const a = fruits.filter(number => number > 3)

• (같은 로직을 map 적용시 boolean 데이터로 나옴!)
• .find() - 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환, 그런 요소가 없다면 undefined 반환

  const numbers = [1, 2, 3, 4]
  const fruits = ['Apple', 'Banana', 'Cherry']
  
  const a = fruits.find(fruit => /^B/.test(fruit))

• .indeIndex() - 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스 반환, 없다면 -1 반환

  const numbers = [1, 2, 3, 4]
  const fruits = ['Apple', 'Banana', 'Cherry']
  
  const a = fruits.findIndex((fruit => return /^B/.test(fruit))

• .includes() - 배열이 특정 요소를 포함하고 있는지 판별

  const numbers = [1, 2, 3, 4]
  const fruits = ['Apple', 'Banana', 'Cherry']
  
  const a = numbers.includes(3)
  console.log(a) // true

원본 수정됨!

• .push() - 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환

  const animals = ['pigs', 'goats', 'sheep']
  
  const count = animals.push('cows')
  console.log(count)
  // 4
  
  console.log(animals)
  // Array ['pigs', 'goats', 'sheep', 'cows']

• .unshift() - 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환

  const arr1 = [1, 2, 3]
  
  console.log(arr1.unshift(4, 5))
  // 5
  
  console.log(arr1)
  // Array [4, 5, 1, 2, 3]

• .reverse() - 배열의 순서를 반전

  const numbers = [1, 2, 3, 4]
  const fruits = ['Apple', 'Banana', 'Cherry']
  
  numbers.reverse()
  fruits.reverse()

• .splice() - 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용으로 변경

  • 인수가 2개 → .splice(2, 1) : 인덱스 번호 2번부터 1개의 데이터 지움

  • 인수가 3개 → .splice(2, 1, 99) : 인덱스 번호 2번부터 1개의 데이터를 지우고 99 추가

    const months = ['Jan', 'March', 'April', 'June'];
    months.splice(1, 0, 'Feb');
    // inserts at index 1
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "June"]
    
    months.splice(4, 1, 'May');
    // replaces 1 element at index 4
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "May"]

객체(Object)

정적 메소드 → 객체 프로토타입에 이미 등록되어 있는 함수들

• 리터럴 방식으로 바로 사용할 수 없음

• Object.assign(대상객체, 출처객체) - 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용 / 출처객체 데이터를 대상객체로 복사해서 병합

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

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

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

const userAge = {
	name: 'zerone',
	age: 85
}

const userEmail = {
	name: 'zerone'
	email: '[email protected]'
}

const target = Object.assign({}, userAge, userEmail)

console.log(target === userAge) //flase

• Object.keys() - 주어진 배열의 키를 추출해서 새로운 배열로 반환

구조 분해 할당 (Destructuring assignment)

• 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]

const fruits = ['Apple', 'Banana', 'Cherry']
const [ , , c] = fruits
// output: Cherry

const user = {
	name: 'zerone',
	age: 98.
	email: kc9994@naver.com
}

const {name, age: 나이, address='korea', email} = user
// age를 나이라는 변수로 활용할 수 있음

전개 연산자(Spread)

• 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 또는 요소로 확장

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

const fruits = ['Apple', 'Banana', 'Cherry', 'Orange']

function toObject(a, b, ...c) {
	return {
		a: a,
		b: b,
		c: c 
	}
}

console.log(toObject(...fruits)) // c 에는 Cherry와 Orange가 모두 담겨있음

// 축약형으로 작성가능
const toObject = (a, b, ...c) => ({a, b, c})

데이터 불변성(Immutability)

• 원시 데이터: String, Number, Boolean, undefined, null ...
• 참조형 데이터: Array, Object, Function ...

원시형 데이터는 불변성을 가짐

let a = 1 // 첫 번째 메모리 주소에 1이 할당
let b = 4 // 두 번째 메모리 주소에 4가 할당
console.log(a, b, a === b)
// 1 4 false
b = a // b가 참조하는 메모리 주소를 a가 참조하는 메모리 주소로 변경
console.log(a, b, a === b)
// 1 1 true
a = 7 // 세 번째 메모리 주소에 7이 할당
console.log(a, b, a === b)
// 7 1 false
let c = 1 // 첫 번째 메모리 주소를 참조(네 번째 메모리 주소에 1을 할당하는 것이 아님)
console.log(b, c, b === c)
// 1 1 true

참조형 데이터는 가변성을 가짐(불변성X?)

→ 생긴 것이 똑같아도 서로 같은 데이터가 아닐 수 있다

• 할당시 메모리 참조 주소가 바뀌면서 가변성을 가짐

let a = {k: 1}
let b = {k: 1}
console.log(a, b, a === b)
// {k: 1} {k: 1} flase

a.k = 7
b = a
console.log(a, b, a === b)
// {k: 7} {k: 7} true

a.k = 2
console.log(a, b, a === b)
// {k: 2} {k: 2} true

let c = b // b 의 값이 c 로 복사되는 것이 아닌, 같은 주소를 참조한다는 것!
console.log(a, b, c, a === c)
/// {k: 2} {k: 2} {k: 2} true

a.k = 9
console.log(a, b, c, a === c)
// {k: 9} {k: 9} {k: 9} true
// a 의 k 값만 바꿨는데 b, c 또한 a 와 같은 메모리를 참조하고 있기 때문에 같이 바뀜

• a = b 로 할당할 때 a 와 b를 완전히 구분해서 사용하려면 복사를 통해 할 수 있음(얕은복사, 깊은복사)

얕은 복사(Shallow copy), 깊은 복사(Deep copy)

얕은 복사 → (객체’만' 복사)

1. Object.assgin()

const user = {
	name: 'zerone',
	age: 98,
	emails: '[email protected]'
}

**const copyUser = Object.assing({}, user)**

console.log(copyUser === user)
// false

user.age = 25
console.log('user', user)
// {name: 'zerone', age: 25, emails: '[email protected]'}
console.log('copyUser', copyUser)
// {name: 'zerone', age: 98, emails: '[email protected]'}

2. 전개 연산자

const user = {
	name: 'zerone',
	age: 98,
	emails: '[email protected]'
}

**const copyUser = {...user}**

console.log(copyUser === user)
// false

user.age = 25
console.log('user', user)
// {name: 'zerone', age: 25, emails: '[email protected]'}
console.log('copyUser', copyUser)
// {name: 'zerone', age: 98, emails: '[email protected]'}

깊은 복사 → (객체 내부 프로퍼티도 복사)

1. Lodash

import _ from 'lodash' // 언더바(_) 기호가 하나의 객체 데이터

const user = {
	name: 'zerone',
	age: 98,
	emails: ['[email protected]']
}

const copyUser = _.cloneDeep(user)
console.log(copyUser === user)
// false

user.age = 25
// console.log('user', user)
// console.log('copyUser', copyUser)

user.emails.push('[email protected]')

console.log('user', user)
// {name: 'zerone', age: 25, emails: Array(2)}
console.log('copyUser', copyUser)
// {name: 'zerone', age: 98, emails: Array(1)}

• _.clonseDeep()
  • 재귀적으로 배열이나 객체 내부의 모든 것을 복사