JavaScript 35
22.05.09 map 의 결과가 undefined 일 경우 skip

map 을 돌릴 때 undefined 인 결과는 skip 하고 싶다고 할 때, 다음과 같은 배열이 있다. const array = [1, 2, 3, 4, 5] 나는 홀수만 남기고 싶어서 map을 사용하여 array.map(item => { if((item%2)){ return item } }) undefined 제거하고 싶으면 그냥 뒤에 filter 붙이면 된다. array.map(item => { if((item%2)){ return item } }).filter(element => element) 사실 위와 같이 간단한 경우는 굳이 map 을 사용하지 않고 filter 하나만 사용하면 정제가 가능하다. array.filter(item => item%2) 하지만 객체 속성의 값에 대한 비교와 정제를 할..
JavaScript 2022.05.10

22.05.09 배열 평탄화 flatMap

map을 무작정 돌리면 안좋은 점이 배열 안에 불필요하게 감싸는 배열이 생길 수 있다는 점이다. 복잡한 객체를 원하는 간단한 배열로 바꿀 때 여러 메소드들이 필요하다. 그 중 flatMap 이라는 메소드는 현재 실험 단계의 js 메소드이다. 작동 방식은 reduce 와 concat 을 함께 쓴 것과 똑같이 작동한다. let arr1 = ["it's Sunny in", "", "California"] 다음과 같은 배열에서 띄어쓰기를 기준으로 단어를 나누고 싶을 때, arr1.map(x=>x.split(" ")) 그냥 map 을 돌리면 각각 요소에 대한 배열을 큰 배열이 감싸져 있는 형태로 반환된다. arr2.flatMap(x => x.split(" ")) flatMap 을 돌리면 필요없는 큰 배열과 각각의..
JavaScript 2022.05.09

22.05.08 객체에서 속성 찾기 hasOwnProperty 와 in

생성자 함수를 이해하고 나니 조금 무슨 말인지 이해가 가서 다시 정리!! 객체 하나가 있다고 해보자. 예시는 간단한 객체이지만 데이터를 정제하는 실상황에서는 아주 복잡한 객체일 가능성이 높다. 그렇다면 이 객체에서 내가 찾고 싶은 속성이 있는지 존재하는지 확인하는 방법은 아래 두가지 함수를 활용할 수 있다. const person = { name: 'jeje', age: 26 } 1. hasOwnProperty() [객체명].hasOwnProperty('[찾을 속성명]') 2. in '[속성명]' in [객체명] MDN 왈, in 연산과는 다르게 이 메소드는 객체의 프로토타입 체인을 확인하지는 않는다. 내가 이해한 것으로는 hasOwnProperty 은 in 과 다르게 toString() 와 같이 객체로..
JavaScript 2022.05.08

22.05.08 객체와 toString()

나는 toString() 이 그냥 문자형으로 바꿔주는 함수인줄만 알고 있었다. toString() 은 문자열을 반환하는 Object 의 대표적인 방법이라고 하는데 이게 무슨 말?! 일단, 생성자 함수는 다음과 같다고 하자. function Dog(name){ this.name = name } const dog1 = new Dog('Podo') 생성자 함수에 관한 내용은 아래 참고하기! 2022.05.08 - [JavaScript] - 22.05.08 생성자 함수와 new 연산자 Dog.prototype.toString = function dogToString(){ return `${this.name}` } 객체의 속성에 대한 값을 문자열로 보여준다는 것인가? 음 그러면 dog1 의 성별을 생성자 함수에서..
JavaScript 2022.05.08

22.05.08 생성자와 return 문

생성자 함수에는 보통 return 문이 없다. 반환되야 하는 것은 모두 this 에 저장되고 this 는 자동으로 반환되기 때문에 따로 반환문을 쓸 필요가 없는 것이다. 만약 return 문을 붙인다면? 1. 객체를 return 한다면 this 대신 객체가 반환된다. 2. 원시형을 return 한다면 return 문이 무시된다. 한마디로, return 객체 외에는 무시해버리고 this 를 반환하는 것이다. ▶ return 뒤에 객체를 넣은 경우, 객체를 반환 function BigUser() { this.name = '원숭이' return {name: '고릴라'} } ▶ return 뒤에 아무것도 넣지 않은 경우, this 를 반환 function BigUser() { this.name = '원숭이' ..
JavaScript 2022.05.08

22.05.08 생성자 함수와 new 연산자

자바스크립트는 파도 파도 새롭네 Javascript is Wave Wave New 객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있다. 만약 유사한 객체를 여러 개 만들어야 하는 경우가 생긴다면, new 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다. 생성자 함수의 두가지 규칙 1. 함수 이름의 첫글자는 대문자로 시작한다. 2. 반드시 'new' 연산자를 붙여 실행한다. function User(name){ this.name = name this.isAdmin = false } 위 생성자 함수의 작동 원리는 1. name 변수값이 인자로 들어오면 2. 빈 객체를 만들어 this 에 할당한다. 3. 함수 본문을 실행한다. 본문에 대한 this 에 새로운 속성을 추가하여..
JavaScript 2022.05.08
1 2 3 4
더보기

티스토리툴바