JS ES6 화살표 함수, 삼항 연산자, 배열
florent의 개발 적응기
이 글의 주요 내용
[화살표 함수(Arrow Function)]
[삼항 연산자(Ternarary Operator)]
[JS ES6 배열 메서드: Map/Filter/Reduce/Find/FindIndex]
[화살표 함수(Arrow Function)]
[화살표 함수란?]
화살표 함수는 ES6에서 도입된 함수 표현식의 간결한 형태
기존의 function 키워드를 사용한 함수 선언 방식에 비해 더 짧은 구문을 제공하며, 자신의 this, arguments, super 또는 new.target을 바인딩하지 않음
화살표 함수는 항상 익명이며, 메서드 함수가 아닌 곳에 쓰는 것이 적합
[화살표 함수의 주요 특징]
간결한 문법
암시적 반환 (return 키워드 생략 가능)
렉시컬 this 바인딩 (자신만의 this를 생성하지 않고 외부 스코프의 this를 사용) ⇒ 상위 함수의 this를 상속받아 사용할 수 있음
[화살표 함수의 표현법]
(1) 기본 형태
(2) 매개변수가 하나인 경우
(3) 매개변수가 없는 경우
(4) 함수 본문이 한 줄인 경우 (암시적 반환)
(5) 객체 리터럴 반환
(6) 즉시 실행 함수 표현식 (IIFE, Immediately Invoked Function Expression)
즉시 실행 함수 표현식이란, 함수 정의와 동시에 즉시 함수를 실행하여 함수의 유효 범위를 제한 → 전역 네임스페이스 오염을 막고 변수 충돌 방지
(7) 고차 함수에서의 사용
(8) 메서드로서의 화살표 함수 (주의: this 바인딩 차이)
[삼항 연산자(Ternarary Operator)]
[삼항 연산자란?]
삼항 연산자(Ternary Operator)는 JavaScript에서 조건에 따라 값을 반환하는 간단한 조건문
'condition ? expressionIfTrue : expressionIfFalse' 형태로 사용되며, if-else 문을 더 간결하게 표현할 수 있음
[삼항 연산자 사용 예시]
[JS ES6 배열 메서드: Map/Filter/Reduce/Find/FindIndex]
(1) Map (매핑)
배열의 모든 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 생성
원본 배열은 변경되지 않음
각 요소를 변환하거나 처리할 때 유용
(2) Filter (필터링)
주어진 함수의 조건을 만족하는 요소만을 모아 새로운 배열을 만듬
원본 배열은 변경되지 않음
특정 조건에 맞는 요소만 선택할 때 사용
(3) Reduce (축소)
배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환
배열의 요소들을 하나의 값으로 줄여나갈 때 사용
합계 계산, 평균 계산 등에 유용
(참고) || 연산자는 왼쪽 피연산자가 "Truthy" 값이면 그 값을 반환하고, 그렇지 않으면 오른쪽 피연산자를 반환
(4) Find (찾기)
주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환
조건을 만족하는 요소가 없으면 undefined를 반환
특정 조건을 만족하는 단일 요소를 찾을 때 사용
(5) FindIndex (인덱스 찾기)
주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환
조건을 만족하는 요소가 없으면 -1을 반환
특정 조건을 만족하는 요소의 위치를 찾을 때 사용
