JS 마스터

박찬영·2023년 5월 5일

JavaScript

자바스크립트

목록 보기

1/1

JS 시작

💎자바스크립트 기본 문법 정리

😈 String

includes
JavaScript의 "includes" 메소드는 문자열, 배열 또는 유사 배열 객체에서
특정 요소를 포함하는지 여부를 확인합니다.

기본값 : .includes('', 0);  // 숫자 0 은 검색을 시작할 위치

const str = 'hello world';

console.log(str.includes('hello',0)); // true
console.log(str.includes('hello',1)); // false            

const array1 = [1, 2, 3];

console.log(array1.includes(2));  //true
console.log(array1.includes(4));  //false

indexOf
JavaScript의 "indexOf" 메소드는 문자열, 배열 또는 유사 배열 객체에서
특정 요소가 위치한 인덱스(숫자)를 반환합니다.
요소가 배열 또는 문자열 내에 없으면 -1을 반환합니다.

기본값 : .indexOf()

const str = 'hello Python'
             012345678901

console.log(str.indexOf('o')); // 4
console.log(str.indexOf(' ')); // 5
console.log(str.indexOf('z')); // -1

slice
대상 문자의 일부를 추출해 새로운 문자열을 반환합니다.
두 번째 인수 직전까지 추출하고, 두 번째 인수를 생략하면 대상 문자의 끝까지 추출

기본값 : .slice()

const str = 'hello world!!'

