프로그래밍 이야기/JavaScript 공부
-
[JavaScript] 자바스크립트 localStorage 가볍게 이해하기프로그래밍 이야기/JavaScript 공부 2024. 1. 5. 20:52
LocalStorage란? LocalStorage는 웹 브라우저에서 클라이언트 측에서 데이터를 저장할 수 있는 여러 메커니즘 중 하나로, 특정 네트워크 요청을 통해 값을 저장하고 불러오는 것이 아니라 키-값 쌍을 사용하여 온전히 브라우저의 리소스만을 사용해서 데이터를 저장하고 불러올 수 있다는 특징이 있다. 심지어 브라우저를 종료하고 다시 열어도 유지된다. LocalStorage 다루기 로컬스토리지(LocalStorage)를 다루는 방법은 간단하다. localStorage라는 객체를 그냥 사용하면 된다. localStorage의 각 메서드를 활용하면 손쉽게 저장하고 불러오고 삭제하고 초기화 할 수 있다. 저장하기 저장은 setItem 이라는 메서드를 활용한다. 두 개의 파라미터를 가지는데, 키-값 순서대..
-
[JavaScript] 자바스크립트 includes 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2023. 10. 1. 18:55
includes 메서드란? includes 메서드는 배열이나 문자열에 특정한 값을 포함하는지 여부를 확인하는 메서드다. 특정한 값을 포함하는지에서 유추할 수 있듯이, includes 메서드는 boolean 타입의 값을 리턴한다. 문법 문법은 생각보다 간단한 형태로 사용되는데, 배열이나 문자열 뒤에 includes 메서드를 실행시키고 첫 번째 파라미터에 확인하고 싶은 특정한 값을 아규먼트로 전달해 주면 된다. // 1. 배열에서 includes() 메서드 사용 예시: const array = ['제우스', '카나비', '쵸비', '룰러', '케리아']; console.log('1. 배열에서 includes() 메서드 사용 예시:'); console.log(array.includes('쵸비')); // ? ..
-
[JavaScript] 자바스크립트 every 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2023. 9. 4. 01:14
Every 메서드란? every 메서드는 배열의 요소들이 특정 조건을 모두 만족하는지를 확인하는 배열(Array)의 메서드다. 문법 역시 some과 마찬가지로 forEach, map, filter와 거의 비슷하게 첫 번째 파라미터가 콜백 함수를 전달받지만, 앞의 메서드들과는 다르게 boolean 타입의 값을 리턴한다. 문법 const values = [1, 2, 3, 4, 5, 6]; const isPositive = values.every((currentElement, index, currentArray) => { console.log(`요소: ${currentElement}`); console.log(`index: ${index}`); console.log(currentArray); return cu..
-
[JavaScript] 자바스크립트 some 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2022. 10. 2. 22:38
some 메서드란? some 메서드는 배열의 요소들중 특정 조건을 만족하는 요소가 하나 이상 있는지를 확인하는 배열(Array)의 메서드다. 문법은 forEach, map, filter와 거의 비슷하게 첫 번째 파라미터가 콜백 함수를 전달받지만, 앞의 메서드들과는 다르게 boolean 타입의 값을 리턴한다. 문법 const values = [1, 2, 3, 4, 5, 6]; const hasOver5 = values.some((currentElement, index, currentArray) => { console.log(`요소: ${currentElement}`); console.log(`index: ${index}`); console.log(currentArray); return currentElem..
-
[JavaScript] 자바스크립트 filter 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2022. 9. 13. 00:55
Filter 메서드란? filter 메서드는 이름에서도 유추할 수 있듯 특정 조건을 만족하는 요소들을 걸러내는 배열(Array)의 메서드다. 숫자들만 모인 배열에서 특정 값 이상의 숫자들만 모은다거나, 여러 객체들이 모여있는 배열에서 특정 프로퍼티를 가진 값들만 모으는 경우에 유용하게 활용할 수 있다. 문법은 forEach, map과 거의 비슷하게 첫 번째 파라미터가 콜백 함수를 전달받으며, map과 같이 새로운 배열을 리턴한다. 문법 const number = [1, 2, 3, 4, 5]; const newNumber = number.filter((currentElement, index, currentArray) => { console.log(`요소: ${currentElement}`); console..
-
[JavaScript] 자바스크립트 reduce 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2021. 5. 5. 19:35
Reduce 메서드란? 영한사전에서 reduce는 줄이다.라는 의미로 해석된다. 배열의 요소들을 하나씩 줄여가면서 연산하기 때문일까, 다양한 배열의 값들이 하나의 값으로 줄기 때문일까..? reduce 메서드는 map, forEach와 비슷하게 배열의 요소들을 순회하면서 반복적인 연산을 하는 메서드이지만, map과 forEach와는 조금 다른 부분들이 있다. 문법 // reduce const numbers = [1, 2, 3, 4]; numbers.reduce((누산값, 현재요소값, 현재요소의index, 현재배열) => { return 다음누산값; }, 초기누산값); reduce 메서드는 위 코드와 같이 두 개의 파라미터를 가지고 있다. 1. 콜백 함수 첫 번째는 map과 forEach처럼 콜백 함수를 ..
-
[JavaScript] 자바스크립트 전개 구문(spread syntax) 이해하기프로그래밍 이야기/JavaScript 공부 2020. 7. 31. 00:05
전개 구문(Spread Syntax)란? 전개 구문(Spread Syntax)는 ECMAScript6(2015)에서 새로 추가된 문법으로 간단하게 이 문법은 문법 이름 그대로 객체 혹은 배열들을 펼칠 수 있게 해 준다. 문법 // 펼칠 대상이 객체인 경우 {...obj} // 펼칠 대상이 배열인 경우 [...arr] // 혹은 {...arr} 전개 구문의 문법 자체는 정말 간단하다. 그저 배열이나 객체 앞에 점 세 개를 붙여주면 된다. 단, 위 코드에서 확인할 수 있는 것처럼 펼쳐진 객체나 배열을 담을 바구니가 필요하다. 객체는 객체로, 배열은 객체나 배열로 담아낼 수 있다. 예시로 바로 살펴보자. [ 1. 펼칠 대상이 객체인 경우 ] const myObject1 = { laptop: 'MacBook P..
-
[Javascript] 자바스크립트 Object.values 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2020. 7. 27. 00:44
Object.values 메서드란? Obejct.values() 메서드는 메서드를 호출할 때 파라미터로 전달한 객체가 가지는 프로퍼티들의 프로퍼티 값들만 묶어서 배열로 반환해주는 메서드이다. Object.keys()와 거의 비슷하다고 볼 수 있다. 메서드 이름 따라 keys는 key들을 모아서 배열로, Object.values는 value들을 모아서 배열로 만들어 주는 메서드라고 생각하면 되겠다. 문법 Object.values(obj); Object.values 메서드의 기본 문법도 keys메서드와 동일하게 그냥 이름 그대로 Object 객체에 values 메서드를 호출하고 파라미터로 프로퍼티 값을 알아내고자 하는 객체를 전달해주면 된다. const myObject = { name: '싹쓰리', enNa..