[React/JavaScript] 리액트 개발에 자주 사용하는 자바스크립트 문법 - 1

Sohyerim·2025년 12월 5일
JavaScriptReactjs리액트문법자바스크립트

JavaScript

목록 보기
3/3
post-thumbnail

1. ES6 화살표 함수

  • 화살표 함수는 함수 표현식의 대안으로 간결하게 함수를 정의할 수 있으며, 익명 함수로도 정의가 가능하다. 실행할 코드가 하나만 있다면, 함수 본문의 중괄호 생략이 가능하며 함수의 코드가 자동으로 리턴값으로 사용된다. 매개 변수가 하나만 있다면 매개변수의 괄호 또한 생략이 가능하다.
    화살표 함수 예시
// 기존 함수 표현식
const add = function(x, y) {
  return x + y;
};

// 화살표 함수
const add = (x, y) => {
  return x + y;
};

// 화살표 함수 축약
const add = (x, y) => x + y ;

// -----------------------------------

// 기존 함수 표현식
const add10 = function(x) {
  return x + 10;
};

// 화살표 함수
const add10 = (x) => {
  return x + 10;
};

// 화살표 함수 축약
const add10 = x => x + 10;

2. 구조 분해 할당(Destructuring assignment)

  • 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있는 표현식을 말한다.
    배열 구조 분해 
const player = ['손흥민', '이강인', '김민재'];
const [one, two, three] = player;
console.log(one, two, three); // 손흥민, 이강인, 김민재

객체 구조 분해 

const so = { userName: '소혜림', userAge: 34 };
const {userName, userAge: age} = so;
console.log(userName, age); // 소혜림 34

3. 나머지 매개변수 (Rest parameters)

  • 정해지지 않은 수의 매개변수를 배열로 전달 받으며, 함수의 마지막 매개변수 앞에 ...을 붙인다.
function fn(a, b, ...args) {
  console.log(a, b, args);
}

fn(); // undefined undefined []
fn(1); // 1 undefined []
fn(2, 3); / 2 3 []
fn(7, 8, 9, 10, 11); // 7, 8, [9, 10, 11]

4. 전개 구문(Spread syntax)

  • 배열이나 객체의 요소, 속성을 분해해서 배열, 객체, 함수에 전달하는 것으로 이터러블 객체(배열, 객체 등)를 손쉽게 복사할 수 있다.
  • 배열, 객체의 리터럴이나 함수의 인자값 변수 앞에 ...을 붙이며, 나머지 매개변수는 여러 매개변수를 하나의 배열로 압축하는 반면 전개 연산자는 하나의 배열 객체를 여러 개의 요소, 속성으로 분해해서 전달한다.
const state = ['orange', 'yellow', 'green'];
const newState = [...state]; // ['ornage', 'yellow', 'green']

const state2 = {name: '하츄핑', age: 10};
const newState2 = {...state2}; // {name: '하츄핑', age: 10}

function sum(x, y) {
  return x+ y;
}
const numbers = [1, 2];
console.log(sum(...numbers)); //3

5. 삼항 연산자 (조건부 연산자)

  • 조건에 따라 값을 선택하는 연산자다.
  • 조건 ? 참일 때의 값 : 거짓일 때의 값;
const num = 10;
const result = num & 2 === 0 ? '짝수' : '홀수';
console.log(result); // '짝수'

6. 배열 메서드

6-1 배열 요소 추가/제거

1) push(...items): number

  • 배열의 마지막 위치에 items 요소들을 추가하고 새로운 배열 길이를 반환한다.

2) pop(): string|undefined

  • 배열의 마지막 요소를 제거하고 반환한다.
const fruits = ['사과', '바나나'];

const newLength = fruits.push('오렌지');
console.log(newLength, fruits); // 3 ['사과', '바나나', '오렌지']

fruits.push('딸기', '포도');
console.log(fruits); // ['사과', '바나나', '오렌지', '딸기', '포도']

let lastFruit = fruits.pop();
console.log(lastFruit, fruits); 포도 ['사과', '바나나', '오렌지', '딸기']

lastFruit = fruits.pop();
console.log(lastFruit, fruits); 딸기 ['사과', '바나나', '오렌지']

3) unshift(...items): number

  • 배열의 맨앞에 items 요소들을 삽입하고 새로운 배열 길이를 반환한다.

4) shift():string|undefined

  • 배열의 첫 번째 요소를 제거하고 반환한다.
const fruits = ['사과', '바나나'];

const newLength = fruits.unshift('딸기');
console.log(newLength, fruits); // 3 ['딸기', '사과', '바나나']

