JS 데이터

---

목차

1. 문자
2. 숫자와 수학
3. 배열
4. 객체
5. 구조 분해 할당
6. 전개 연산자
7. 불변성
8. 얕은 복사와 깊은 복사

문자 (string)

String 전역 객체는, 문자열(문자의 나열)의 생성자이다.

종류

---

String.length

문자열의 길이 반환

String.indexOf()

indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환함.
일치하는 값이 없으면 '-1'을 반환함.

사용법

const result = 'Hello world!'.indexOf('world')
console.log(result)

하면 콘솔에 '6'이 출력 됨.

String.slice()

slice() 메서드는 문자열의 일부를 추출하면서 새로운 문자열을 반환함.

문법

str.slice(beginIndex, end Index)

사용법

const str = 'Hello world!'
console.log(str.slice(6,11))

하면 콘솔에 'world'가 출력 됨.

String.replace()

replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환함.

사용법

const str = 'Hello world!'
console.log(str.replace(' world!','GGYU!'))

하면 콘솔에 'Hello GGYU!'가 출력 됨.

String.match()

match() 메서드는 문자열이 정규식과 매치되는 부분을 검색함

사용법

const str = 'rbwns0918@gmail.com'
console.log(str.match(str.match(/.+(?=@)/)[0])

하면 콘솔에 'rbwns0918'가 출력 됨.

💡 특정 문자열을 배열 데이터로 반환한뒤, 원하는 문자열만 추출해서 사용할 수 있음!

String.trim()

trim 메서드는 문자열 양 끝의 공백을 제거함

사용법

const str = '   Hello World!  '
console.log(str.trim())

하면 콘솔에 'Hello World!'가 출력 됨.

✅ String.split()

split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눈후, 배열로 반환함.

사용법

const str = 'The quick brown fox jumps over the lazy dog.';
const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"
const chars = str.split('');
console.log(chars[8]);
// expected output: "k"
const strCopy = str.split();
console.log(strCopy);
// expected output: Array ["The quick brown fox jumps over the lazy dog."]

💡 추가 꿀팁 : mdn 문서 보는법

🗑️ -> 잘 안쓰임
🧪 -> 실험적임 (역시 잘 안쓰임)

결론 : 이 두개가 붙은 문서들 빼고 보면 됨!

숫자

toFixed(n)
-> 소수점 n번째 자리 이후로 제거

parseInt(str)
-> str에서 Int 값만 추출해서 number로 변환

parseFloat(str)
-> str에서 Float 값만 추출해서 number로 변환

수학 객체 Math

Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체.
(Not 함수 객체!)

Math.abs()

Math.abs() 함수는 주어진 숫자의 절대값을 반환함.

Math.min(a) , Math.max(b)

각각 a와 b중에 작은값과 큰값을 반환함.

Math.ceil(), Math.floor()

각각 소수점을 올림, 내림한값을 반환함.

Math.round()

소수점을 반올림한 값을 반환함.

Math.random()

0~1 사이의 값을 랜덤으로 반환함.

배열 (Array)

JavaScript 의 Array 클래스는,
리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체이다.

• Index : 배열 데이터 내부의 특정한 데이터의 위치를 가리키는 숫자
• Indexing : Index에 숫자를 넣어서 조회하는 것
• element(item) : 배열 데이터 내부에 들어있는 각각의 데이터들

Array.find()

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환함.
그런 요소가 없다면 undefined를 반환함.

Array.length()

Array 인스턴스의 length() 속성은 배열의 길이를 반환함

💡 [].length 의 형식으로 배열 데이터가 비어있는지 확인 가능함!

Array.concat()

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환함
(이때 원본 데이터는 수정되지 않음)

Array.forEach()

forEach() 메서드는 주어진 특정 함수를 배열 요소 각각에 대해 실행함
(return 값이 없음!)

인수로 콜백을 사용하는 예시

💡 callback에 사용되는 매개변수들
1. 반복되는 각각의 배열의 item
2. 반복되는 횟수 index
3. 원본의 배열 데이터 array
(변수 이름은 바꿀수 있음)

📌 Array.map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여,
주어진 함수를 호출한 결과를 모아 새로운 배열을 반환함
(return 값이 존재!)

새로운 객체 데이터에게 반환하는 방식이 많이 쓰임!

화살표 함수에서 실행문이 하나만 반환되고 있을때,
return,{} 키워드는 생략 가능하므로,

이렇게도 쓰일 수 있음~~!

Array.filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환함
즉, return 값이 true인 경우에만 새로운 배열로 return 함

좀전의 예제와 마찬가지로 화살표 함수를 간략화 할 수 있음!

Array.find(), .findIndex()

1️⃣ find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환함.
그런 요소가 없다면 undefined를 반환함.

설명

정규 표현식 /^B/를 사용해서, B로 시작하는 맨처음 단어만 반환함. (선착순)

2️⃣ .findIndex 메서드는 그렇게 찾아진 값의 인덱스를 반환함.

마찬가지로 간략화 가능!

Array.includes()

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별함
(boolean data로 반환됨)

Array.push(), .unshift()

(❗️ 원본 수정됨 주의!)

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고,
배열의 새로운 길이를 반환함

unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환함.

Array.reverse()

(❗️ 원본 수정됨 주의!)

reverse() 메서드는 배열의 순서를 반전해서 저장함.
첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됨. 🍀

Array.splice()

(❗️ 원본 수정됨 주의!)

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나,
새 요소를 추가하여 배열의 내용을 변경함

쓰이는 방식) 각각의 위치마다 의미하는 것

