📒 Javascript 데이터 #01 :)

• String: "", '', ``
• Number
• Boolean: true, false
• undefined
• null
• Array: []
• Object: {}

1. 문자(String)

• String 전역 객체는 문자열(문자의 나열)의 생성자이다.
• 문자열은 String 전역 객체를 직접 사용하여 생성할 수 있다.

🔵 String 생성자 함수

• 인수로 전달받은 문자열을 할당한 String 래퍼객체는 배열과 마찬가지로 length 프로퍼티와 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로, 각 문자를 프로퍼티 값으로 갖는 유사배열 객체이면서 이터러블이다.
• 배열과 유사하게 인덱스를 사용하여 각 문자에 접근 가능함.
• String의 prototype메서드는 모두 원본문자열을 수정하지 않고 반환함!!

🔵 String.prototype.indexOf()

• indexOf() 메서드는 호출한 String객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다.
• 일치텍스트하는 값이 없으면 -1을 반환한다.
• 찾으려는 문자열인수에 아무 값도 주어지지 않으면 문자열 "undefined"를 찾으려는 문자열로 사용한다.

👾 #1

const str = "Hello wold"

console.log(str.indexOf('zooyaho') !== -1) // false

👾 #2

const str = "Hello wold"

console.log(str.indexOf()) // -1

🔵 String.prototype.subString()

• subString(시작할 인덱스 숫자, 마지막 인덱스 숫자)
• 대상 문자열에서 첫 번째 인수로 전달받은 인덱스에 위차하는 문자부터 두 번째 인수로 전달받은 인덱스에 위치하는 문자의 바로 이전까지의 부분 문자열을 반환
• 두번째 인수 생략 가능, 마지막 문자까지 반환

🔵 String.prototype.slice()

• subString()과 동일하게 동작.
• 음수인 메서드를 전달할 수 있고, 음수인 인수는 대상 문자열의 가장 뒤에서부터 시작하여 문자열을 잘라내어 반환

👾 #1

const str = "Hello World"
console.log(str.slice(0,3)) // Hel

🔵 String.prototype.search()

• 인수로 전달받은 정규표현식과 문자열이 매치하는 문자열을 검색하여 일치하는 문자열의 인덱스를 반환
• 검색에 실패하면 -1 반환

🔵 String.prototype.includes()

• 인수로 전달받은 문자열이 포함되어 있는지 확인하여 결과를 불린으로 반환
• 두번째 인수로 검색을 시작할 인덱스를 전달

🔵 String.prototype.startsWith()

• 대상 문자열이 인수로 전달받은 문자열로 시작하는지 검사, 불린으로 반환
• 두번째 인수로 검색을 시작할 인덱스를 전달

🔵 String.prototype.endsWith()

• 대상 문자열이 인수로 전달받은 문자열로 끝나는지 검사, 불린으로 반환
• 두번째 인수로 검색할 문자열의 길이를 전달

🔵 String.prototype.charAt()

대상 문자열에서 인수로 전달받은 인덱스에 위치한 문자를 검색하여 반환

• 인덱스가 문자열의 범위를 벗어난 정수인 경우 빈 문자열을 반환

🔵 String.prototype.replace()

replace('바뀔 단어', '바꿀 단어')

👾 #1

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

👾 #2

👉🏻 단어 제거 시 유용 -> 빈문자 이용

str.replace(' world!', '') // Hello

🔵 String.prototype.match()

정규표현식 사용하여 특정 문자를 배열데이터로 반환함.

👾 #1

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

🔵 String.prototype.trim()

문자 처음과 끝의 공백문자를 제거해줌.

👾 #1

const str = ' Hello world '
console.log(str.trim()) // Hello world

🔵 String.prototype.split()

• String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눔.
• 인수를 생략하면 문자열 전체를 단일 요소로 하는 배열을 반환
• 두번째 인수로 배열의 길이를 지정할 수 있음(옵션)

👾 #1

const myName = "my name is zooyaho";
console.log(myName.split(' '));
// ["my","name","is","zooyaho"]

👾 #2 인수로 전달받은 문자열을 역순으로 뒤집는다.

function reverseString(str) {
  return str.split('').reverse().join('');
}

console.log(reverseString('Hello Wold!')); 
// '!dloW olleH'

🔵 String.prototype.repeat()

• 인수로 전달받은 정수만큼 반복해 연결한 새로운 문자열을 반환함.
• 인수가 0이면 빈 문자열을 반환!, 음수이면 RangeError를 발생, 생략하면 기본값 0