fruits.unshift('딸기', '포도');
console.log(fruits); // ['딸기', '포도', '딸기', '사과', '바나나']

let firstFruit = fruits.shift();
console.log(firstFruit, fruits); // 딸기 ['포도', '딸기', '사과', '바나나']

firstFruit = fruits.shift();
consolo.log(firstFruit, fruits); // 포도 ['딸기', '사과', '바나나']

5) splice(start:number, deleteCount?:number, ...items):any[]

  • 배열에서 요소를 추가, 제거 또는 교체한다.
  • start: 시작 인덱스
  • deleteCount: 제거할 요소 수
  • items: 삽입할 요소 목록
const arr1 = ['신라면', '열라면', '비빔면', '오징어짬뽕', '육개장', '왕뚜껑', '삼양라면'];

let arr2 = arr1.splice(1, 2); // 인덱스 1부터 2개 추출
console.log(arr1, arr2); // ['신라면', '오징어짬뽕', '육개장', '왕뚜껑', '삼양라면'] ['열라면', '비빔면']
arr2 = arr1.splice(2, 2); // 인덱스 2부터 2개 추출
console.log(arr1, arr2); // ['신라면', '오징어짬뽕', '삼양라면'] ['육개장', '왕뚜껑']

arr2= arr1.splice(2); // 인덱스 2부터 끝까지 추출
console.log(arr1, arr2); // ['신라면', '오징어짬뽕'] ['삼양라면']

arr2 = arr1.splice(1, 1, '진라면', '불닭볶음면'); // 인덱스 1부터 1개 추출하고 진라면, 불닭볶음면 추가
console.log(arr1, arr2); // ['신라면', '진라면', '불닭볶음면'] ['오징어짬뽕']

6) slice(start?:number, end?:number):any[]

  • 배열의 지정한 범위를 복사해서 새 배열로 반환한다.
  • start: 시작 인덱스(기본값 0)
  • end: 종료 인덱스(기본값 length)
const arr1 = ['토끼', '사자', '호랑이', '강아지', '고양이', '기니피그', '돼지'];

let arr2 = arr1.slice(1, 3); // 인덱스 1부터 3 앞까지 복사
console.log(arr2); // ['사자', '호랑이']

arr2 = arr1.slice(2, 2); // 인덱스 2부터 2 앞까지 복사
console.log(arr2); // []

arr2 = arr1.slice(5); // 인덱스 5부터 끝까지 복사
console.log(arr2); // ['기니피그', '돼지']

arr2 = arr.slice(-2); //인덱스 -2부터 끝가지 복사
console.log(arr2); // ['기니피그', '돼지']

console.log(arr1); // ['토끼', '사자', '호랑이', '강아지', '고양이', '기니피그', '돼지']

7) concat(...items): any[]

  • items 배열들을 병합한 새로운 배열을 반환한다.
const arr = ['오렌지', '딸기', '레몬'];
const arr2 = arr.concat(['사과', '바나나'], ['포도']);
console.log(arr2.includes('사과')); // true

console.log(arr); // [ '오렌지', '딸기', '레몬' ]
console.log(arr2); // [ '오렌지', '딸기', '레몬', '사과', '바나나', '포도' ]

6-2 배열 요소 검색

1) indexOf(searchElement, fromIndex?:number):number

  • 배열의 요소 중 searchElement와 일치하는 첫 번째 요소의 인덱스를 반환. 일치하는 요소가 없으면 -1을 반환한다.
  • fromIndex: 지정한 인덱스부터 탐색을 시작(기본값 0)
    2) lastIndexOf(searchElement, fromIndex?:number):number
  • 배열의 요소 중 searchElement와 일치하는 마지막 요소의 인덱스를 반환. 일치하는 요소가 없으면 -1을 반환한다.
  • fromIndex: 지정한 인덱스부터 탐색을 시작 (기본값 0)
    3) includes(searchElement, fromIndex?:number):boolean
  • 배열의 요소 중 searchElement 값이 있는지 여부를 반환한다.
  • fromIndex: 지정한 인덱스부터 탐색을 시작 (기본값 0)
const arr = [1, 3, 5, 8, 9, 3, 4, 5];
console.log('첫 번째 3의 위치', arr.indexOf(3)); // 첫 번째 3의 위치 1
console.log('마지막 3의 위치', arr.lastIndexOf(3)); // 마지막 3의 위치 5

const arr2 = ['오렌지', '딸기', '레몬'];
console.log(arr2.includes('레몬')); //true
console.log(arr2.includes('사과')); // false