객체 (Object)

Object 클래스는 JavaScript의 데이터 유형 중 하나를 나타내며,
다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용됨.
객체는 Object() 생성자 또는 객체 초기자 / 리터럴 구문를 통해 생성 가능함.

💡 mdn 문서의 .prototype이 붙지 않은 메서드는 리터럴 방식으로 사용할 수 없음.
-> 일반 객체에 . 붙여서 사용이 불가능하다는 소리임!

➡️ 이를 정적 (static) 메서드라고 부름!

Object.assign()

Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해,
대상 객체에 붙여넣은 후, 대상 객체를 반환.
(중복되는 데이터가 있으면 덮어씌워짐)

Object.assign(대상 객체, 출처객체) 라고 볼 수 있음.

예제)

똑같이 true 값이 나와야 할 것 같지만, 밑에는 false가 나오는 이유
-> 서로 참조하고 있는 메모리가 달라서.

두 객체를 합쳐서 새로운 객체를 만드는 방법

📌 Object.keys()

Object.keys() 메소드는 주어진 객체의 속성 이름들을,
일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환함.

💡 user.email 대신에 user['email'] 로 표현할 수 있음!

이부분 복습하기,,,,!

구조 분해 할당 (Destrucuring assignment)

= 비구조화 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여,
그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

객체 데이터를 그냥 가져와서 쓸수도 있지만,
name: heropy 로 닉네임을 붙여 줄 수도 있고,
address = 'Korea'처럼 특정 값을 넣어줄 수도 있다.

배열 데이터는 객체 데이터처럼 이름이 아니라, 순서대로 추출을 해야 한다.

이런 식으로 원하는 값만 출력하려면, , 로 생략해주면 된다.

📌 전개 연산자 (Spread)

전개 연산자(전개 구문)를 사용하면 배열이나 문자열과 같이,
반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여,
0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

📌 데이터 불변성 (Immutability)

원시형 데이터 : 값이 같으면, 메모리가 가리키는 곳이 같음
참조형 데이터 : 값은 같아도, 메모리가 가리키는 곳은 틀릴 수도 있음

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

❗️ 유의사항
같은 메모리를 가리키고 있으면, 하나의 값을 바꾸면 다른 하나의 값도 수정됨!

코드 5번째 줄에 b = a 를 함으로써 b와 a가 같은 메모리를 참조하고 있음.
근데 7번 줄에서 a.k = 2로 a의 값을 바꾸면서, b의 값도 같이 2로 바뀌게 됨!
(여기에서 = 는 할당 연산자.)

참고

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

깊은 복사

lodash를 사용
_.cloneDeep()

오늘의 회고

4시간 잤더니 진짜 너무 졸렸다! 그래서 마지막에 집중이 거의 안됐다 😂

사실 원래 일찍일어나도, 낮잠을 어느정도 자면 괜찮은데
하필 버스에서 김하온 고등래퍼 모아보기를 봐버리는 바람에 못잤다..

명상의 중요성을 다시한번 깨달으면서, 앞으로는 낮잠을 꼭 자야겠다!