[Worksheet 220427] JS Data

방예서·2022년 4월 27일
JavaScriptWorksheet
0

Worksheet

목록 보기
17/47
JavaScript Level up

JS 데이터

문자

MDN-string

String 전역 객체는 문자열의 생성자이다.

  • String.prototype.indexOf()
    매개변수로 주는 데이터(찾으려는 문자열)가 String 에서 몇 번째 인덱스에 있는지 반환한다.

  • String.length()
    String의 길이를 반환한다.

  • String.slice(x, y)
    String에서 x에서부터 y 직전까지의 문자를 반환한다.

  • String.replace(str1, str2)

String에서 str1 부분을 찾아서 str2로 바꿔서 반환한다.

  • String.match()

String에서 원하는 부분을 괄호의 규칙대로 배열 데이터로 반환한다.

  • String.trim()

String에서 공백문자들을 다 제외하고 반환한다.

숫자와 수학

  • String.toFixed(x)
    소수점 x번째까지만 나타내기

  • parseInt(string)/ParseFloat(string)
    string을 Int/Float로 변환해주기

Math

MDN-math

Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다.

  • Math.abs(x)
    주어진 값의 절대값을 반환한다.

  • Math.min()/Math.max()
    최소값/최대값 반환한다.

  • Math.ceil(x)/Math.floor(x)
    x를 올림/내림 처리해서 반환한다.

  • Math.round(x)
    x를 반올림 처리해서 반환한다.

  • Math.random()
    숫자를 임의로 지정해서 반환한다. (난수)

return Math.floor(Math.random()*10);

난수에 10을 곱해서 내림 처리해서 반환한다.

배열

MDN-array

  • Array.length
    배열의 길이를 반환한다.

  • Array1.comcat(Array2)
    Array1과 Array2를 병합해서 새로운 배열을 반환한다.
    원래의 배열은 수정되지 않는다.

  • Array.forEach(function)
    주어진 함수를 배열 요소 각각에 대해 실행합니다.


const fruits = [ 'apple', 'banana', 'cherry' ];

fruits.forEach(function (item, index) {
  console.log(item, index);
});
  • Array.map(funciton)
    배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
    forEach와 비슷한 동작을 하는데, forEach는 반환 값이 없고, map 메소드는 새로운 배열을 반환한다는 것이 다르다.

const fruits = [ 'apple', 'banana', 'cherry' ];

const a = fruits.forEach(function (fruit, index) {
  console.log(item, index);
});

console.log(a); //undefined

const b = fruits.map(function (fruit, index) {
  	return {
      id: index,
      name: fruir
    }
});

//위의 함수는 화살표 함수를 사용해 아래와 같이 작성할 수 있다.

const b = fruits.map((fruit, index) => ({
	id: index,
	name: fruit
}));
  • Array.filter(function)
    주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

const numbers = [1, 2, 3, 4];

const a = number.map(number => {
  return number < 3
});

console.log(a);
//[true, true, false, false]

const b = number.filter(number => {
  return number < 3
});

console.log(b);
//[1, 2]

map은 배열의 개수만큼 그 함수를 실행해서 결과 배열의 크기는 원래 배열과 같으며, 그 결과를 반환한 새 배열이다.
filter은 말그대로 필터링해서 함수의 조건을 만족하는 데이터들로만 만든 새 배열이다. 크기는 당연히 같지 않을 수 있다.

  • Array.find(function)
    주어진 판별 함수를 만족하는 첫 번재 요소의 값을 반환한다.
    이 함수는 callback 함수이다.

  • Array.findIndex(function)
    주어진 판별 함수를 만족하는 요소의 인덱스 값을 반환한다.


const a = fruits.find(fruit => /^C/.test(fruit));
console.log(a); //Cherry

const b = fruits.findIndex(fruit => /^C/.test(fruit));
console.log(b) //2
  • Array.includes(x)
    배열이 특정 요소(x)를 포함하고 있는지 판별하고 boolean data 반환한다.

  • Array.push()/Array.unshift()
    배열에 값을 맨 뒤에/맨 앞에 추가한다.
    원본이 수정됨을 주의해야한다 !!!

  • Array.reverse()
    해당 배열을 거꾸로 뒤집어서 원본을 수정한다.

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

    • Array.splice(x, y)
      배열 인덱스 x에서부터 y개만큼 지워라.
    • Array.splice(x, 0, y)
      배열 인덱스 x 자리에 y를 추가한다.
    • Array.splice(x, y, z)
      배열 인덱스 x 뒤에 y개만큼 지우고 z를 추가한다.

객체

MDN-object

  • Object.assign(대상, 출처)
    열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용한다. 대상 객체를 반환한다.
    출처 객체의 속성들을 대상 객체에 복사한 대상 객체를 반환한다.
    대상 객체의 원본이 수정된다.

    Object.assign({}, 출처1, 출처2);
    이런 식으로 새로운 객체를 만들 수 있다.

  • Object.keys(객체)
    객체 데이터의 key만 배열로 만들어 반환한다.

const user = {
  name: 'Heropy',
  age: 85,
  email: 'aaa@naver.com'
};

const keys = Object.keys(user);

