JS Level Up(1) - 데이터

특정 기호를 통해 데이터를 손쉽게 만드는 방식은 리터럴 방식입니다.

예를 들면, " ", ' ', { }, [ ] 등 기호들이 있습니다.

 

문자

String 명령어 참조

 

자주 사용된 메소드

메소드	의미
string.length	해당 문자열의 길이
string.indexOf('a')	a라는 문자가 몇 번째인지
string.slice(0, 3)	문자열의 0~3번째 문자 출력
string.replace('a', 'b')	문자열 중 a를 b로 교체
string.match(/.+(?=@)/)[0]	@기호 앞 부분을 출력
string.trim()	한 문자열 앞뒤의 모든 공백을 제거

string.match 같은 경우, 안에는 정규식 표현입니다.

추후 설명하겠습니다.

 

숫자와 수학

const integer = parseInt(str);    integer은 정수입니다. 여기서는 string을 integer로 변경하는 겁니다.

const float = parseFloat(str);   float는 소수점이 있는 소수입니다. 여기서는 string을 float로 변경하는 겁니다.

숫자관련 명령어 참조

 

자주 사용된 메소드

메소드	의미
Math.abs(-12)	-12의 절대값
Math.min(2, 8)	2와 8 중 작은 값
Math.max(2, 8)	2와 8 중 큰 값
Math.ceil(3.14)	정수 단위로 올림처리(결과: 4)
Math.floor(3.14)	정수 단위로 내림처리(결과: 3)
Math.round(3.14)	반올림(3.5보다 작으니까 결과는 3)
Math.random()	0~1 사이 랜덤숫자

 

배열

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

numbers[1] 여기서 1는 index라고 합니다. index는 zero base입니다. 즉 0부터 시작하고요.

배열에 특정한 값을 찾을려고 위에 numbers[1]처럼, 이게 indexing라고 합니다.

배열 내부 각각의 데이터들은 element(요소)입니다.

배열 명령어 참조

 

자주 사용된 메소드

메소드	의미
array.length	배열에 총 몇 개의 요소 있는지
array1.concat(array2)	array2를 array1후에 추가해서 새로운 array를 생성 (원본 array 수정 안 됨)
array.forEach()	array의 요소들을 순서대로 반복 이벤트 발생
array.map()	새로운 array을 반환
array.filter()	조건에 부합하는 요소들을 반환
array.find()	특정 요소를 찾음
array.findIndex()	특정 요소의 index를 반환
array.includes()	특정 요소를 포함되어 있는지 반환
array.push()	배열에 가장 뒤에 요소를 추가(원본 수정됨)
array.unshift()	배열에 가장 앞에 요소를 추가(원본 수정됨)
array.reverse()	배열을 뒤집어 줌(원본 수정됨)
array.splice(index, 몇 개 item)	배열의 index번부터 item을 지워줌(원본 수정됨)
array.splice(index, 몇 개 item, 값)	해당 index번부터 item을 지워주고 값을 넣어줌(원본 수정됨)

const fruits = ['apple', 'banana', 'cherry']라는 배열이 있다고 가정합시다.

fruits.forEach(function (fruit, index){ } )

fruits.forEach(function (element, index){ } )

fruits.forEach(function (item, index){ } )

fruits.forEach(function (element, i){ } )

위에 4개의 표시 모두 정상적으로 실행할 수 있습니다.

 

const b = fruits.map(function (fruit, index){ return `${fruit}-${index}` } )

위에 결과는 ['apple-0', 'banana-1', 'cherry-2'] 이란 새로운 array을 반환해줍니다.

 

const numbers = [1, 2, 3, 4]라는 배열이 있다고 가정합니다.

const a = numbers.filter(number => {return number < 3})는 [1, 2]를 반환합니다.

 

 

객체

객체 명령어 참조

 

 

자주 사용된 메소드

메소드	의미
Object.assign(userAge, userEmail)	두 객체의 같은 값이 존재 시, 한 묶음으로 처리
Object.keys(user)	key들만 추출

Object.assign({ }, userAge), 이와 같이 userAge객체를 새로운 비어 있는 객체 안에다 넣어주는 겁니다.

결국엔 새로운 객체과 userAge는 key와 value는 보기에는 같습니다만,

=== 일치 연산자를 사용해서 확인한 결과, false입니다.

이게 메모리 주소가 달라서 그렇습니다.

 

또한 assign 메소드에 앞에 목표 객체고, 뒤에 출처 객체입니다.

출처 객체는 여러개일 수 있으며 , 콤마로 구분합니다.

 

구조 분해 할당(Destructuring assignment)

비구조화 할당이라고도 불립니다.

흔이 보는 할당 방법과 다릅니다.

객체 요소들을 분해를 해서 각각 불러 오는 겁니다.

user.name 혹은 user['name'] 과 같습니다.

 

전개 연산자(Spread)

객체 앞에 ... 을 붙이고 객체 내 모든 요소들을 String형으로 나열합니다.

apple를 a에 넣고, banana는 b에 넣고, 나머지는 c에 넣습니다.

... 는 rest parameter로 봅니다.

 

속성과 매개변수가 같으면 축약형으로 줄일 수 있습니다.

(오른쪽 참조)

 

불변성(Immutability)

원시 데이터: String, Number, Boolean, undefined, null

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

참조형 데이터 같은 경우 메모리에 각자의 위치 있습니다.

설령 내용이 같다고 해도 절대 똑같지 않습니다.

 

일치성 확인할 때, 원시 데이터는 내용만 확인하면 되지만,

참조형 데이터는 내용 및 메모리 위치 같이 확인해야 됩니다.

 

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

위에 데이터 불변성을 살펴봤는데,

참조형 데이터는 내용과 메모리 위치를 모두 고려해야 되는 점을 알고 있습니다.

 

참조형 데이터 안에 다른 참조형 데이터가 없을 시 shallow copy 통해 손쉽게 복사할 수 있습니다.

만약 안에 또 다른 참조형 데이터가 있으면 deep copy를 해야 됩니다.

 

얕은 복사는 copyUser1, copyUser2 두 가지 방법이 있습니다.

깊은 복사는 lodash 라이브러리를 사용해서 copyUser3처럼 만들었습니다.