본문 바로가기
728x90

javascript

 (6)
1-8 Array Function - forEach and push Array function - forEach map 과 기능이 거의 똑같다! 차이점은 map은 실행결과를 새로운 배열에 담아 반환하지만 forEach는 그저 실행을 할뿐! map()과 forEach()의 비교 map() let rainbow = ["red", "orange", "yellow", "green", "blue", "navy", "purple"]; console.log(rainbow.map((color) => console.log(color))); 모든 배열 요소에 대하여 console.log() 실행, console.log()의 반환값 (undefined, console.log()함수는 리턴값 없는 void)을 모아 새 배열을 리턴함 forEach() let rainbow = ["red", "..
1.7 Array Function - filter Array Function - filter map() 과 사용법과 기능이 매우 유사하다. 모든 배열 요소를 순회하고 새로운 배열을 반환한다. 단, filter()는 모든 배열 요소 중 조건을 만족하는 요소에 한해서만!!!! const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; const multipleOf3 = numbers.filter((num) => num % 3 === 0); console.log(multipleOf3); // [3, 6, 9, 12, 15] const rainbow = ["red", "orange", "yellow", "green", "blue", "navy", "purple"]; const fiveLetters..
1-6. Array function - map Array Function - map() React에서 api로부터의 배열의 데이터를 이용해서 다른 작업을 하게 될 경우, 거의 필수 사용 기능이다. 아래는 MDN에 나와있는 map()정의와 예시이다 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] 즉, array1의 모든 요소에 대하여 *2 의 연산을 수행하고 ! 그 결과를 새로운 배열로 반환하고 ! 그 반환값을 ma..
1-5. Class(클래스) -Class (Javacsript에서도 ES6부터 클래스 형태를 제공해 사용할 수 있다.) 리액트를 하다보면 사용할 수 도 있는 기능이지만 클래스 자체를 깊게 이해할 정도의 필요는 없다! 어떻게 작동하는지에 대해서만 이해하도록 하자. class Baseball { constructor(name, position) { this.name = name; this.position = position; } } Baseball 이라는 클래스를 작성했고, 생성자를 통해 name 과 position을 전달해 Baseball에서 사용할수 있도록 했다. this는 이 클래스(Baseball)을 의미한다. Baseball Class를 어떻게 사용할 수 있을까? const player = new Baseball("Park",..
1-4. Spread Operator (스프레드 연산자) -Spread Operator(스프레드 연산자) 스프레드 연산자는 배열, 문자열, 객체 등에서 "전개"를 위해 사용 1. 배열에서의 전개 (mdn 참고: 스프레드 문법은 1차원 배열에서 효과적으로 동작한다!) - 배열 합치기 아래 두 배열이 있다. const abcd = ["a", "b", "c", "d"]; const efgh = ["e", "f", "g", "h"]; console.log(abcd); // ["a", "b", "c", "d"] console.log(efgh); // ["e", "f", "g", "h"] 두 배열을 합치고 싶다. const arr = [abcd, efgh]; console.log(arr); arr의 출력 결과는 배열 abcd와 배열 efgh를 원소로 갖는 2차원 배열이다..
1-3. 객체 비구조화 할당(Object Destructuring) - Object Destructuring(객체 비구조화) 구조화 된 객체 내 속성을 비 구조화 해 가져다 쓰는 것 color 라는 객체가 있다. const color = { red: "#FF0000", black: "#000000", white: "#FFFFFF", blue: { vivid: "#0000FF", light: "#87CEEB" }, yellow: "#FFFF00" } 이 color의 속성인 red와 blue의 light에 접근하고자 한다면 기존의 방식에서는 const red = color.red; console.log(`red: ${red}, lightblue: ${color.blue.light}`); // red: #FF0000, lightblue: #87CEEB 위와 같이 접근하려는 속..
728x90

티스토리툴바