🔵 String.prototype.replace()

• replace(교체당할 문자열, 교체할 문자열)
• 첫번째 인수로 정규표현식과 문자열을 지정할수 있음.
• 두번째 인수로 교체됨.

🔵 String.prototype.padStart()

padStart(문자의 개수, 채워질 문자)

• padEnd() : 뒤에서부터 부족한 부분이 채워짐.
• padStart() : 앞에서부터 부족한 부분이 채워짐.

👾#01-시간을 두자리 수로 출력하는 예제

const date = new Date();
date.getHours(); // 1
typeof date.getHours(); // 'number'
String(date.getHours()); // '1'
String(date.getHours()).padStart(2,0); // '01'
String(date.getHours()).padStart(2,"0"); // '01'
String(date.getHours()).padStart(4,"0"); // '0001'
String(date.getHours()).padEnd(4,"0"); // '1000'

2-1. 숫자(Number)

🔵 Number.isInteger()

• 인수로 전달된 숫자값이 정수인지 검사하여 그 결과를 불리언 값으로 반환
• 인수를 암묵적 타입 변환하지 않음.

Number.isInteger(0) // true
Number.isInteger('12') // false
Number.isInteger(Infinity) // false

🔵 Number.isNaN()

• 인수로 전달된 숫자값이 NaN인지 검사하여 그 결과를 불리언 값으로 반환
• 인수를 암묵적 타입 변환하지 않음.

Number.isNaN(NaN) // true
Number.isNaN(undefined) // false

// 암묵적 타입 변환으로 undefined이 NaN이 됨.
isNaN(undefined) // true

🔵 Number.prototype.toFixed()

• toFixed() 메서드는 숫자를 고정 소수점 표기법(fixed-point notation)으로 표시함.
• 값을 지정하지 않으면 0을 사용함.
• 고정 소수점 표기법을 사용하여 나타낸 수를 문자열로 반환함.

const pi = 3.1415926535

console.log(pi.toFixed(2)) // '3.14'

🔵 Number.prototype.toString()

• 숫자를 문자열로 변환하여 반환한다.
• 진법을 나타내는 2~36 사이의 정수값으로 인수로 전달할 수 있다.
• 인수를 생략하면 기본값 10진법이 지정된다.

(10).toString() // '10'
(16).toString(2) // '10000'

🔵 Number.parseInt()

• Number.parseInt() 메서드는 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.

const pi = 3.1415926535
const str = pi.toFixed(2) // '3.14'

console.log(parseInt(str)) // 3

2-2. Math

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

• Math.abs(n): n의 절대값 반환(absolute)
• Math.min(n,n): n값중 작은 값 반환
• Math.max(n,n): n값중 큰 값 반환
• Math.ceil(n): 올림 값 반환
• Math.floor(n): 내림 값 반환
• Math.round(n): 반올림 값 반환
• Math.random(): 0~1 사이에 랜덤 값 반환(난수)

🔵 Math.min(), Math.max()

배열을 인수로 전달받아 배열의 요소 중에서 최대값, 최소값을 구하려면 Function.prototype.apply()메서드 또는 스프레드 문법을 사용해야 한다.

Math.max.apply(null, [1,3,5]); // 5
Math.max(...[2,7,1]); // 7

3. 배열(Array)

배열의 값들을 "element = 요소 = item"라 칭함

🔵 Array.isArray()

• 인자가 Array인지 판별함. true,false 반환
• typeOf로 판별하면 object가 반환되기 때문에 정확하게 알 수 없음.

const fruits = ['Banana', 'Apple', 'Cherry'];
console.log(Array.isArray(fruits)); // true

🔵 Array.prototype.concat()

두개의 배열데이터를 병합하여 새로운 배열데이터를 봔환 , 원본의 데이터는 손상되지 않음.

👾 #1

const numbers = [5, 6, 12]
const fruits = ['Apple', 'Banana', 'Cherry']

console.log(numbers.concat(fruits));
// [5, 6, 12, 'Apple', 'Banana', 'Cherry']

🔵 Array.prototype.sort()

• 배열의 요소를 정렬, 원본배열을 직접 변경하며 정렬된 배열을 반환
• 기본적으로 오름차순으로 요소를 정렬함.
• sort()는 유니코드 코드포인트의 순서를 따르기 때문에 숫자 요소로 이루어진 배열을 정렬할 때는 주의가 필요함.

👾 #1

