JS 데이터


🟨 문자 (String)

String타입은 문자 데이터를 나타낼 때 사용합니다.

속성

  • length : 문자열의 길이를 반환해줍니다. → 띄어쓰기도 하나의 문자로 취급합니다.
const str = "안녕하세요?";

console.log(str.length); // 6
console.log("안 녕 ?".length); // 5

메서드

indexof()

호출한 string 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없을 경우 -1을 반환합니다.

const str = "안녕하세요?";

console.log(str.indexOf("하세요")); // 2
console.log(str.indexOf("Hello")); // -1 일치하는 값이 x

slice()

문자열의 일부를 추출하고 새로운 문자열을 반환합니다.

  • 기본문법 slice(beginIndex, endIndex)
  • 0부터 시작해서 종료 인덱스의 바로 직전까지 추출됩니다.
const str = "안녕하세요?";

console.log(str.slice(0, 2)); // 안녕 → '하' 바로 직전까지 추출
console.log(str.slice(2, 5)); // 하세요

replace()

문자열을 교체해 새로운 문자열을 반환합니다.

  • 기본문법 : replace(subStr, newSubstr)
const str = "안녕하세요? 오늘은 목요일입니다!";

console.log(str.replace("목요일", "금요일")); // 안녕하세요? 오늘은 금요일입니다!
console.log(str.replace(" 오늘은 목요일입니다!", "")); // 안녕하세요?

match()

문자열이 정규식과 매치되는 부분을 검색합니다.

  • 기본문법 : match(regexp)
const str = "koesijuy@gmail.com";

console.log(str.match(/.+(?=@)/)[0]); // koesijuy → 정규표현식을 통해 

trim()

문자열 양 끝의 공백을 제거합니다.

const str = "     공백 제거     ";

console.log(str.trim()); // 공백 제거

🟨 숫자와 수학

parseInt(), parseFloat()

  • parseInt() : 문자열 인자를 파싱해 정수로 반환해주는 함수입니다.
  • parseFloat() : 문자열 인자를 파싱해 소수점을 포함한 실수로 반환해주는 함수입니다.

예시

const pi = 3.141592;
console.log(pi); // 3.141592

const str = pi.toFixed(2); // toFixed 인수로 소수점의 몇 번째 자리까지 유지할 것인지 명시, 반환값 string
console.log(str); // "3.14"
console.log(typeof str); // string

const integer = parseInt(str); // 정수화
const float = parseFloat(str); // 소수점 포함
console.log(integer); // 3
console.log(float); // 3.14
console.log(typeof integer, typeof float); // number number

Math

Math는 숫자 데이터를 활용해 여러가지 메서드를 사용할 수 있게 해주는 자바스크립트의 내장 객체입니다.

abs()

숫자의 절대값을 반환합니다.

min()

인수로 들어온 숫자 데이터 중 가장 작은 값을 반환합니다.

max()

인수로 들어온 숫자 데이터 중 가장 큰 값을 반환합니다.

ceil()

수학에서 올림과 같은 메서드로 정수 단위에서 올림 처리 합니다.

floor()

수학에서 내림과 같은 메서드로 정수 단위에서 내림 처리 합니다.

round()

수학에서 반올림과 같은 메서드로 정수 단위에서 반올림 처리 합니다.

random()

0과 1사이의 난수를 반환하는 메서드입니다. 실행 할 때마다 다른 난수가 반환됩니다.

예시

console.log("abs", Math.abs(-99)); // abs 99

console.log("min", Math.min(1, 2, 3, 4)); // min 1

console.log("max", Math.max(1, 10, 100)); // max 100

console.log("ceil", Math.ceil(3.14)); // ceil 4

console.log("floor", Math.floor(3.14)); // floor 3

console.log("round", Math.round(3.14)); // round 3

console.log("random", Math.random()); // random 0.6187226974916935

🟨 배열 (Array)

배열은 리스트와 비슷한 객체로 순회와 변형 작업을 수행하는 메서드를 갖습니다.
[index]를 사용하면 배열 요소에 접근할 수 있습니다.

const numbers = [1, 2, 3, 4];
const fruits = ["사과", "체리", "수박"];

console.log(numbers[0]); // 1
console.log(fruits[2]); // 수박

속성

length

배열의 길이를 반환해 줍니다. → 배열안 요소들이 몇개 있는지 알려줍니다.

const numbers = [1, 2, 3, 4];
const fruits = ["사과", "체리", "수박"];

