[JavaScript]기초 메서드

JIIJIIJ·2023년 5월 13일
JavaScript웹개발이론
0

JavaScript

목록 보기
7/23
post-thumbnail

Object메서드

  • Object.assign
    • Object.assign 메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 프로퍼티를 복사할 때 사용되며, 대상 객체를 반환한다. 
      let obj1 = { a: 1 };
let obj2 = { b: 2 };
let merged = Object.assign(obj1, obj2);
console.log(merged); // { a: 1, b: 2 }
  • Object.keys
    • Object.keys 메소드는 주어진 객체의 자신의 열거 가능한 프로퍼티 이름들을 배열로 반환한다. 
      let obj = { a: 1, b: 2, c: 3 };
let keys = Object.keys(obj);
console.log(keys); // ["a", "b", "c"]
  • Object.values
    • Object.values 메소드는 주어진 객체가 가진 자신의 열거 가능한 프로퍼티 값들을 배열로 반환한다. 
      let obj = { a: 1, b: 2, c: 3 };
let values = Object.values(obj);
console.log(values); // [1, 2, 3]
  • Object.entries
    • Object.entries 메소드는 주어진 객체 자신의 열거 가능한 문자열 키-값 쌍의 배열을 반환한다. 
      let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]
  • Object.fromEntries
    • Object.fromEntries 메소드는 키-값 쌍의 리스트(2차원 배열 등)를 객체로 변환한다.
    • 이 메소드는 Object.entries의 반대 동작을 한다.
      • let entries = [["a", 1], ["b", 2], ["c", 3]];
let obj = Object.fromEntries(entries);
console.log(obj); // { a: 1, b: 2, c: 3 }

Number, Math

  • toString()
    • 진수 변환: 이 메소드는 주어진 숫자를 문자열로 변환한다.
    • 선택적으로 기수(진법)를 인수로 전달할 수 있다.
      • let num = 17;
console.log(num.toString()); // "17"
console.log(num.toString(2)); // "10001" (2진수)
console.log(num.toString(16)); // "11" (16진수)
  • Math.PI
    • Math.PI 속성은 원주율(π≈3.14159)을 나타낸다. 
      console.log(Math.PI); // 3.141592653589793
  • Math.ceil()
    • Math.ceil() 메소드는 주어진 숫자 이상의 최소 정수를 반환한다. 
      console.log(Math.ceil(1.4)); // 2
  • Math.floor()
    • Math.floor() 메소드는 주어진 숫자 이하의 최대 정수를 반환한다. 
      console.log(Math.floor(1.6)); // 1
  • Math.round()
    • Math.round() 메소드는 주어진 숫자를 가장 가까운 정수로 반올림한다. 
      console.log(Math.round(1.5)); // 2
  • toFixed()
    • toFixed() 메소드는 주어진 숫자를 고정된 소수점 표현으로 변환하며, 괄호 안에는 소수점 아래의 자릿수를 지정한다. 
      let num = 1.23456;
console.log(num.toFixed(2)); // "1.23"
  • toFixed()사용하지 않고 소수자리 반올림
    • Math.round()와 비슷하게 작동하지만, 숫자에 곱하고 나누어 소수점 아래 자릿수를 제어한다. 
      let num = 1.23456;
console.log(Math.round(num * 100) / 100); // 1.23
  • isNaN()
    • isNaN() 함수는 주어진 값이 NaN인지 여부를 판별합니다. 
      console.log(isNaN(NaN)); // true
console.log(isNaN(123)); // false
  • parseInt()
    • 진수변환: parseInt() 함수는 문자열을 파싱하여 특정 진법(10진법 기본)의 정수를 반환한다. 
      console.log(parseInt('11', 2)); // 3 (2진법으로 11은 10진법으로 3)
  • parseFloat()
    • parseFloat() 함수는 문자열을 파싱하여 부동 소수점 실수를 반환한다. 
      console.log(parseFloat('3.14')); // 3.14
  • Math.random()
    • Math.random() 함수는 0 이상 1 미만의 부동소수점 의사 난수를 반환한다. 
      console.log(Math.random()); // 0.7098488023916801 (결과는 매번 다르게 나옴)
  • Math.max()과 Math.min()
    • Math.max()는 주어진 숫자 중에서 가장 큰 값을, Math.min()은 가장 작은 값을 반환한다. 
      console.log(Math.max(1, 2, 3)); // 3