console.log(str.slice(0,5)) // 'hello'
console.log(str.slice(1,3)) // 'el'
console.log(str.slice()     // 'hello world'

trim
대상 문자의 앞뒤 공백 문자를 제거한 새로운 문자를 반환합니다.

기본값 : .trim()

const str = '      hello      '

console.log(str.trim());   //  hello

padEnd, padStart
대상 문자의 길이(length)가 지정된 길이보다 작으면,
주어진 문자를 지정된 길이까지 (끝,앞)에 붙여 새로운 문자를 반환
첫번재 인수의 숫자 직전까지 붙인다.

기본값 : .padEnd(), .padStart()

const str = '12345'

console.log(str.padEnd(10, '0')); //  1234500000
console.log(str.padStart(10, '0')); //  0000012345

split
대상 문자를 주어진 구분자로 나눠 새로운 배열로 반환합니다.

기본값 : .split()

const str = 'Apple,Banana,Cherry'

console.log(str.split(','));   // ['Apple','Banana','Cherry']
console.log(str.split(' '));   // ['Apple,Banana,Cherry']

😈 Number

toLocalString
숫자를 현지 언어 형식의 문자로 반환합니다.

기본값 : .toLocalString()

const num = 1000000

console.log(num.toLocalString()); // 1,000,000

Number.parseInt, parseInt
주어진 값(숫자, 문자)를 파싱해 특정 함수의 정수로 반환합니다.
정수로 바꾸고 싶다면 index 값 생략 가능

기본값 : .parseInt()

const str = `3.141592`
const num = 3.141592

console.log(Number.parseInt(str, 10)); // 3
console.log(parseInt(str, 10));		   // 3
console.log(parseInt(str));			   // 3

isNaN
주어진 값이 'NaN'(not a number) 인지 확인합니다.

기본값 : .isNaN()

const num1 = 123
const num2 = 'hello'
const num3 = null
const num4 = '123'

console.log(isNaN(num1));  // false
console.log(isNaN(num2));  // true
console.log(isNaN(num3));  // false
console.log(isNaN(num4));  // true

Number.isInteger()
숫자가 정수인지 아닌지 확인합니다.

기본값 : Number.isInteger()

const num = 123
const pi = 3.14
const stringNum = '123'

console.log(Number.isInteger(num));			// true
console.log(Number.isInteger(pi));			// false
console.log(Number.isInteger(stringNum));	// false

😈 Math

Math.max, Math.min
주어진 숫자 중 가장 (큰,작은) 숫자를 반환합니다.

기본값 : Math.max(), Math.min()

console.log(Math.max(1,2,3,4));	 // 4
console.log(Math.min(1,2,3,4));  // 1

Math.pow, Math.abs
주어진 숫자의 거듭제곱한 값을 반환
주어진 숫자의 절대값을 반환

기본값 : Math.pow(), Math.abs()

console.log(Math.pow(4, 2));	// 16
console.log(Math.abs(-2));		// 2

Math.round, Math.floor, Math.ceil, Math.random
주어진 숫자를 반올림, 내림, 올림, 랜덤숫자(0~1) 출력

기본값 : Math.round(), Math.floor(), Math.ceil(), Math.random()

const pi = 3.14

console.log(Math.round(pi));	// 3
console.log(Math.floor(pi));    // 3
console.log(Math.ceil(pi));     // 4
console.log(Math.random());	    // 0~1

😈 Array

at
배열의 값을 추출합니다.

기본값 : .at()

const arr = [1,2,3,4]

console.log(arr[0]);	 // 1
console.log(arr.at(0));  // 1

concat
대상 배열과 주어진 배열을 병합해 새로운 배열을 반환합니다.

기본값 : .concat()

const arr = [1,2,3]
const arr2 = [4,5,6]

const total = arr.concat(arr2);

console.log(total);				// [1,2,3,4,5,6]

every
대상 배열의 모든 요소가 콜백 함수 테스트에서 참을 반환하는지 확인합니다.

기본값 : .every(() => {})

const arr = [1,2,3,4]

const isValid = arr.every(x => x > 0 )

console.log(isValid);	// true

some
대상 배열의 어떤 요소가 콜백 함수 테스트에서 참을 반환하는지 확인합니다.

기본값 : .some(() => {})

const arr = [1,2,3,4]

const isValid = arr.some(x => x > 3)

console.log(isValid);	// true

filter
주어진 콜백 테스트를 통과하는 모든 요소를 새로운 배열로 반환합니다.
모든 요소가 테스트를 통과하지 못하면 빈 배열 반환

기본값 : .filter(() => {})

const numbers = [1,2,3,4,5]

const filnum = numbers.filter(x => x > 3);

console.log(filnum)	// [4, 5]

//주로 이렇게 사용됨
const user = [
  {name: 'chan', age: 26},
  {name: 'kim', age: 25},
  {name: 'park', age: 24}
]

const superUser = user.filter(x => x.age > 24);

console.log(superUser)	// [{name: 'chan', age: 26},{name: 'kim', age: 25}]

find
대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소를 반환합니다.

기본값 : .find(() => {})

const arr = [5,8,150,13,2]

const foundItem = arr.find(x => x > 4);
const foundItem1 = arr.find(x => x > 20);

console.log(foundItem);	// 8
console.log(foundItem);	// 150

findIndex
대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소의 인덱스를 반환합니다.

기본값 : .findIndex(() => {})

const arr = [5,8,150,13,2]

const foundIndex = arr.findIndex(x => x > 140);

console.log(foundIndex);	// 2

flat
대상 배열의 모든 하위 배열을 지정한 김피까지 이어붙인 새로운 배열 생성합니다.
대부분 Infinity 를 인자로 넣어준다.

기본값 : flat()

const arr = [1,2,3, [4,5,[6,7,[8,9]]]]

console.log(arr.flat());			// [1,2,3,4,5,[6,7]]
console.log(arr.flat(2));		    // [1,2,3,4,5,6,7,[8,9]]
console.log(arr.flat(Infinity));    // [1,2,3,4,5,6,7,8,9]

forEach
대상 배열의 길이만큼 주어진 콜백을 실행후 배열을 반환합니다.

기본값 : forEach(() => {})

const arr = [1, 2, 3]

arr.forEach(x => x * 3);

console.log(arr);	// [3, 6, 9]

includes
대상 배열이 특정 요소를 포함하고 있는지 확인합니다.

기본값 : .includes()

const arr = [1, 2, 3]

console.log(arr.includes(2));	// true

//주의점 - 객체를 찾을때는 변수에 넣어서 찾아주자.
const users = [
  {name: 'chan'},
  {name: 'kim'}
]

console.log(users.includes({name:'chan'}));	// false

const a = users[0]
console.log(users.includes(a));	// true

join
대상 배열의 모든 요소를 구분자로 연결한 문자를 반환합니다.

기본값 : .join()

const arr = ['Apple', 'Banana', 'Cherry']

console.log(arr.join());		// 'Apple,Banana,Cherry'
console.log(arr.join(','));		// 'Apple,Banana,Cherry'
console.log(arr.join('.'));		// 'Apple.Banana.Cherry'
console.log(arr.join('/ '));	// 'Apple/ Banana/ Cherry'

map
대상 배열의 길이만큼 주어진 콜백을 실행하고, 콜백의 반환 값을 모아 새로운 배열을 반환합니다.

기본값 : .map(() => {})

const numbers = [1,2,3,4]

const newNumbers = numbers.map(x => x * 2);

// 객체 사용
const users = [
  {name: 'chan', age: 26},
  {name: 'kim', age: 25},
  {name: 'park', age: 24}
]

const newUsers = users.map(user => ({
  ...users,
  isValid: true,
  email: null
}));

console.log(newUsers); // [
  					  //  {name: 'chan', age: 26, isValid: true, email:null},
  					  //  {name: 'kim', age: 25,  isValid: true, email:null},
  					  //  {name: 'park', age: 24, isValid: true, email:null}
					  // ]

pop, push
pop - 대상 배열에서 마지막 요소를 제거하고 그 요소 반환합니다.
push - 대상 배열에서 마지막 요소를 추가하고 그 요소 반환합니다.
shift - 대상 배열에서 첫번 째 요소를 제거하고 그 요소 반환합니다.
unshift - 대상 배열에서 첫번 째 요소를 제거하고 그 요소 반환합니다.

기본값 : .pop(), .push(), .shift(), .unshift()

const fruits = ['Apple', 'Banana', 'Cherry']

console.log(fruits.pop());				// ['Apple', 'Banana']
console.log(fruits.push('Cherry'));		// ['Apple', 'Banana', 'Cherry']
console.log(fruits.shift())	;			// ['Banana', 'Cherry']
console.log(fruits.unshift('Apple'));	// ['Apple', 'Banana', 'Cherry']

reduce
대상 배열의 길이만큼 주어진 콜백을 실행하고, 마지막에 호출되는 콜백의 반환 값을 반환합니다.
각 콜백의 반환 값은 다음 콜백으로 전달됩니다.

기본값 : .reduce((acc, cur) => {}, 0)

const numbers = [1, 2, 3]

const sum = numbers.reduce((acc, cur) => {
	return acc + cur
}, 0);

console.log(sum);	// 6

//객체 사용
const users = [
  {name: 'chan', age: 26},
  {name: 'kim', age: 25}
]

const arrSum = users.reduce((acc, cur) => {
	acc.push(cur.name)
  	return acc
},[]);

console.log(arrSum);	// [{name: 'chan'},{name: 'kim'}]

reverse, sort
reverse - 대상 배열의 순서를 반전시킵니다.
sort - 대상 배열을 오름차순,내림차순으로 나열시킵니다.
대상 배열 원본이 변경됩니다.

기본값 : .reverse()

const num = [3,4,1,2]

console.log(num.reverse());					// [2,1,4,3]
console.log(num.sort((a, b) => a - b));		// [1,2,3,4]
console.log(num.sort((a, b) => b - a));     // [4,3,2,1]

slice
대상 배열의 일부를 추출해 새로운 배열을 반환합니다.
두 번째 인수 직전까지 추출하고, 두 번째 인수를 생략하면 대상 배열의 끝까지 추출합니다.

기본값 : .slice( , )

const arr = ['a', 'b', 'c', 'd', 'e']

console.log(arr.slice(0,2));	//['a', 'b']
console.log(arr.slice(1,4));	//['b', 'c', 'd']
console.log(arr.slice());		//['a', 'b', 'c', 'd', 'e']

splice
대상 배열에 요소를 추가하거나 삭제하거나 교체합니다.
대상 배열 원본이 변경됩니다.
첫번째 인자 - 시작할 index
두번째 인자 - 제거할 index 개수
세번째 인자 - 추가할 값

기본값 : .splice

const arr = ['a', 'b', 'c']

arr.splice(2,0, 'A');
console.log(arr);	// ['a', 'b', 'A', 'c']

arr.splice(1,3, 'B', 'C', 'D');
console.log(arr);	// ['a', 'B', 'C', 'D']

Array.from
유사 배열(Array-like)을 실제 배열로 반환합니다.

const arraylike = {
  0: 'A',
  1: 'B',
  2: 'C',
  length: 3
}

// .constructor -> 어떤 prototype 으로 만들어졌는지
console.log(arraylike.constructor === Array);	 // false
console.log(arraylike.constructor === Object);   // true

Array.from(arraylike);	// ['A', 'B', 'C']
console.log(arraylike.constructor === Array); 	// true

😈 Object

Object.assign
하나 이상의 객체로부터 대상 객체로 속성을 복사하고 대상 객체를 반환합니다.
대상 객체의 원본 객체는 바뀌지 않습니다.

기본값 : Object.assign()

const target = {a: 1, b: 2}
const source = {a: 1, c: 3}
const source1 = {d: 4, e: 5}

const result = Object.assign(target, source, source1);

console.log(result);	// {a: 1, b: 2}
console.log(target);	// {a: 1, b: 2, c: 3, d: 4, e: 5}

Object.entries
주어진 객체의 각 속성과 값으로 하나의 배열 만들어 요소로 추가한 2차원 배열을 반환

기본값 : Object.entries()

const user = {
  name: 'Chan',
  age: 26,
  isValid: true
}

console.log(Object.entries(user));

// [Array(2), Array(2), Array(2),]
// [['name', 'Chan'], ['age', '26'], ['isValid', 'true']]

Object.keys
주어진 객체의 속성 이름을 나열한 배열을 반환합니다.

const user = {
  name: 'chan',
  age: 26,
  isValid: true
}

console.log(Object.keys(user));	// ['name', 'age', 'isValid']

Object.values
주어진 객체의 속성 값을 나열한 배열을 반환합니다.

const user = {
  name: 'chan',
  age: 26,
  isValid: true
}

console.log(Object.values(user));	// ['chan', 26, true]

박찬영

오류는 도전, 코드는 예술

JS 마스터

자바스크립트

JS 시작

😈 String

includes

indexOf

slice

trim

padEnd, padStart

split

😈 Number

toLocalString

Number.parseInt, parseInt

isNaN

Number.isInteger()

😈 Math

Math.max, Math.min

Math.pow, Math.abs

Math.round, Math.floor, Math.ceil, Math.random

😈 Array

at

concat

every

some

filter

find

findIndex

flat

forEach

includes

join

map

pop, push

reduce

reverse, sort

slice

splice

Array.from

😈 Object

Object.assign

Object.entries

Object.keys

Object.values

0개의 댓글