Today Topic : Javascript 3.데이터타입, 배열

🗝 Keywords

✅ 데이터타입

✅ 배열

---

1. 데이터타입

1-1) Wrapper(래퍼 객체)

let number = 123
console.log(number); // 
console.log(number.toString()); //number 원시 타입을 감싸고 있는 Number객체로 감싸짐
console.log(number); // 다시 number 원시타입으로 돌아옴

🚀 래퍼 객체

• 래퍼 객체는 원시타입인 데이터 타입에 .을 찍으면 해당 데이터 타입을 감싸고 있는 객체로 잠시 넘어간 상태로 존재함. 래퍼 객체로 이동하게 되면 여러가지 빌트인 객체를 사용할 수 있음
• 예를 들어 number 원시타입에 .을 찍으면 문자열로 변환해주는 toString()을 사용하면 변할 수 있음.
• '.'을 찍을 때만 변할 수 있게 만든 이유는 모든 원시타입에 객체를 계속 넣게 되면 메모리 용량이 커지기 때문에, 필요할 때만 사용할 수 있게끔 만든 것.

1-2) Boolean

const isTrue = true;
console.log(isTrue.valueOf());

🚀boolean

• .valueOf()는 해당 데이터의 true or false 여부를 알려줌.

1-3) Number

const num1 = 123;
const num2 = new Number(123); // 오브젝트로 숫자 생성

const num3 = 102;
console.log(num3.toExponential()); // 1.02로 출력

const num4 = 1234.12
console.log(num3.toFixed()); // 반올림해서 문자열 변환

const num4.toString(); // 숫자를 그냥 문자열로 변환

🚀 Number.

• number type은 new Number(123)로 오브젝트로 생성할 수도 있고, 반올림이나 문자열로 변환하는 것이 가능함.

1-4) Math

console.log(Math.abs(-10)); // 절대값
console.log(Math.ceil(1.4)); // 소수점 이하를 올림
console.log(Math.floor(1.4)); // 소수점 이하를 내림
console.log(Math.round(1.4)); // 소수점 이하 반올림
console.log(Math.trunc(1.4));//정수만 반환

// 최대, 최소값 찾기

console.log(Math.max(1,3,4));
console.log(Math.min(1,3,4));

//거듭제곱
console.log(3 ** 2);
console.log(Math.pow(3,2));

//제곱근
console.log(Math.sqrt(9));

//랜덤한 값을 반환
console.log(Math.random());

//1~10까지 랜덤한 숫자 호출
console.log(Math.floor(Math.random()* 10 +1));

🚀 Math

• 소수점 이하를 올림
• 소수점 이하를 내림
• 소수점 이하를 반올림
• 정수만 반환
• 최대, 최소값 찾기
• 거듭제곱
• 제곱근
• 랜덤수 뽑기
• 1~10까지 뽑기

1-5) String

console.log(text.toUpperCase()); // 대문자 반환
console.log(text.toLowerCase()); // 소문자 반환

console.log(text.substring(0,2)); // 0~2까지 반환
console.log(text.slice(2));//2번째 이후로 잘라냄
console.log(text.slice(-2));//끝에서 2번째 이후로 잘라냄

console.log(text.trim()); // 문자 공백을 없애줌. 띄어쓰기 제외
console.log(text.split(',')); // ,를 기준으로 잘라서 배열로 전환
console.log(text.split(',',1)); // ,를 기준으로 자른 것 중에 하나만 출력

🚀 string

• 문자열 하나씩 출력하기 문자열[num] or 문자열.charAt(num)로 가능함
• 문자열.indexOf(t) : t가 있는 가장 가까운 위치
• 문자열.lastIndexOf(t): t가 있는 가장 먼 위치
• 문자열.includes(t) : t가 문자열에 포함되어있는지(대소문자 구분함)
• 문자열.startsWith('t') : t로 문자열이 시작하는지
• 문자열.endsWith('t') : t로 문자열이 끝나는지
• 문자열.toUpperCase()

---

2. 배열

2-1) 배열 생성방법

let array = new Array(2); // 객체로 생성하기
array = new Array(1,2,3); // 객체로 생성하기
array = Array.of(1,2,3,4,5); //함수를 이용하기 