const fruits = ['Banana', 'Apple', 'Cherry'];
fruits.sort(); // 오름차순 정렬
console.log(fruits) // ['Apple', 'Banana', 'Cherry']

👾 #2 숫자 요소로 이루어진 배열

const points = [40, 100, 23, 4, 21]; 

// 오름차순
points.sort((a,b)=> a - b);
console.log(points); // [4,21,23,40,100]

// 내림차순
points.sort((a,b)=> b - a);
console.log(points); // [100,40,23,21,4]

👾 #3 객체로 이루어진 배열

const todos = [
  { id: 3, content: 'JS'},
  { id: 1, content: 'HTML'},
  { id: 5, content: 'CSS'}
];

// 비교함수, 매개변수 key는 프로퍼티 키이다.
function compare(key){
  return (a,b) => ( a[key] > b[key] ? 1 : -1 );
}
// id를 기준으로 오름차순 정렬
todos.sort(compare('id'));
console.log(todos); // [{id:1..}, {id:3..}, {id:5..}]

// content를 기준으로 오름차순 정렬
todos.sort(compare('content'));
console.log(todos);

🔵 Array.prototype.forEach()

• forEach() 메서드는 주어진 함수(콜백함수)를 배열 요소 각각에 대해 실행함.
• forEach(콜백함수(item, index, arr), this로 사용할 객체)

  • item: 처리할 현재 요소값
  • index: 처리할 현재 요소의 인덱스 (opt)
  • array: forEach()를 호출한 배열 (opt)

• class의 메소드에서 forEach함수를 사용할 경우, 화살표함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조함. 콜백함수에서 this참조 시 화살표함수로 작성하는 것이 좋음, forEach함수의 두번째 인수인 'this로 사용할 객체'를 생략해도 되기 때문.

👾 #1

const fruits = ['Apple', 'Banana', 'Cherry']

fruits.forEach(function(element, index, array) {
  console.log(element, index, array)
});

📍Console

👾 #2

const fruits = ['Apple', 'Banana', 'Cherry']
const b = fruits.forEach(function(fruit, index) {
console.log(`${fruit} - ${index}`)
});

console.log(b); 

📍Console

👾 #3

class Numbers {
  numberArray = [];
  
  multiply(arr){
    // 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다.
    arr.forEach(item => this.numberArray.push(item * item));
  }
}

const numbers = new Numbers();
numbers.multiply([1,2,3]);
console.log(numbers.numberArray); // [1,4,9]

🔵 Array.prototype.map()

• map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백함수)를 호출한 결과를 모아 새로운 배열을 반환합니다.
• map(콜백함수(item, index, arr), this로 사용할 객체)

👾 #1

const fruits = ['Apple', 'Banana', 'Cherry']
const b = fruits.map(function(fruit, index) {
return`${fruit} - ${index}`
});

console.log(b); // ['Apple-0', 'Banana-1', 'Cherry-2']

👾 #2

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

/* 축약형 */
b = fruits.map( (fruit, index) =>{ 
  id:index, name=fruit 
}); 

📍Console

🔵 Array.prototype.filter()

• filter() 메서드는 주어진 함수(콜백함수)의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환함.
• filter(콜백함수(item, index, arr), this로 사용할 객체)

👾 #1

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

🔵 Array.prototype.reduce()

• 콜백함수의 반환값을 다음 순회시에 콜백함수의 첫번재인수로 전달하면서 콜백함수를 호출하여 하나의 결과값을 만들어 반환한다. 원본배열 변경안됨.
• reduce(콜백함수((초기값 or 이전반환값), 요소값, 인덱스, arr), 초기값) -> 초기값 생략 가능(하지만 작성하는 것이 안전함.)

👾 #1

const sum = [1,2,3,4].reduce((ammulator, currentValue, index, arr)=> ammulator + currentValue,0);

console.log(sum); // 10

👾 #2 평균구하기

const values = [1,2,3,4,5,6];
const average = values.reduce((acc, cur, i, {length}) => {
  return i === length - 1 ? (acc + cur) / length : acc+cur;
}, 0);

console.log(average); // 3.5

👾 #3 요소의 중복 횟수 구하기

const fruits = ['Apple', 'Banana', 'Cherry', 'Cherry', 'Apple'];

const count = fruits.reduce((acc,cur) => {
  // 만약 프로퍼티 값이 undefined(처음 등장하는 요소)이면 프로퍼티 값을 1로 초기화한다.
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
},{});

console.log(count); // object {'Apple': 2, 'Banana': 1, 'Cherry': 2}

