문자열 관련 Method

예시.let str ='Happy day~! ';

.length : 문자열의 길이를 반환(공백 포함)
.toUpperCase(),toLowerCase() : 문자열 전체를 대문자, 소문자로 변경
(이건 대문자 소문자 구분 없이 입력을 받고 싶을 때 사용하면 좋은 method! 주로 회원가입 시 사용)
indexOf(") : 매개변수로 문자열을 받아서 해당 문자열의 첫번째 글자가 몇번째 인덱스인지 숫자 반환
slice(startldx[,endldx]) : start 부터 end-1 까지 슬라이싱, 빼옴 매개변수
replace(문자열1, 문자열2) : 처음 문자열1을 문자열2로 변경
replaceAll(문자열1, 문자열2) : 문자열1을 전부 찾아서 문자열2로 바꿔준다.
repeat(n) : 문자열에 대해 n번 반복
trim() : 문자열의 양끝 공백 없애기

예시

let str = 'Happy Day~!  ';
console.log(str.length); //13

console.log(str.toUpperCase()); //HAPPY DAY~!

console.log(str.toLowerCase()); //happy day~!

console.log(str.indexOf('y')); //4
// 단, 첫번째 문자만 검색slstrstr

console.log(str.slice(2)); //ppy Day~!

console.log(str.slice(2, -3)); //ppy Day~
// 2번째부터 뒤에서 3번째까지 짜른다.
// 음수일 때는 뒤에서부터 자른다.

console.log(str.slice(5, 9)); // Day

console.log(str.replace('p', 'a')); //Haapy day~!
//단 첫번째 문자만 변경된다.

console.log(str.replaceAll('y', 'i')); //Happi Dai~!
// 전체 문자 변경

console.log(str.repeat(3)); //Happy Day~!  Happy Day~!  Happy Day~!

console.log(str.trim()); //Happy Day~!
// 양끝의 공백 없애기

console.log(str.split('')); //''안에 공백 없음
// (13) ['H', 'a', 'p', 'p', 'y', ' ', 'D', 'a', 'y', '~', '!', ' ', ' ']

console.log(str.split(' ')); //''안에 공백 1
// (4) ['Happy', 'Day~!', '', '']

console.log(str.split('p')); //p가 사라지고 p를 기준으로 나눠진다.
// (3) ['Ha', '', 'y Day~!  ']

console.log(str.split('Happy'));
// (2) ['', ' Day~!  ']

split 열심히 연습하자.. !

배열 관련 Method

push() : 배열 끝에 추가
pop() : 배열 끝에 제거
shift() : 배열 앞에 제거
unshift() : 배열 앞에 추가
includes('') : 포함되어 있는지 확인
arr.length : 배열의 길이 반환
arr.indexOf() : 문자열에서의 indexOf와 마찬가지로 매개변수에 해당하는 배열의 인덱스를 받아옴.
단, 매개변수로 문자열만 넣을 수 있는 것은 아님!
arr.reverse(); 배열 순서 뒤집어서 반환
arr.join(); join 안의 문자열 기준으로 문자열로 병

stack 방식

push() pop()

heap 방식

shift() unshift()

예시

 let list = [];
            for (let i = 0; i < 10; i++) {
                list[i] = i + 1;
            }
            
console.log(list);
            
list.push('end'); //11
            
console.log(list); //11 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 'end']
            
list.pop(); //end 삭제됨
            
console.log(list); //10
            
list.push(); //이러면 아무것도 안들어감
            
console.log(list); // 그대로 10
            
list.unshift('front');
            
console.log(list); //11 ['front', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
            
list.shift(); //front 삭제됨
            
console.log(list); //10
            
list.reverse(); //거꾸로 출력됨
           
console.log(list);
            
list.reverse();
            
console.log(list.join('-')); //1-2-3-4-5-6-7-8-9-10

Method 체이닝

각각의 메소드를 연결해서 사용하는 개념

• 단, 사용한 메소드가 반환(return)값을 가지고 있는 경우에만 사용이 가능하다.
• 'hello'.split("") 의 결과 ['H','e','l','l','o']라는 배열이 반환되는데
• reverse()라는 메소드가 존재할 때, 뒤에 이어서 붙이면 배열이 거꾸로 반환된다.

let hello = 'Hello';
console.log(hello.split(''));
// ['H', 'e', 'l', 'l', 'o']
console.log(hello.split('').reverse());
// ['o', 'l', 'l', 'e', 'H']

배열의 for of문

let numbers = [1, 2, 3, 4, 5, 6];
let fruits = ['사과', '바나나', '토마토', '포도', '파인애플'];
for (let number of numbers) {
    console.log(number);
}

for (let fruit of fruits) {
    console.log(fruit);
}

배열의 forEach문

forEach() 함수의 괄호 안에는 익명함수(콜백함수)를 넣어준다.

let numbers = ['1', '2', '3', '4', '5', '6'];
let fruits = ['복숭아', '사과', '바나나', '포도'];


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

그 결과를 통해 알 수 있는데, forEach() 함수는
하나의 요소, 그 요소의 순서, 배열 전체를 순서대로 출력한다.

배열의 for in문

let colors = [{ color: 'red' }, { color: 'blue' }, { color: 'yellow' }];

for (let index in colors) {
    console.log(index);
    console.log(colors[index]);
}

배열의 합

배열의 합의 변수는 반드시 전역변수로 넣어야 그 결과 값을 for 문 밖에서 출력 가능하고 사용 가능하다.

전역변수 함수 밖에서 선언된 변수이므로 전체에서 사용이 가능하다.
지역변수 함수 안에서 선언된 변수이므로 해당 함수 안에서만 사용이 가능하다.

filter

const words = [
    'spray',
    'limit',
    'elite',
    'exuberant',
    'destruction',
    'present',
];
const result = words.filter((word) => {
    return word.length > 6;
});
console.log(result);

화살표 함수안에서 중괄호와 return은 생략가능하다. 생략시 둘을 동시에 생략해야 한다.

const words = [
    'spray',
    'limit',
    'elite',
    'exuberant',
    'destruction',
    'present',
];
const result = words.filter((word) => word.length > 6);
console.log(result);

표준객체

• JS가 기본적으로 가지고 있는 객체들
  -프로그래밍을 함에 있어서 기본적으로 필요한 도구들
• String, Number, Array, Data, Math

Date 객체

• JS에서 매 순간 바뀌는 시간과 날짜에 관한 정보를 얻기 위해 사용하는 객체
  Date.now()
date.getFullYear() 연도
  date.getDate() 일
  date.getDay() 요일
  sunday - 0, monday-1 ...
  date.getTime()
date.getHours()
date.getMinutes()
date.getSeconds()
data.getMonth() 지난달이 나온다. 지금의 월은 +1해야 함

console.log(new Date());
const date = new Date();

console.log(date.getFullYear()); 
console.log(date.getMonth() + 1);
console.log(date.getDate());
console.log(date.getDay());
console.log(date.getTime());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(
    `${date.getFullYear()}년 ${
        date.getMonth() + 1
    }월 ${date.getDay()}일 ${date.getHours()}시 ${date.getMinutes()}분  `
);

Math 객체

• 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 Javascript 표준 내장 객체
• 웹 브라우저마다 다른 결과를 얻을 가능성이 있기에 정확한 결과를 얻어야 할 경우에는 Math 메소드를 사용하지 않는 것이 좋다.

console.log(Math.PI); //3.141592653589793
console.log(Math.E); //2.718281828459045
console.log(Math.min(1, 2, 3)); //1
console.log(Math.max(1, 2, 3)); //3
console.log(Math.random()); //0부터 1사이의 난수
console.log(Math.round(1.6)); //반올림
console.log(Math.floor(1.4)); //버림
console.log(Math.floor(1.6));
console.log(Math.ceil(1.4)); //올림
console.log(Math.abs(10 - 20)); // abs 절대값
console.log(Math.cbrt(2)); // 세제곱근