console.log(numbers.length); // 4
console.log(fruits.length); // 3
console.log([].length); // 0

메서드

concat()

두 개의 배열 데이터를 합쳐 새로운 배열을 반환해주는 메서드입니다. 원본의 데이터는 수정되지 않습니다.

const numbers = [1, 2, 3, 4];
const fruits = ["사과", "체리", "수박"];

// concat
console.log('concat : ', numbers.concat(fruits)); // [1, 2, 3, 4, '사과', '체리', '수박']

forEach()

배열 데이터의 요소의 개수만큼 콜백 함수를 반복적으로 실행하는 메서드입니다. 매개 변수로 요소, 인덱스, 배열을 받습니다.

const fruits = ["사과", "체리", "수박"];

// forEach
fruits.forEach((fruit, i) => {
  console.log(fruit, i);
  // 사과 0
  // 체리 1
  // 수박 2
});

map()

배열 내의 모든 요소 각각에 대하여 콜백 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드입니다.

const fruits = ["사과", "체리", "수박"];

// map
const map = fruits.map((fruit, i) => `${fruit}-${i}`); // 새로운 배열로 반환
console.log(map); // ['사과-0', '체리-1', '수박-2']

filter()

배열 내의 모든 요소들에 특정한 기준으로 필터링을 하는 메서드입니다. 새로운 배열을 반환합니다.

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

// filter
const filter = numbers.filter((number) => number < 3);
console.log(filter); // [1, 2]

find(), findIndex()

  • find() : 판별 함수를 만족하는 첫 번째 값을 반환합니다.
  • findIndex() : 판별 함수를 만족하는 첫 번째 인덱스를 반환합니다.
const fruits = ["사과", "체리", "수박"];

// find
const find = fruits.find((fruit) => fruit === "수박");
console.log(find); // 수박

// findIndex
const findIndex = fruits.findIndex((fruit) => fruit === "수박");
console.log(findIndex); // 2

includes()

배열이 특정 요소를 포함하고 있는지 판별하는 메서드입니다. 불리언 값을 반환합니다.

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

// includes
const includes = numbers.includes(2);
console.log(includes); // true

💥 원본 배열 데이터가 수정되는 메서드


push(), unshift()

  • push() : 배열 가장 에 요소를 추가합니다.
  • unshift() : 배열 가장 에 요소를 추가합니다.

❗ 반대 메서드로는 pop(), shift()가 있습니다.

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

// push()
numbers.push(5);
console.log(numbers); // [1, 2, 3, 4, 5]

// unshift()
numbers.unshift(0);
console.log(numbers); // [0, 1, 2, 3, 4, 5]

reverse()

배열의 순서를 뒤집는 메서드입니다.

const numbers = [1, 2, 3, 4];
const fruits = ["사과", "체리", "수박"];

// reverse
numbers.reverse();
fruits.reverse();

console.log(numbers); // [4, 3, 2, 1]
console.log(fruits); // ['수박', '체리', '사과']

splice()

배열의 요소를 삭제, 교체, 추가하여 배열의 내용을 변경하는 메서드입니다.

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

// splice 삭제
numbers.splice(2, 1); // 제로베이스 2인 3에서 아이템 1개를 삭제
console.log(numbers); // [1, 2, 4]

// splice 교체
numbers.splice(2, 1, 999); // 제로베이스 2인 3에서 아이템 1개를 삭제한 후 999로 교체
console.log(numbers); // [1, 2, 999, 4]

// splice 추가
numbers.splice(2, 0, 123); // 제로베이스 2번째에 123 추가
console.log(numbers); //[1, 2, 123, 3, 4]

🟨 객체 (Object)

객체는 key와 value 한 쌍의 프로퍼티로 이루어진 데이터 집합입니다.

정적 메서드

프로토타입에 만들어진 메서드가 아닌 메서드를 의미합니다. 실제 데이터 자체에는 사용할 수 없고 전역 객체에 사용할 수 있습니다.

Object.assign()

대상 객체에 출처 객체의 프로퍼티를 복사해 대상 객체를 반환합니다.
이때 대상 객체와 반환된 객체는 일치합니다.

  • 기본문법 : Object.assign(target, source)
const user = {
  name: "seokji",
  age: 123,
};

const userInfo = {
  name: "seokji",
  email: "seokji@email.com",
};

const target = Object.assign(user, userInfo);
console.log(target);
console.log(user);
console.log(userInfo);

console.log(target === user); // true → 같은 메모리 주소를 바라 보고 있어서 true