👾 #4 중복 요소 제거

const values = [1,2,1,3,5,4,5,3,4,4];

let result = values.reduce(
  (unique, val, i, _values) => {
    // true -> [...unique,val]: unique배열에 val요소 추가
    // false -> unique: 추가 하지 않음.
    return _values.indexOf(val) === i ? [...unique,val] : unique},
  [] // 초기값: 빈 배열
);

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

/* filter()가 더 직관적임 */
result = values.filter((val, i, _values) => _values.indexOf(val) === i);
console.log(result); // [1,2,3,5,4]

🔵 Array.prototype.find()

• find(콜백함수(item, index, arr), this로 사용할 객체)
• find()메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환함.
• 콜백함수의 반환값이 true인 요소가 존재하지 않다면 undefined를 반환함.

👾 #1

const array = [5, 6, 12]
const found = array.find( el => el > 10 )
console.log(found); // 12

👾 #2

const fruits = ['Apple', 'Banana', 'Cherry']
const a = fruits.find(fruit => {
  return /^B/.test(fruit)
});
console.log(a); // Banana

🔵 Array.prototype.findIndex()

• findIndex() 메서드는 주어진 판별 함수(콜백함수)를 만족하는 배열의 인덱스를 첫 번째 요소에 대한 반환.
• 만족하는 요소가 없으면 -1을 반환.
• findIndex(콜백함수(item, index, arr), this로 사용할 객체)

👾 #1

const fruits = ['Apple', 'Banana', 'Cherry']
const a = fruits.findIndex(fruit => {
  return /^C/.test(fruit)
});
console.log(a); // 2

🔵 Array.prototype.some()

• some(콜백함수(item, index, arr), this로 사용할 객체)
• 콜백함수의 반환값이 단 한번이라도 참이면 true, 모두 거짓이면 false를 반환한다.
• 호출한 배열이 빈 배열일 경우 false를 반환한다.

👾 #1

[5,10,15].some(item => item < 10); // true
[5,10,15].some(item => item < 5); // false

🔵 Array.prototype.every()

• every(콜백함수(item, index, arr), this로 사용할 객체)
• 콜백함수의 반환값이 모두 참이면 true, 단 한번이라도 거짓이면 false를 반환한다.
• 호출한 배열이 빈 배열일 경우 true를 반환한다.

👾 #1

[5,10,15].some(item => item < 50); // true
[5,10,15].some(item => item < 10); // false

🔵 Array.prototype.flatMap()

• map메서드와 flat메서드를 순차적으로 실행하는 효과가 있다.
• 평탄화 깊이를 지정할 수 없고 1단계만 평탄화한다.

👾 #1

const arr = ['hello','world'];
let result = arr.flatMap(x => x.split(''));

console.log(result); 
// ["h","e","l","l","o","w","o","r","l","d"]

result = arr.map(x => x.split(''));
console.log(result); 
// [["h","e","l","l","o"],["w","o","r","l","d"]]

🔵 Array.prototype.includes()

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별함.

👾 #1

const fruits = ['Apple', 'Banana', 'Cherry']
const a = fruits.includes('Apple');
console.log(a); // true

🔵 Array.prototype.push()

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

👾 #1

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

🔵 Array.prototype.unshift()

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

👾 #1

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

🔵 Array.prototype.reverse()

• reverse() 메서드는 배열의 순서를 반전함. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됨.
• 원본 수정됨.

👾 #1

const numbers = [1, 2, 3, 4]
numbers.reverse()
console.log(numbers) // [4, 3, 2, 1]

🔵 Array.prototype.slice()

• slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

👾 #1

const fruits = ['Apple', 'Banana', 'Cherry']
const a = fruits.slice(1,3);
console.log(a); // ['Banana', 'Cherry']

🔵 Array.prototype.splice()

• splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
• 원본 수정됨.

👾 #1

/* splice(삭제 시작할 인덱스값, 삭제할 개수) */
const numbers = [1, 2, 3, 4]
numbers.splice(2, 1)
console.log(numbers); // [1, 2, 4]

👾 #2

/* splice( n, 삭제할 개수 , n번째에 삽입할 데이터 )
: n인덱스부터 2번째 인수 수만큼 삭제하고 데이터 삽입 */
const numbers = [1, 2, 3, 4]

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

🔵 Array.prototype.join()

• join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

const myName = ['my', 'name', 'is', 'zooyaho'];
console.log(myName.join(' ')); //"my name is zooyaho"