const anotherArray = [1,2,3,4]; // 배열 리터럴을 이용해서 만드는 법
array = Array.from(anotherArray); //배열 불러오기
array = Array.from('text'); //입력 값을 배열로 만들기 [t,e,x,t]
array = Array.from({
    0: '안',
    1: '녕',
    length : 2,
});
console.log(array);

🚀 배열

• 일반적으로 배열은 동일한 메모리 크기를 가지며, 연속적으로 이어져 있어야함
• 하지만 자바스크립트에서는 배열이 연속적이지 않음
• 오브젝트와 유사함!
• 자바스크립트의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체다!
• 이걸 보완하기 위해서 타입이 정해져 있는 타입 배열이 있음. (typed collections)

2-2) 배열 아이템 창조방법

const fruits = ['🍌','🍎','🍇','🍉'];

// 배열 아이템을 창조하는 방법
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[3]);
console.log(fruits.length);

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// const fruits = ['🍌','🍎','🍇','🍉'];
// 추가 및 삭제 - 좋지 않은 방식
fruits[4] = '🍓';
fruits[7] = '🍓'; // 이렇게 하면 배열에 공백이 생기게 됨
fruits[fruits.length] = '🍓' //이렇게 하면 자동으로 가장 마지막 배열에 들어가게 됨
console.log(fruits);

delete fruits[1]; // 삭제된 자리는 비어있는 자리가 됨..
console.log(fruits);

2-3) 배열내 함수

const fruits = ['🍌','🍎','🍇'];

// 특정한 오브젝트가 배열인지 체크
console.log(Array.isArray(fruits));
console.log(Array.isArray({}));

//특정한 아이템의 위치를 찾을 때
console.log(fruits.indexOf('🍎'));

// 배열안에 특정한 아이템이 있는지 체크
console.log(fruits.includes('🍎'));

//추가 - 제일 뒤
let length = fruits.push('🥝'); // 배열자체를 수정
console.log(fruits);
console.log(length);//리턴값은 길이이다.

//추가 - 제일 앞
length = fruits.unshift('🍋');
console.log(fruits);
console.log(length);

//제거 - 제일 뒤
let lastItem = fruits.pop();
console.log(fruits);
console.log(lastItem);

//제거 - 제일 앞
lastItem = fruits.shift();
console.log(fruits);
console.log(lastItem);

//중간에 추가 또는 삭제
const deleted = fruits.splice(1, 1); // (해당 숫자부터, 해당 숫자개수만큼 삭제, 추가하고 싶은 것)
console.log(fruits); // 배열자체 수정
console.log(deleted); // 삭제된 사과 출력
fruits.splice(1, 0, '🍐','🍍');//배열 추가하기
console.log(fruits);

//잘라진 새로운 배열을 만듬

let newArr = fruits.slice(0,2);
console.log(newArr);
console.log(fruits);
newArr = fruits.slice(); //아무것도 입력안하면 전체 잘라냄
console.log(newArr);
newArr = fruits.slice(-1); // -1부터 슬라이스하면 제일 마지막에 있는 것 잘라냄
console.log(newArr);

// 여러개의 배열을 붙여줌
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr1);
console.log(arr2);
console.log(arr3);

//순서를 거꾸로
const arr4 = arr3.reverse();
console.log(arr4);

//중첩 배열을 하나의 배열로 쫙 펴기
let arr = [
    [1,2,3],
    [4,[5,6]],
];

console.log(arr);
console.log(arr.flat(1)); //1단계까지만 플랫을 해줌.
console.log(arr.flat(2)); //2단계까지 플랫을 해줌.

//특정한 값으로 배열을 채우기
arr.fill(0);
console.log(arr);

arr.fill('s',1,3);
console.log(arr);

// 배열을 문자열로 합하기
let text = arr.join();
console.log(text);
text = arr.join(' | ');
console.log(text);

🚀 배열 및 아이템 유무 확인

• 배열 자체를 변경하는지,새로운 배열을 반환하는지 check!!해당 함수가 인자를 전달안하는지, 하는지 한다면 어떤식으로 하는지 체크가 필요함
• .isArray()
• .indexOf()
• .includes()

🚀 추가 및 제거

• .push()
• .unshift()
• .pop()
• .shift()
• .splice