6-3 배열 반복 메서드

1) forEach(callbackFn(currentValue, index, array), thisArg?): void

  • 배열의 각 요소에 대해 callbackFn 함수를 실행한다.
  • 콜백 함수의 currentValue에는 배열의 요소가, Index에는 전달되는 요소의 인덱스가, array에는 원본 배열이 전달된다.
  • thisArg는 콜백 함수에서 this로 사용할 객체를 전달한다.
  • 리턴값이 없다.
    2) map(callbackFn(currentValue, index, array), thisArg?):any[]
  • forEach와 동일하게 동작한다.
  • forEach는 리턴값이 없지만 map은 콜백 함수에서 리턴한 값을 새로운 배열로 만들어서 반환한다.
const arr = [10, 20, 30];
let newArr: number[] = [];

// 배열의 각 요소를 순회하며 실행
arr.forEach((elem, i) => {
  	newArr.push(elem **2);
});
console.log('forEach', newArr); // [100, 400, 900]

// 배열의 각 요소를 순회하며 반환받은 값으로 새로운 배열 생성
const newArr2 = arr.map(function(elem, i) {
  // 요소의 제곱값 반환
  return elem **2;
});
console.log('map', newArr2); // [100, 400, 900]

3) find(callbackFn, thisArg?):any|undefined

  • 배열의 각 요소에 대해 callbackFn 함수가 호출된다.
  • true를 반환한 첫 콜백 함수에 전달된 엘리먼트가 find의 결과로 반환된다.
  • true를 반환한 콜백 함수가 없을 경우 undefined가 반환된다.
    4) findIndex(callbackFn, thisArg?):number
  • 배열의 각 요소에 대해 callbackFn 함수가 호출된다.
  • true를 반환한 첫 콜백 함수에 전달된 인덱스가 findIndex의 결과로 반환된다.
  • true를 반환한 콜백 함수가 없을 경우 -1이 반환된다.
    5) filter(callbackFn, thisArg?): any[]
  • 배열의 각 요소에 대해 callbackFn 함수가 호출된다.
  • true를 반환한 콜백 함수에 전달된 요소만 모아서 새로운 배열로 반환한다.
  • true를 반환한 콜백 함수가 없을 경우 빈 배열이 반환된다.
const arr = [1, 3, 5, 8, 9, 3, 4, 5];
console.log(arr.find(num => num % 2 === 0)); // 8
console.log(arr.findIndex(num => num % 2 === 0)); // 3
console.log(arr.filter(n => n % 2 === 0)); // [8, 4]

6) some(callbackFn, thisArg?):boolean

  • 배열의 각 요소에 대해 callbackFn 함수가 호출된다.
  • 콜백 함수 중 하나라도 true를 반환하면 some은 true를 반환한다.
  • 콜백 함수 전부 true를 반환하지 않으면 some은 false를 반환한다.
    7) every(callbackFn, thisArg?)boolean
  • 배열의 각 요소에 대해 callbackFn 함수가 호출된다.
  • 콜백 함수 전부 true를 반환하면 every는 true를 반환한다.
  • 콜백 함수 중 하나라도 true를 반환하지 않으면 every는 false를 반환한다.
const arr = [1, 2, 3];
const hasEven = arr.some(n => n % 2 === 0); // true
const isAllEven = arr.every(n => n % 2 === 0); // false

console.log(hasEven, isAllEven); // true false

8) reduce(callbackFn(accumulator, currentValue, index, array), initialValue?):any

  • 배열의 각 요소에 대해 제공한 리듀서 함수를 실행한다.
  • 이전 리듀서의 반환값이 다음 리듀서의 인자값으로 전달되며 최종적으로 하나의 결과값을 반환한다.
  • 리듀서가 처음 실행되면 "이전 리듀서의 반환값"이 없으므로 reduce 함수의 두 번째 인자로 전달하는 값을 사용하거나 두번째 인자가 생략될 경우 배열의 Index 0 값이 지정되고 배열의 두 번째 요소부터 리듀서가 실행된다.
const arr = [1, 2, 3, 4];
const initialValue = 0;
const sum = arr.reduce(function(accumulator, currentValue){
  return accumulator + currentValue
}, initialValue);

console.log(sum); // 0 + 1 + 2 + 3 + 4 = 10
profile
Sohyerim
웹 프론트엔드 개발자를 꿈꾸고 있습니다.
이전 포스트

[JavaScript] 동기/비동기 방식, async/defer

0개의 댓글