//user.email === user['email']

const values = keys.map(key => user[key])

구조 분해 할당

비구조화 할당. Destructuring assignment.

객체 데이터를 구조 분해 해서 각각 변수로 만들어 사용할 수 있다.
나중에 생길 데이터를 대비해 기본 값을 지정해놓을 수 있다.
변수 이름을 재할당 할 수도 있다.
배열 데이터에서도 사용할 수 있다. 대괄호로 감싼다.


const userAge = {
  name: 'Heropy',
  age: 85,
  email: 'aaa@naver.com'
};

const { name: username, age, email, address='korea' } = user;
//  const username = name;

const fruits = [ 'apple', 'banana', 'cherry' ];
const [a, b, c, d] = fruits //위의 순서대로
const [a, , c] = red //원하는 값만 지정할 수도 있다.

console.log(d); //undefined

전개 연산자

Spread 마침표 세 개 (...)


const fruits = [ 'apple', 'banana', 'cherry', 'kiwi' ];
console.log(...fruits);
//apple banana cherry

//a, b를 제외한 나머지가 c에 배열로 모두 들어간다.
function toObject(a, b, ...c) {
  return {
    a:a,
    b:b,
    c:c
  }
}

//toObject(a, b, c)의 축약형
const toObject = (a, b, ...c) => ({a, b, c})

//console.log(toObject(fruits[0],fruits[1], fruits[2]));
//이렇게 쓸 필요 없이 전개 연산자를 사용하면 된다.
console.log(toObject(...fruits));

불변성

데이터 불변성(immutability)

  • 원시 데이터
    string, number, boolean, undefined, null ...

  • 참조형 데이터
    Object, Array, Function


let a=1;
let b=4;

console.log(a === b); //false
//단지 숫자가 달라서가 아니라 a와 b가 가지고 있는 메모리 주소가 달라서 false

b=a;
console.log(a === b); //true
//a의 메모리 주소를 b에게 할당한 것이기 때문에 true

a=7;
console.log(a === b); //false
//a가 새로운 메모리 주소를 가졌기 때문에 false

let c=1;
console.log(c === b); //true
//기존에 메모리에 있던 1이 있기 때문에 그 메모리 주소를 가지게 되고 그래서 true

* 원시 데이터는 같은 값을 가지게 되면 메모리 주소에 원래 그 값이 있다면 그 주소를 가르키게 된다. (데이터 불변성)


let a = {k:1};
let b = {k:1};

console.log(a === b); //false
//같은 값을 가져도 참조 데이터는 새로운 메모리 주소를 가진다.
//메모리 주소가 달라서 false

a.k = 7;
b = a;
console.log(a === b); //true
//b=a로 메모리 주소를 같이 가지게 되었다. 그래서 true

a.k=2;
console.log(a === b); //true
//위에서 이미 서로 같은 메모리 주소를 가지고 있기 때문에 
//b의 값도 b.k=2로 바뀌게 되며 true
//a의 k만 바꾸고 싶었는데 b의 k까지도 바뀌게 되는 문제가 생긴다.

* 참조 데이터는 데이터가 불변하는 개념이 아니다. 그래서 같은 값을 가지더라도 같지 않고, 한번 할당하면 계속 같은 메모리 주소를 같이 가지고 있기 때문에 문제가 생긴다.

-> 그래서 할당이 아닌 얕은/깊은 복사를 사용해야한다.

얕은 복사와 깊은 복사

shallow/deep copy


const user = {
  name: 'Heropy',
  age: 85,
  email: 'aaa@naver.com'
};

const copyUser = user; //같은 메모리 주소 가지게 된다.
console.log(copyUser === user); //true

user.age = 22;
//user의 나이만 바꾸고 싶었지만 copyUser의 나이도 같이 바뀌게 된다.

const user = {
  name: 'Heropy',
  age: 85,
  email: 'aaa@naver.com'
};

const copyUser = Object.assign({}, user);
//{}는 객체 데이터로 user의 값을 복사해오는데, 새 메모리 주소를 가져온다.
//This is 얕은 복사.
console.log(copyUser === user); //false

const copyUser2 = {...user};
//얕은 복사
//얕은 복사는 어떤 문제가 생긴다.

user.emails.push('new@gmail.com');
console.log(user.email === copyUser2.email); //true
//분명 위에서 복사했는데 왜 email 값이 같아졌을까?
//email은 따로 복사한 적이 없기 때문에 email은 같은 메모리를 가지게 된다.
//그럼 깊은 복사는 어떻게 하는데?

import _ from 'lodash'

const user = {
  name: 'Heropy',
  age: 85,
  email: 'aaa@naver.com'
};

const copyUser = _.cloneDeep(user);
//그냥 js로는 깊은 복사 구현이 복잡하다.
//lodash의 도움을 받아 깊은 복사를 한다.
console.log(copyUser === user); //false

user.emails.push('new@gmail.com');
console.log(user.email === copyUser.email); //false
profile
방예서
console.log('bang log');
이전 포스트

[Worksheet 220426] JS 클래스

다음 포스트

[Worksheet 220428] JS Data 실습

0개의 댓글