console.log(Math.min(1, 2, 3)); // 1
  • Math.abs()
    • Math.abs() 함수는 주어진 숫자의 절대값을 반환한다. 
      console.log(Math.abs(-10)); // 10
  • Math.pow()
    • Math.pow() 함수는 첫 번째 인수를 밑, 두 번째 인수를 지수로 하는 거듭제곱 값을 반환한다. 
      console.log(Math.pow(2, 3)); // 8
  • Math.sqrt()
    • Math.sqrt() 함수는 주어진 숫자의 제곱근을 반환한다. 
      console.log(Math.sqrt(9)); // 3

String

  • ',",`
    • 이들은 JavaScript에서 문자열을 표현하는 데 사용되는 따옴표이다.
    • 백틱(`)은 템플릿 문자열을 작성할 때 사용된다.
      • let str1 = 'single quotes';
let str2 = "double quotes";
let str3 = `template literal ${str1}`;
console.log(str3); // "template literal single quotes"
  • str.length
    • str.length 속성은 문자열의 길이를 반환한다. 
      let str = 'Hello';
console.log(str.length); // 5
  • str.toUpperCase()와 str.toLowerCase()
    • str.toUpperCase() 메서드는 문자열을 대문자로, str.toLowerCase() 메서드는 문자열을 소문자로 변환한다. 
      let str = 'Hello';
console.log(str.toUpperCase()); // "HELLO"
console.log(str.toLowerCase()); // "hello"
  • str.indexOf()
    • str.indexOf() 메서드는 문자열 내에서 지정된 값이 처음 나타나는 인덱스를 반환하며, 값이 없으면 -1을 반환한다. 
      let str = 'Hello, world';
console.log(str.indexOf('world')); // 7
console.log(str.indexOf('bye')); // -1
  • str.includes()
    • str.includes() 메서드는 문자열이 특정 문자열을 포함하고 있는지를 확인하고, 그 결과를 불리언 값으로 반환한다. 
      let str = 'Hello, world';
console.log(str.includes('world')); // true
console.log(str.includes('bye')); // false
  • str.slice()
    • str.slice() 메서드는 문자열의 일부분을 추출하고 새로운 문자열을 반환하며, 원본 문자열은 변경되지 않는다. 
      let str = 'Hello, world';
console.log(str.slice(7)); // "world"
  • str.substring()
    • str.substring() 메서드는 두 인덱스 사이의 문자열을 추출하고 새로운 문자열을 반환하며, 원본 문자열은 변경되지 않는다. 
      let str = 'Hello, world';
console.log(str.substring(0, 5)); // "Hello"
console.log(str.substring(7)); // "world"
  • str.substr()
    • str.substr() 메서드는 시작 인덱스부터 특정 개수의 문자를 추출하고 새로운 문자열을 반환하며, 원본 문자열은 변경되지 않는다. 
      let str = 'Hello, world';
console.log(str.substr(7, 5)); // "world"
  • str.trim()
    • str.trim() 메서드는 문자열의 시작과 끝에서 공백 문자를 제거하고 그 결과를 반환한다. 
      let str = '   Hello, world   ';
console.log(str.trim()); // "Hello, world"
  • str.repeat()
    • str.repeat() 메서드는 문자열을 주어진 횟수만큼 반복하고 그 결과를 반환한다. 
      let str = 'Hello ';
console.log(str.repeat(3)); // "Hello Hello Hello "

Array

  • arr.splice()
    • arr.splice() 메서드는 배열의 기존 요소를 삭제하거나 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 
      let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 'three'); // 인덱스 2에서 1개의 요소를 제거하고 'three'를 추가
console.log(arr); // [1, 2, "three", 4, 5]
  • arr.concat()
    • arr.concat() 메서드는 두 개 이상의 배열을 합친다. 
      let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]
  • arr.forEach()
    • arr.forEach() 메서드는 배열에 있는 각 요소에 대해 주어진 함수를 실행한다. 
        let arr = [1, 2, 3, 4, 5];
arr.forEach((element, index) => {
console.log(`Element ${element} exists at index: ${index}`);
});
  • arr.indexOf() 와 arr.lastIndexOf()
    • arr.indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 없으면 -1을 반환한다.
    • arr.lastIndexOf() 메서드는 배열의 끝에서부터 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 없으면 -1을 반환한다.
      • let arr = [1, 2, 3, 2, 1];
console.log(arr.indexOf(2)); // 1
console.log(arr.lastIndexOf(2)); // 3
  • arr.find() 와 arr.findIndex()
    • arr.find() 메서드는 주어진 테스트 함수를 만족하는 배열의 첫 번째 요소를 반환하고, 없으면 undefined를 반환한다.
    • arr.findIndex() 메서드는 만족하는 첫 번째 요소의 인덱스를 반환하고, 없으면 -1을 반환한다.
      • let arr = [1, 2, 3, 4, 5];
let foundElement = arr.find(element => element > 2);
console.log(foundElement); // 3
let foundIndex = arr.findIndex(element => element > 2);
console.log(foundIndex); // 2
  • arr.filter()
    • arr.filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소로 이루어진 새로운 배열을 생성한다. 
      let arr = [1, 2, 3, 4, 5];
let filteredArr = arr.filter(element => element > 2);
console.log(filteredArr); // [3, 4, 5]
  • arr.reverse()
    • arr.reverse() 메서드는 배열의 요소 순서를 반전시킨다. 
      let arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]
  • arr.map()
    • arr.map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 
      let arr = [1, 2, 3, 4, 5];
let mappedArr = arr.map(element => element * 2);
console.log(mappedArr); // [2, 4, 6, 8, 10]
  • arr.join()
    • arr.join() 메서드는 배열의 모든 요소를 연결하여 하나의 문자열을 만든다. 
      let arr = ['Hello', 'world'];
let joinedStr = arr.join(' ');
console.log(joinedStr); // "Hello world"
  • arr.split()
    • arr.split() 메서드는 문자열을 구분자를 기준으로 분할하여 배열로 반환한다. 
      let str = 'Hello world';
let splitArr = str.split(' ');
console.log(splitArr); // ["Hello", "world"]
  • arr.isArray()
    • arr.isArray()
      • Array.isArray() 메서드는 주어진 값이 배열인지를 판별한다. 
        let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true
let str = 'Hello';
console.log(Array.isArray(str)); // false
    • arr.sort()
      • arr.sort() 메서드는 배열의 요소를 적절한 위치에 정렬하며 기본 정렬 순서는 문자열의 유니코드 코드 포인트에 따른다. 
        let arr = [1, 5, 2, 4, 3];
arr.sort();
console.log(arr); // [1, 2, 3, 4, 5]
    • arr.reduce()
      • arr.reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 단일 출력값을 반환한다. 
        let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

setTimeout

setTimeout 함수는 일정 시간이 지난 후에 콜백 함수를 실행하는 타이머 함수입니다. 콜백 함수는 지정된 시간(ms)이 경과된 후에 한 번 실행됩니다.

예시 1: 지연된 인사

이 예시는 setTimeout을 사용하여 인사 메시지의 실행을 지연시키는 방법을 보여줍니다.

setTimeout(() => {
  console.log("Hello, World!");
 }, 2000);

예시 2: 동적으로 텍스트 변경

이 예시는 setTimeout을 사용하여 요소의 텍스트를 동적으로 변경하는 방법을 보여줍니다.

const element = document.getElementById("myElement");
setTimeout(() => {
  element.textContent = "Text changed dynamically!";
}, 3000);

setInterval

setInterval 함수는 일정한 간격으로 콜백 함수를 반복해서 실행하는 타이머 함수입니다. 콜백 함수는 지정된 간격(ms)마다 실행됩니다.

예시 1: 카운트다운 타이머

이 예시는 setInterval을 사용하여 카운트다운 타이머를 생성하는 방법을 보여줍니다.

let count = 10;
const countdown = setInterval(() => {
  console.log(count);
  count--;
  if (count === 0) {
    clearInterval(countdown);
    console.log("Countdown finished!");
  }
}, 1000);

예시 2: 동적인 시계

이 예시는 setInterval을 사용하여 매 초마다 업데이트되는 동적인 시계를 생성하는 방법을 보여줍니다.

const clockElement = document.getElementById("clock");
function updateClock() {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  clockElement.textContent = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000);

profile
JIIJIIJ
다크모드가 보기 좋아요
이전 포스트

[JavaScript] AJAX

다음 포스트

[JavaScript] 구조 분해 할당

0개의 댓글