본문 바로가기

IT875

자바스크립트 스프레드 연산자(spread operator) 자바스크립트 스프레드 연산자는 배열의 요소들이나 객체 속성들의 각각의 값을 복사해서 나열해 줍니다. 원본 배열의 요소들과 원본 객체의 속성들의 값은 변하지 않습니다. 용도는 배열을 복사해서 새로운 배열을 생성하거나, 객체를 복사해서 새로운 객체를 생성하거나, 여러 개의 배열을 합치거나, 여러 개의 객체를 합치는 등 다양하게 활용할 수 있습니다. 사용법 const nums = [1, 2, 3, 4, 5]; console.log(...nums); // 1 2 3 4 5 console.log(Math.max(...nums)); // 5 console.log(Math.min(...nums)); // 1 const newNums1 = [...nums]; const newNums2 = [...nums, ...num.. 2023. 4. 10.
자바스크립트 기본 매개 변수 자바스크립트 기본 매개 변수는 함수에서 매개 변수를 정의할 때 값을 초기화하는 것을 의미합니다. 기본 매개 변수를 설정하면 함수 호출 시 인자를 입력하지 않으면 이미 설정된 값으로 처리합니다. 매개 변수 설정 시 주의 사항은 오른쪽 매개 변수부터 초기화를 시켜주어야 한다는 것입니다. 왜냐하면 함수 호출 시 입력받는 값은 왼쪽부터 채워지기 때문입니다. 사용법 function f1(a, b = 2) { return a + b; } function f2(a = 1, b) { return a + b; } function f3(a = 1, b = 2) { return a + b; } console.log(f1(1)); // 3 console.log(f2(2)); // NaN console.log(f3()); // 3 2023. 4. 10.
자바스크립트 화살표 함수 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.

티스토리툴바