🌏 String ( 문자 )
특정한기홀를 통해서 데이터를 손쉽게 만드는 것=리터럴 방식
🌟 String.length
: 문자열의 길이를 알 수 있다.
const str='0123'; console.log(str.length) || console.log('0123') //4 // 공백도 인식이 된다 const str='01 23'; console.log(str.length) || console.log('01 23') //5
🌟 String.prototype.indexOf()
(인덱스 반환할 문자열)
: 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. 일치하는 값이 없으면 -1을 반환한다.
prototype이란?
: prototype을 통해서 지정한 메소드는 메모리에 한번만 만들어지고 new라고 만들어지는 인스턴스에서 언제든지 사용할 수 있다.
매개변수: 찾으려는 문자열, 아무 값도 주어지지 않으면 undefined를 찾으려는 문자열로 사용한다.반환 값: 매개변수의 첫 번째 등장 인덱스, 찾을 수 없으면 -1
예제 )
const result = 'Hello world!'.indexOf('world') //문자데이터 뒤에 indexOf() 붙일 수 있다. console.log(result) //6 const result = 'Hello world!' console.log(result.indexOf('world'); const result = 'Hello world!' console.log(result.indexOf('Yeun') !== -1); //찾으려는 문자열이 있는지 없는지 확인하기 boolean false
🌟 String.prototype.slice
(시작하는 인덱스, 인덱스의 직전까지)
: 문자열의 일부를 추출하면서 새로운 문자열을 반환한다.
( 추출시작점인 0부터 시작하는 인덱스, 직전까지 추출한다.)
해설 )
( 0, 3 )이므로 인덱스 0부터 2까지 짤린다.왜냐하면 오른쪽에 대입한 숫자 3은 3 인덱스 직전까지 반환한다는 뜻이기 때문이다.const str='Hello world!'; // H:0, console.log(str.slice(0,3)) //Hel
🌟 String.prototype.replace()
(교체될 현재 문자열, 교체할 새로운 문자열 )
: 문자열을 교체하여 새로운 문자열로 반환한다.
const str='Hello world!'; console.log(str.replace('world', 'Heropy')); //Hello Heropy! //world 제거하지 const str='Hello world!'; console.log(str.replace('world!', '')); //빈문자열 입력하면 Hello만 출력된다
🌟 String.prototype.match()
: 문자열이 정규식과 매치되는 부분을 검색합니다.
const str = 'therecon@gmail.com' console.log(str.match(/.+(?=@)/))
🌟 String.prototype.trim()
: 앞뒤의 공백을 제거해준다.
🏷 로그인 페이지 만들 때 사용자가 아이디에 공백을 넣었을 때 이 메소드를 이용해서 자동으로 공백을 제거해준다.
const str=' Hello wolrd'; console.log(str.trim()) //앞뒤의 공백문자(띄어쓰기)를 제거한다.
🌏 Math ( 숫자 )
🌟 .toFixed()
(남겨둘 자릿숫자)
: 소숫점의 몇자리까지 남겨둘건지 지정해준다
🏷 string으로 변환된다.
< 변환된 문자데이터를 숫자데이터로 변환하는 법 >
parseInt: 소숫점을 제외한 정수부분만 출력된다. (숫자데이터로 변환)parseFloat: 소숫점을 포함한 모든부분이 출력된다. (숫자데이터로 변환)
const pi = 3.141592658392 consol.log(pi) //3.141592658392 const str = pi.toFixed(2) console.log(str) //3.14 console.log(typeof str) //string // const integer = parseInt(str) //3 (number) const integer = parseFloat(str) //3.14 (number)
🌏 Math ( 수학 )
🌟 .abs ()
(숫자)
: 주어진 숫자의 절대값을 반환한다.
console.log('abs :', Math.abs(-12) ) //abs : 12
🌟 .min ()
(숫자1, 숫자2, 숫자3, ...)
: 함수는 주어진 숫자들 중 가장 작은 값을 반환합니다.
console.log('abs :', Math.min(2, 8) ) //min : 2
🌟 .max ()
(숫자1, 숫자2, 숫자3, ...)
: 함수는 주어진 숫자들 중 가장 큰 값을 반환합니다.
console.log('abs :', Math.max(2, 8) ) //max : 8
🌟 .ceil ()
(숫자)
: 소숫점을 올림처리한다.
console.log('ceil :', Math.ceil(3.14) ) //ceil : 4
🌟 .floor ()
(숫자)
: 소숫점을 내림처리한다.
console.log('floor :', Math.floor(3.14) ) //floor : 3
🌟 .round ()
(숫자)
: 소숫점을 반올림처리한다.
🏷 소숫점이 .5 이상이면 올림처리를 하고 .5 미만이면 내림처리를 한다.
console.log('round :', Math.round(3.14) ) //round : 4
🌟 .random ()
: 0 이상 1 미만의 부동소숫점 난수(랜덤숫자).
console.log('random :', Math.random() //random : 0.21648329294393
예제 )
function random(){ return Math.floor(Math.random()*10) //2 }
🌏 Arrange ( 배열 )
: 인덱스는 0번째부터 시작한다.
- 요소 or 아이템
- 인덱스
- 인덱싱
요소(element): 각각의 요소들 Aplle, Banana, Cherry / 인덱스 : Aplle=[0], Banana=[1], Cherry=[2] / 인덱스 요소 : 인덱스 조회 furits[2]const numbers = [1,2,3,4] const fruits = ['Apple`, `Banana`, `Cherry`] console.log(numbers[1]) //2 console.log(fruits[2]) //Cherry
🌟 .length
: 배열데이터가 가지고 있는 아이템 갯수를 출력해준다.
🏷 .length 출력 값이 0이면 배열 데이터가 비어있다는 것을 알 수 있다.
const numbers = [1, 2, 3, 4] const frutis = ['Apple', 'Banana', 'Cherry'] console.log(numbers.length) //4 console.log(fruits.length) //3 console.log([1, 2].length) //2
🌟 .concat()
(병합할 배열 데이터)
: 두개의 배열 데이터를 병합해서 새로운 배열 데이터를 만들어낸다.
🏷 원본의 배열 데이터는 수정되지 않는다.
const numbers = [1, 2, 3, 4] const frutis = ['Apple', 'Banana', 'Cherry'] console.log(numbers.concat(fruits)) // [1, 2, 3, 4,'Apple', 'Banana', 'Cherry']
🌟 .forEach()
: 메소드가 붙어있는 배열 데이터의 아이템 갯수 만큼 콜백 함수가 반복적으로 실행된다.
const numbers = [1, 2, 3, 4] const frutis = ['Apple', 'Banana', 'Cherry'] fruis.forEach(function(element. index, array){ //index는 i로 축약해 적어도 된다. console.log(element, index, array) })
출력 값 )
Apple 0 (3) ['Apple', 'Banana', 'Cherry'] Banana 1 (3) ['Apple', 'Banana', 'Cherry'] Cherry 2 (3) ['Apple', 'Banana, 'Cherry']
🌟 .map()
: 메소드가 붙어있는 배열 데이터의 아이템 갯수 만큼 콜백 함수가 반복적으로 실행된다.
🏷 원본 데이터를 영향을 주지 않고 새로운 배열 데이터를 반환한다.
📍 .forEach 메서드 : 값이 반환이 안된다.
const numbers = [1, 2, 3, 4] const frutis = ['Apple', 'Banana', 'Cherry'] const a = fruits.forEach(fruit, index){ console.log(`${fruit}-${index}`)} //Apple-0 , Banana-1, Cherry-2 console.log(a) //undefined : 반환이 안된다
📍 .map 메서드
//예제1 const a = fruits.map(fruit, index){ return `${fruit}-${index}` }) console.log(b) //['Apple-0' , 'Banana-1', 'Cherry-2'] //예제2 const b = fruits.map(fruit, index){ return{ id: index, name: fruit } }) console.log(b) // 각각의 아이템의 배열 데이터를 각각 보여준다.
📍.forEach와 .map의 차이
-console.log와 return : .map은 콜백에서 반환된 데이터들의 모음을 새로운 배열로 반환한다.
🌟 .filter()
: 아이템들이 주어진 함수의 조건,기준에 맞는 아이템들만 모아서 새로운 배열 데이터로 반환한다.
🏷 원본 데이터를 영향을 주지 않고 새로운 배열 데이터를 반환한다.
const numbers = [1, 2, 3, 4] const frutis = ['Apple', 'Banana', 'Cherry']
📍
.map() 메서드const a = numbers.map(number => { //콜백함수로부터 얻는 새로운 배열 데이터를 a에 새로 할당한다. return number < 3 }) console.log(a) // [true, true, false, false]
📍
.filter() 메서드const b = numbers.filter(number => { return number < 3 }) console.log(b) // [1,2]
🌟 .find()
: 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
const numbers = [1, 2, 3, 4] const frutis = ['Apple', 'Banana', 'Cherry'] const a=fruits.find(fruit=>{ return /^B/.test(fruit) // 대문자 B로 시작하는 문자 데이터 }) console.log(a) //Banana
🌟 .findIndex()
: 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스 번호를 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
const numbers = [1, 2, 3, 4] const frutis = ['Apple', 'Banana', 'Cherry'] const b=fruits.findIndex(fruit=>{ return /^B/.test(fruit) // 대문자 B로 시작하는 문자 데이터 }) console.log(b) //1
🌟 .includes()
: 인수를 포함하고 있는지의 여부를 알려준다.
const numbers = [1, 2, 3, 4] const frutis = ['Apple', 'Banana', 'Cherry'] const a = numbers.includes(3) console.log(a) //true const a = fruits.includes('Heropy') console.log(b) //false
🌟 .push() 와 .unshift()
: 배열의 앞 또는 끝에 아이템을 추가한다.
🏷 원본이 수정된다!!
const numbers = [1, 2, 3, 4] const frutis = ['Apple', 'Banana', 'Cherry']
📍
.push(): push가 사용 되는 배열 맨끝에 인수 내용을 삽입한다.numbers.push(5) console.log(numbers) //[1, 2, 3, 4, 5]
📍
.unshift(): unshift가 사용 되는 배열 맨앞에 인수 내용을 삽입한다.numbers.unshift(0) console.log(numbers) //[0, 1, 2, 3, 4, 5]
🌟 .reverse()
: 배열 데이터를 거꾸로 뒤집어지게 만든다.
🏷 원본이 수정된다!!
const numbers = [1, 2, 3, 4] const frutis = ['Apple', 'Banana', 'Cherry'] numbers.reverse() //[4, 3, 2, 1] fruits.reverse() //['Cherry', 'Banana', 'Apple']
🌟 .splice()
(인덱스번호, 인덱스 번호로부터 지울 아이템 개수)
(인덱스번호, 인덱스 번호로부터 지울 아이템 개수, 인덱스번호에 끼워넣을 아이템)
🏷 원본이 수정된다!!
📍 아이템 삭제하기
const numbers = [1, 2, 3, 4] const frutis = ['Apple', 'Banana', 'Cherry'] numbers.splice(2,2) //인덱스번호 2에서 아이템 2개를 지워라 console.log(numbers) //[1,2]
📍 아이템 삭제하고 새로운 아이템 끼워넣기!
const numbers = [1, 2, 3, 4] const frutis = ['Apple', 'Banana', 'Cherry'] numbers.splice(2,1,99) //인덱스번호 2에서 아이템 1개를 지우고 그 자리에 99를 끼워넣는다 console.log(numbers) //[1,2, 99,4]
🌏 객체 ( object )
🌟 object.assign()
( 대상객체, 출처객체 )
: 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용한다.
🏷 속성의 이름은 고유해야하기 때문에 속성이름이 겹치면 출처객체의 속성값이 대상객체의 속성값을 덮는다.
해설 : b는 속성이름이 겹치기 때문에 source의 속성값으로 덮었다.
const targer = { a:1, b:2 }; const source = { b:4, c:5}; const returnedTarget. = object.assign( target, source ); console.log(target); //{ a:1, b:4, c:5} console.log(returnObject); //{ a:1, b:4, c:5}
원본데이터를 손상시키지 않고 두개의 출처객체를 합쳐서 새로운 객체데이터에 넣는 방법
( {}, 출처객체, 출처객체 )
원본데이터를 손상시키지 않고 출처객체를 복사해서 새로운 객체데이터를 만드는 방법
( {}, 출처객체 )
🌟 object.keys
키들만 추출되서 새로운 배열 데이터로 만드는것
프로퍼티 name
const user = { name : 'heropy' age : 87 email : 'thesecon@gmail.com' } const keys = Objeect.keys(user) console.log(keys) //['name', ['age', 'email']
🌏 구조 분해 할당
🌟 배열의 구조 분해 할당
: const나 let을 사용해서 객체데이터해서 분해해서 원하는 속성만 꺼내 넣을 수 있다.
const user = { name : 'heropy" age : 86 email : 'thesecon@gmail.com' birth : 'April' } const { name, age, email, number, address='Korea' birth='june' } = user // 만약 변수 이름을 name이 아닌 다른 이름으로 사용하고 싶다면 ex ) name : heropy의 형식으로 작성하여 변경할 수 있다. //user.name과 같이 꺼내쓰는 방식이랑 동일하다! console.log(`사용자의 이름은 ${name}`) //사용자의 이름은 heropy // 1. 객체 데이터에 해당 프로퍼티가 없을 때 : undefined console.log(number) //undefined // 2. 객체 데이터에는 없는 프로퍼티이지만 구조분해할당에서 기본값을 지정할 수 있다. console.log(address) //Korea // 3. 객체 데이터의 값과 구조분해할당에서 지정해준 값이 다를 때 : 객체데이터의 값이 우선이다. console.log( birth) //April
🌟 객체의 구조 분해 할당
const fruits = ['Apple'. 'Banana', 'Cherry'] const[a,b,c,d]=fruits //순서대로 Apple은 a, Banana는 b, Cherry는 c로 들어간다. console.log(a,b,c,d) //여러개중에 하나만 추출하고싶을 때 : 공백으로 대신한다. console.log(, , ,c) //Cherry
🌏 전개 연산자 (spread)
: 전개 연산자( ... )를 통해서 배열데이터로 쉼표로 구분하는 각각의 아이템으로 출력이 된다.
const fruits=['Apple'. 'Banana', 'Cherry'] console.log(fruits) console.log(...fruits) //('Apple'. 'Banana', 'Cherry') function toObject(a,b,c){ return{ a: a, b: b, c: c } } console.log(toObject(...fruits)) // {a:Apple, b:Banana, c:Cherry}
//매개변수 부분에 전개연산자 넣기 : 나머지 매개변수 const fruits=['Apple'. 'Banana', 'Cherry', 'Orange'] console.log(fruits) console.log(...fruits) //('Apple'. 'Banana', 'Cherry', 'Orange') function toObject(a,b,...c){ return{ a: a, b: b, c: c //나머지 매개변수 : 하나의 매개변수에 나머지의 변수(Cherry, Orange)를 다 받는다. } } console.log(toObject(...fruits)) // {a:Apple, b:Banana, c:Array(2)}//번외 : 축약하기 const toObject = (a,b,...c) => ({a,b,c}) 1. 객체데이터를 축약형으로 나타날땐 괄호로 감싸줘야한다. 2. a:a, b:b, c:c와 같이 키와 속성값이 같을 때 a,b,c와 같이 축약해서 작성할 수 있다.