const a = {
  test: 123,
};

const b = {
  test: 123,
};

console.log(a === b); // false → 모양은 같지만 바라보는 메모리 주소가 다릅니다.

Object.keys()

주어진 객체의 key 값들을 순회해 배열로 반환합니다.

const user = {
  name: "seokji",
  age: 123,
  email: "seokji@email.com",
};

const keys = Object.keys(user);
console.log(keys); // ['name', 'age', 'email'] key 값들을 추출합니다.

console.log(user["email"]); // seokji@email.com 객체 인덱싱을 통해 value 값을 추출합니다.

const values = keys.map((key) => user[key]);
console.log(values); // ['seokji', 123, 'seokji@email.com'] map을 이용해서 value 값들을 추출합니다.

🟨 구조 분해 할당 (Destructuring assignment)

함수에 객체나 배열을 전달해야 하는 경우가 많이 생기는데, 일부 데이터만 필요할 때가 있습니다.
이때 객체나 배열을 변수로 분해할 수 있게 해주는 구조 분해 할당 문법을 사용하면 효과적입니다.

❗ 리액트에서 많이 사용됩니다.

객체 구조 분해 할당

// 객체
const user = {
  name: "seokji",
  age: 123,
  email: "seokji@email.com",
};

const { name, age, email, address } = user; // 필요한 요소들만 뽑아서 사용할 수 있습니다. 객체 타입에 맞는 {}을 사용

console.log(name); // seokji
console.log(age); // 123
console.log(email); // seokji@email.com
console.log(address); // undefined
  • address 와 같이 undefined로 값이 비어있을 경우 기본값을 지정할 수 있습니다. ex) address = "Seoul"
  • 객체안에 value가 지정되어 있을 경우 기본값은 무시됩니다.
  • name이라는 변수명을 변경하고 싶을 경우 name: something을 사용하면 변수명을 변경할 수 있습니다.

중첩 객체 구조 분해 할당

const user = {
  name: "seokji",
  age: 123,
  email: "seokji@email.com",
  hobby: {
    name: "음악감상",
  },
};

const {
  hobby: { name },
} = user;

console.log(name); // 음악감상

배열 구조 분해 할당

// 배열
const fruits = ["사과", "딸기", "체리"];
const [a, b, c, d] = fruits; // 순서대로 구조 분해 하는 것이 중요합니다. 배열 타입에 맞는 []를 사용
console.log(a, b, c, d); // 사과 딸기 체리 undefined

🟨 전개 연산자 (Spread operator)

전개 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리할 수 있습니다. → 전개 연산자는 병합, 복사 등에서 활용도가 높습니다.

// 전개 연산자 기본문법

// 배열
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [...arr1, 6, 7, 8, 9, 10];
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 문자열
const str = "Hello World";
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd']

// 객체
const obj1 = {
  a: 1,
  b: 2,
};

const obj2 = { ...obj1, c: 3, d: 4 };
console.log(obj2); // {a: 1, b: 2, c: 3, d: 4}

전개 연산자는 ...을 통해 사용할 수 있습니다.

// 예제
const fruits = ["사과", "참외", "복숭아"];
console.log(fruits); // ['사과', '참외', '복숭아']
console.log(...fruits); // 사과 참외 복숭아

const toObj = (a, b, c) => ({ a, b, c });


console.log(toObj(...fruits)); // {a: '사과', b: '참외', c: '복숭아'}

나머지 매개변수 (Rest parameter)

함수의 마지막 매개변수 앞에 ...를 붙이면 모든 후속 매개변수를 배열에 넣도록 지정합니다. → 마지막 매개변수만 나머지 매개변수로 설정할 수 있습니다.

나머지 매개변수에 모든 인수들을 받아낸다고 생각하면 이해하기 쉽습니다.

const fruits = ["사과", "참외", "복숭아", "체리", "포도"];

const toObj = (a, b, ...c) => ({ a, b, c });

console.log(toObj(...fruits)); // {a: '사과', b: '참외', c: ['복숭아', '체리', '포도']}

🟨 데이터 불변성 (Data immutability)

불변성이란 변하지 않는 성질을 의미합니다.
자바스크립트의 데이터는 원시형 데이터참조형 데이터로 나뉩니다.

❗ 값의 일치를 비교할 때 단순히 모양에 따라 불리언 값이 반환되는 것이 아닌, 바라보는 메모리 주소가 같으면 true, 다르면 false 값을 반환합니다.


