본문 바로가기

Javascript40

startsWith( )/endsWith( ) startsdWith( )/endsWith( ) startsWith( ) 메서드는 시작하는 문자열에서 문자열을 검색하여 불린으로 반환합니다. endsWith( ) 메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)을 반환합니다. startsWith( )/endsWith( ) 메서드 startsdWith( ) 와 endsWith( ) 메서드는 둘 다 찾을 문자열을 검색하는 메서드며 문자열이 있을 시 true, 없을 시 false로 반환합니다. 둘의 차이점은 문자열이 지정 문자열로 시작하지는, 끝나는지 체크하는 차이점이 있습니다. 문법 Array.startssWidth(검색 문자열, 위치값) Array.endsWith(검색 문자열, 위치값) const str1 = "javascript .. 2022. 9. 28.
map( )/Array.from( ) map( ) / Array.from( ) map( ) 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드입니다. Array.from() 은 문자열 등 유사 배열(Array-like) 객체나 이터러블한 객체를 배열로 만들어주는 메서드입니다. map( ) 메서드 메서드 안에 콜백함수를 넣어 반복문을 적용하는 메서드입니다. 기본적으로 forEach문과 같으나 forEach문은 배열을 반환하지 못하는데 map( ) 메서드는 배열 반환이 가능하다는 차이점이 있어 배열을 반환할 때 forEach문 대신 사용할 수 있습니다. 문법 Array.map(el => el 연산자 반복할 값) const arrNum = [100, 200, 300, 400, 500]; c.. 2022. 9. 27.
find( )/findIndex( )/filter( ) find( ) / findIndex( ) / filter( ) find( ) 메서드는 주어진 판별 함수를 만족하는 첫 요소를 반환하며, 없을 시 undefined를 반환합니다. findIndex( ) 메서드는 주어진 판별 함수를 만족하는 첫 요소의 식별자(순서)를 반환하며, 없을 시 -1을 반환합니다. filter( ) 메서드는 주어진 함수의 조건을 만족하는 모든 요소를 모아 새로운 배열로 반환합니다. find( ) / findIndex( ) 메서드 find( ) 메서드는 indexOf( ) 메서드와 마찮가지로 배열값을 찾는 메서드입니다. 차이점은 find( ) 메서드는 인자로 받은 값이 아닌 인자로 받은 판별 함수를 만족하는 첫 배열값을 반환합니다. 또한 찾는 값이 없을 시 -1이 아닌 undefine.. 2022. 9. 27.
indexOf( )/lastIndexOf( )/includes( ) indexOf( ) / lastIndexOf( ) / includes( ) indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. lastIndexOf( ) 메서드는 반대로 기준을 끝에서 시작합니다. includes( ) 메서드는 찾을 값이 배열 값에 포함되어 있을 때 불린(true/false)으로 반환합니다. indexOf( ) / lastIndexOf( ) 메서드 객체 메서드와 동일하게 찾는 배열값을 식별자로 반환해주는 메서드입니다. 똑같이 배열값을 찾을 때 사용되며 값이 없으면 -1을 반환하는 것도 똑같습니다. lastIndexOf ( ) 메서드는 찾는 기준점이 끝에서 시작합니다. 문법 Array.indexOf(찾는 배열값) A.. 2022. 9. 27.
slice( )/splice( ) slice( )/splice( ) slice( ) 메서드는 배열의 일부분(slice) 혹은 부분 배열(subarray)을 반환합니다 splice( ) 메서드는 배열의 기존 요소를 삭제 혹은 교체하거나 추가한 후 삭제한 배열 값을 반환합니다. slice( ) 메서드 slice( ) 메서드는 객체 메서드와 동일합니다. 배열값에 해당되는 식별자를 지정하고 해당 배열값을 반환합니다. 문법 Array.slice(반환을 시작할 순서, 반환이 끝날 순서) //-1은 뒤에서 시작 const arrNum = [100, 200, 300, 400, 500]; const result = arrNum.slice(2); document.querySelector(".sample08_N1").innerHTML = "1"; docum.. 2022. 9. 27.
reduce( )/reduceRight( ) reduce( ) / reduceRight( ) reduce( ) 메서드는 배열의 여러개의 값을 하나의 값으로 축소하고 축소한 값을 반환합니다 reduceRight( ) 메서드는 배열의 여러개의 값을 하나의 값으로 축소하고 축소한 값을 역순으로 반환합니다 reduce( )과 reduceRight( ) 메서드 reduce( ) 메서드는 배열의 값을 하나의 값으로 축소하며, 반복문과 비슷하게 배열의 요소들을 순회하면서 반복적인 연산을 하는 메서드입니다. 하지만 콜백함수가 들어갈 때 반환하는 값이 다음 콜백 함수의 첫 번째 파라미터로 전달되는 차이점이 있습니다. 즉, 마지막 콜백 함수가 동작한 이후의 반환 값이 reduce 메서드의 return 값이 됩니다. reduceRight( )는 동일하지만 역순으로 반.. 2022. 9. 27.
reverse( )/sort( )/concat( ) reverse( )/sort( )/contcat( ) 메서드 reverse( ) 메서드는 배열의 순서를 반대로 배열하고 반환합니다. sort( ) 메서드는 배열의 순서를 순서대로 배열합니다. contcat( ) 메서드는 기존 배열에 배열값을 합쳐서 새로운 배열을 반환합니다. reverse( ) 메서드 reverse( ) 메서드는 배열의 순서를 반전하여 첫번째 요소가 마지막이 되고 마지막 요소가 첫번째 요소가 됩니다. 기본 문법 Array.reverse( ) const arrNum1 = [100, 200, 300, 400, 500]; const arrNumReverse = arrNum1.reverse(); document.querySelector(".sample05_N1").innerHTML = "1"; .. 2022. 9. 27.
unshift( )/shift( ) 메서드 unshift( )/shift( ) 메서드 unshift( ) 메서드는 배열 처음에 요소 추가 후 배열 갯수 반환합니다. shift( ) 배열 처음 요소를 삭제하고 삭제한 요소를 반환합니다. unshift( ) 메서드 unshift( )메서드는 push( ) 메서드와 비슷한 효과입니다. push( ) 메서드는 배열의 뒤에 새로운 요소를 추가하고 반환하지만 unshift( ) 메서드는 배열의 첫 부분에 새로운 요소를 추가하고 반환합니다. 기본 문법 Array.unshift(추가할 배열 값); const arrNum1 = [100, 200, 300, 400, 500]; const arrNumUnshift = arrNum1.unshift(600); document.querySelector(".sample04_.. 2022. 9. 27.
콜백 함수 콜백 함수 다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수입니다. (첫번째가 다 끝난 후 2번째가 실행되도록 하는 함수 로딩 소스가 다 끝나고 메인 소스가 나오도록 하는 그런 기능) : 첫번째 함수가 실행 -> 두번째 함수가 실행 기본 형태 콜백 함수는 그 자체로 특별한 선언이나 문법적 특징을 가지고 있진 않지만, 특정 이벤트가 발생할 때 호출할 수 있어 다양하게 많이 사용됩니다. 기본 형태 function func(); fuction callback(str){ str(); } callback(func); { function func(){ document.write("함수가 실행되었습니다.1"); } function callback(str){ //인자값을 마치 함수인거처럼 실행문으로 사.. 2022. 9. 20.
재귀 함수 재귀 함수 함수가 직접 또는 간접적으로 자신을 호출하는 함수입니다. 재귀함수란? 함수가 직접 또는 간접적으로 자신을 호출하는 프로세스를 재귀함수하며, 함수 안에 자신의 함수를 넣어 불러옵니다. 재귀함수는 종료 지점을 설정하지 않고 그냥 함수만 넣게되면 무한으로 실행되어 스택오버플로우가 발생할 수 있습니다. 기본 형태 function func(){ func(); } func(); { //반복적으로 function func(num){ //num : 인자 혹은 파라미터 if(num 2022. 9. 20.
비구조화 할당 / 객체구조분해 할당 비구조화 할당 비구조화할당이란 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식입니다. ▶ 문법 const {키1, 키2, 키3} = {값1, 값2, 값3}; = 변수 { const obj = { a: 100, b: 200, c: "javascript" } const {a, b, c} = obj; document.write(a); document.write(b); document.write(c); } 결과보기 객체구조분해할당 구조 분해 할당이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식입니다. ▶ 문법 const {키1: 변수1, 키2: 변수2, 키3: 변수3} = {값1, 값2, 값3}; = 변수 { con.. 2022. 9. 20.
펼침연산자 펼침연산자 펼침연산자는 점3개(...)로 표시하며 복잡한 갹체 나열을 단순화하거나 객체의 병합, 함수의 인자 처리를 단순하게 처리할 수 있도록 개선하는 함수입니다. 펼침연산자는 복사, 추가, 결합의 3가지 기능이 있습니다. 1. 펼침연산자 : 복사 배열 혹은 객체에 포함된 항복을 그대로 복사해 목록으로 만듭니다. { const obj = { a: 100, b: 200, c: "javascript" } //복사 const spread = { ...obj } //...이 펼침연산자의 기능 document.write(spread.b); document.write(spread.b); document.write(spread.b); } 결과보기 2. 펼침연산자 : 추가 복사한 항목 뒤에 항목을 추가합니다. { co.. 2022. 9. 20.

HTML

학습하기

CSS

학습하기

JAVASCRIPT

학습하기
광고 준비중입니다.

티스토리툴바