배열 관련 내장함수 : map
(여러개의 데이터를 한 번에 다른 형태로 변환하기 위해서 사용)
const numbers = [1, 2, 3];
문법 : const doubleNumberArray = numbers.map( (num) => {
배열의 원소인 숫자 1,2,3에서 각 실행됨 매개변수(이름 원하는 대로)
returm num * 2;
});
console.log(numbers); //[ 1, 2, 3 ]
console.log(doubleNumArray); // [2, 4, 6]
자바스크립트 요약
1. 화살표 함수
- 문법 : const 무념상 = () => {
console.log('코딩천재');
}
- 생략 1. 정확한 argument 가 있는 경우 괄호 생략
const callMe = name => {
console.log(name);
}
- 생략 2. value 를 return 할 때
const returnMe = name => name
아래와 같다
const returnMe = name => {
return name;
}
2. Exports & Imports
- export 유형 1. default
export default ...;
- export 유형 2. named
export const someData = ...;
- default exports 를 import 하기
import someNameOfYourChoice from './path/to/file.js';
임의로 설정 가능
- Named exports 를 import 하기
imort { someData } from ' ./path/to/file.js ';
- 한번에 모든 Named exports 를 import 하기
import * as upToYou from ' ./path/to/file.js';
- 한번에 모든 Named exports 를 import 하기 2
export const someData = ...(path/to/file.js)
upToYou.someData
(upToYou는 모든 exported 변수/함수를 하나의 자바스크립트 객체에 모은다.)
- Classes 사용하기 전 구식 버전으로 객체에 프로퍼티 정의하기
class Person {
constructor () {
this.name = 'Max';
}
}
const person = new Person();
consloe.log(person,name); // prints 'Max'
- 최신 버전으로 class 프로퍼티 정의하기
class Person {
name = 'Max';
}
const person = new Person();
consle.log(person.name)
- 최신버전으로 class 메소드 정의하기
반복적인 프로그래밍 피하기 위해
메소드 이름 { // 선언부 //구현부 }
메소드 호출 1. 객체참조변수이름.메소드이름();
2. 객체참조변수이름.메소드이름(인수1, 인수2,...)
(ex. Car myCar = new Car(); // 객체를 생성
myCar.accelerate(60,3); // myCar 인스턴스의 accelerate() 메소드를 호출함.
class Person {
name = 'Max';
printMyName () => {
console.log(this.name);
}
}
const person = new Person();
person,printMyName();
console.log(person.species);
아 몰랑
- Spread 오퍼레이터로 배열에서 요소 가져오기
const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4,5];
- Spread 오퍼레이터로 객체에서 가져오기
const oldObject = {
name: 'Max'
};
const newObject = {
...oldObject,
age : 28
};
-Destructurig 을 사용해서 배열에 엑세스하기
const array = [1, 2, 3];
const [a, b] = array;
console.log(a); // prints 1
console.log(b); // prints 2
console.log(array); // prints [1, 2, 3]
-Destructuring 을 사용해서 객체에 액세스하기
const myObj = {
name: 'Max',
age: 28
}
const {name} = myObj;
console.log(name); // prints 'Max'
console.log(age); // prints undefined
console.log(myObj); // prints 1{name: 'Max', age:28 }
- Destructuring 을 이용해 인자를 가진 함수에 적용
(구버전)
const printNme = (personObj) => {
console.log(personObj.name);
}
printName({name: 'Max', age: 28}); // prints 'Max'
(신버전)
const printName = ({name}) => {
console.log(name);
}
printName({name: 'Max', age:28}) // prints 'Max'
- 배열 함수 map()
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1); // Array [2, 8, 18, 32]
- 배열 함수 find()
(제공된 테스트 함수를 만족하는 배열의 첫번째 원소 반환)
const array 1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found); // 12
- 배열 함수 findIdex()
(제공된 테스트 함수를 만족하는 배열의 첫번째 원소의 인덱스 반환)
const array1 = [5, 12, 8, 130, 44};
const inLageNumber = (element) => element > 13
console.log(array1.findIndex(isLargeNumber)); // 3 (3번째)
- 배열 함수 filter()
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']
const result = wodrs.filter(word => word.length > 6);
console. log (result); // ["exuberant", "destruction", "present']
대충 이해는 간다 그래도...
- 배열 함수 splice()
삭제 : splice(인덱스 순서, 삭제할 값의 갯수)
추가 : splice(인덱스 슨서, 삭제할 값은 0, 추가할 숫자들)
대체 : splice(인덱스 순서, 삭제 할 값의 갯수, 대체할 숫자들)