원시형 데이터 (Primitive Data Types)

불변 데이터(Immutable), string, number, boolean, undefined, null, symbol

❗ 원시형 데이터는 불변성을 가지고 있기 때문에 모양으로 쉽게 비교하는 것이 가능합니다.

let a = 10;
let b = 20;

console.log(a, b, a === b); // 10 20 false
b = a;
console.log(a, b, a === b); // 10 10 true
a = 7;
console.log(a, b, a === b); // 7 10 false
let c = 10; 
console.log(b, c, b === c); // 10 10 true 새로운 메모리에 데이터를 만드는 것이 아닌 기존에 존재한 메모리 주소를 바라보게 합니다.

참조형 데이터 (Reference Data Types)

가변 데이터(Mutable), object

❗ 참조형 데이터는 새로운 값이 생성될 때마다 새로운 메모리 주소에 할당됩니다.


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

console.log(a, b, a === b);
a.c = 7;
b = a; // 메모리 주소가 같아집니다.
console.log(a, b, a === b);
a.c = 10; // 서로 같은 메모리 주소를 바라보고 있어서, b의 c값도 바뀌게 됩니다.
console.log(a, b, a === b);
let c = b; // 같은 메모리 주소를 바라보게 됩니다.
console.log(a, b, c, a === c);
a.c = 5; // a, b, c 모두 같은 메모리 주소를 바라보고 있어서 같은 값이 됩니다.
console.log(a, b, c, a === c);
// 복사의 개념이 아닌 같은 메모리 주소를 바라보고 있다고 이해해야합니다.

🟨 얕은 복사와 깊은 복사

참조형 데이터가 같은 메모리 주소를 바라보고 있어, 생기는 오류를 방지하기 위해 복사를 사용합니다.

얕은 복사 (Shallow copy)

얕은 복사란 참조형 데이터의 표면적인 데이터를 복사해 새로운 메모리 주소에 할당하는 것을 의미합니다.

const user = {
  name: "seokji",
  age: 123,
  emails: ["seokji@email.com"],
};

// Object.assign() 방식
const copyUser = Object.assign({}, user); 
// 대상 객체에 출처 객체를 복사해 새롭게 담아줍니다. 
// {} 리터럴은 새로운 객체이기 때문에 새로운 메모리 주소를 바라보게 됩니다.

// 전개 연산자 방식
const copyUser = { ...user }; // 새롭게 생성된 빈 객체에 user 객체를 전개해 복사합니다.
console.log(user === copyUser); // false

user.age = 15;

console.log("user", user.age); // user 15
console.log("copyUser", copyUser.age); // copyUser 123

user.emails.push("jiseok@email.com"); // emails 배열에 요소 push

console.log(user.emails === copyUser.emails); // true → 배열 역시 참조형 데이터, 따로 emails 배열을 복사한 적이 없기 때문에 같은 메모리 주소를 바라봅니다.

깊은 복사 (Deep copy)

깊은 복사란 참조형 데이터 내부의 참조형 데이터까지 복사해 새로운 메모리에 할당하는 것을 의미합니다.
깊은 복사의 경우 자바스크립트만으로 구현하기에 어려움이 있습니다. 이따 lodash 패키지를 사용하면 쉽게 구현할 수 있습니다.

import _ from "lodash"; // lodash를 import 해옵니다.
const user = {
  name: "seokji",
  age: 123,
  emails: ["seokji@email.com"],
};

// 전개 연산자
const copyUser = _.cloneDeep(user);

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

user.emails.push("jiseok@email.com"); // emails 배열에 요소 push

console.log(user.emails === copyUser.emails); // false → 깊은 복사를 해서 배열 역시 새로운 메모리 주소에 담기게 됩니다.
console.log("user", user.emails); // ['seokji@email.com', 'jiseok@email.com']
console.log("copyUser", copyUser.emails); // ['seokji@email.com']

❗ _.cloneDeep()는 재귀적으로(하나의 데이터 안에서 반복) 실행하며 복사하는 메서드입니다.

❗ 얕은 복사와 깊은 복사의 차이
얕은 복사의 경우 참조형 데이터안의 또 다른 참조형 데이터는 복사 하지 못합니다.
반면 깊은 복사는 복사가 가능합니다.


자료출처

1개의 댓글

comment-user-thumbnail
2022년 9월 23일

챕터 하나를 통쨰로 정리해버리는 그는 도대체..!
D 강의실에 정리왕이 살고 있어요🤴

답글 달기