본문 바로가기

javascript52

자바스크립트 화살표 함수 this 자바스크립트에서 this는 일반 함수에서 사용할 때, 화살표 함수에서 사용할 때 의미가 달라집니다. 일반 함수에서는 this를 재정의 해서 사용하게 되고, 화살표 함수에서는 this를 상속해서 사용하게 됩니다. 예를 들면 객체에서 일반 함수를 정의했다면 this는 최상위 객체인 window를 재정의 해서 객체 자체를 의미하게 되고 화살표 함수를 정의했다면 this는 window 객체를 상속받아서 window 객체를 의미하게 됩니다. 사용법 const user = { id: "user01", age: "20", display1: function () { return `name:${this.id} age:${this.age}`; }, display2: () => { return `name:${this.id}.. 2023. 4. 9.
자바스크립트 reduce 메서드 reduce 메서드는 배열의 요소들을 하나의 값으로 줄여서 반환합니다. reduce 메서드의 콜백 함수의 첫 번째 인자의 용도는 값을 누적 시켜주고 두 번째 인자의 용도는 요소들을 순서대로 가져오는 것 입니다. 배열의 누적합, 최소값, 최대값 등 다양하게 활용할 수 있습니다. 사용법 const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const sum1 = array.reduce((accumulator, element) => { return accumulator + element; }); console.log(sum1); // 55 const sum2 = array.reduce((accumulator, element) => accumulator + element, 100).. 2023. 4. 8.
자바스크립트 some과 every 메서드 some과 every 메서드는 배열 요소들의 조건에 따라서 true 또는 false를 반환합니다. if 조건문으로 검사해도 되지만 키워드의 의미를 생각하면 가독성을 좋게 할 수 있습니다. some 메서드는 배열 요소 중에서 하나 이상만 조건에 맞으면 true를 반환합니다. 즉 if 조건문에서 or 조건입니다. every 메서드는 배열의 모든 요소가 조건에 맞아야 true를 반환합니다. 즉 if 조건문에서 and 조건입니다. 사용법 const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(array.every(n => n >= 1)); // true console.log(array.every(n => n n === 1)); // true console.log.. 2023. 4. 7.
자바스크립트 filter 메서드 filter 메서드는 원본 배열은 수정되지 않고 배열에서 조건에 맞는 요소들로 새로운 배열을 반환합니다. filter 메서드에 익명 함수를 인자로 넣어주고 return 문에 원하는 조건을 입력해 주면 됩니다. 즉 배열의 요소들을 순환하면서 true에 걸리는 요소들만 새로운 배열의 요소가 되는 것입니다. 사용법 const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const odds = array.filter(n => { return n % 2 === 1; }); console.log(array); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] console.log(odds); // [ 1, 3, 5, 7, 9 ] 2023. 4. 7.
자바스크립트 setTimeout과 setInterval 함수 setTimeout과 setInterval 함수는 시간을 설정해서 함수를 실행시킬 수 있습니다. 함수는 익명 함수를 인자로 넣어주면 설정된 시간이 되면 실행이 됩니다. setTimeout 함수는 시간을 설정하면 해당 시간이 되면 한번 실행하고 종료가 됩니다. 종료 시키고 싶다면 실행할 때 id를 변수에 설정해서 clearTimeout 함수에 입력하면 됩니다. setInterval 함수는 시간을 설정하면 해당 시간 만큼 일정한 간격으로 반복 실행이 되고 종료가 되지 않습니다. 종료 시키고 싶다면 실행 할 때 id를 변수에 설정해서 clearInterval 함수에 입력하면 됩니다. 사용법 const id1 = setTimeout(() => { console.log("hello"); }, 3000); // 3.. 2023. 4. 7.
자바스크립트 slice와 splice 메서드 slice와 splice 메서드는 배열에서 사용할 수 있는 메서드로, 범위를 설정해서 새로운 배열을 생성할 수 있습니다. slice는 원본 배열을 수정하지 않는 메서드로, 배열의 요소들을 시작점과 끝점을 기준으로 잘라서 새로운 배열을 반환합니다. 시작점만 입력하면 범위가 해당 인덱스부터 마지막 요소까지고 시작점과 끝점을 입력하면 시작점부터 끝 점 바로 앞 요소까지입니다. 즉 시작점은 포함하고 끝점은 포함하지 않습니다. splice는 원본 배열을 수정하는 메서드로, 배열 요소들을 시작점과 개수를 정해서 시작점부터 개수만큼 삭제할 수 있고 삭제한 요소들을 반환합니다. 그리고 시작점과 할당할 요소들을 입력해서 배열에 새롭게 할당할 수 있습니다. 사용법 const users = ["user01", "user02.. 2023. 4. 6.
자바스크립트 concat, indexOf, includes, reverse 메서드 concat 메서드는 여러개의 배열의 요소들이 결합된 새로운 배열을 반환하는 기능이고 indexOf 메서드는 찾는 요소의 값을 입력하면 해당요소의 인덱스를 알려주는 기능이고 includes 메서드는 찾는 요소의 값을 입력하면 해당요소가 배열에 포함되어 있는지 알려주는 기능입니다. 그리고 reverse 메서드는 배열 요소들의 순서를 뒤집어서 거꾸로 변경 시켜 줍니다. 사용법 const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const users = ["user01", "user01", "user02"]; let newArray = array1.concat(array2); console.log(newArray); // [ 1, 2, 3, 4, 5, 6 ] newAr.. 2023. 4. 5.
자바스크립트 shift와 unshift 메서드 shift 메서드는 배열에서 첫 번째 요소를 제거하면서 해당 요소를 반환하는 기능이고 unshift 메서드는 배열에서 새로운 요소를 첫 번째 요소로 추가하는 기능입니다. 사용법 let users = ["user01", "user02", "user03"]; console.log(users.shift()); // user01 console.log(users.shift()); // user02 console.log(users.shift()); // user03 console.log(users.shift()); // undefined users = ["user01", "user02", "user03"]; users.unshift("mainUser"); console.log(users); // [ 'mainUse.. 2023. 4. 5.

티스토리툴바