All Story
[ JavaScript ] 자바스크립트 filter( ) 함수와 find( ) 함수
저번 포스팅에서 배열에서 map( ) 함수로 값을 빼오는 법을 다루었다. 그럼 배열에서 특정 조건만 주어 조건에 해당하는 값들만 걸러내려면 어떻게 해야 할까? 이럴 때 사용하는 것이 주로 filter( ) 함수, find( ) 함수이다. 예제를 보며 이해해보도록 하자. filter( ) 함수 영어 뜻 그대로 배열의 값들 중 특정 조건이 true인 값들을 다 걸러내준다. 아래의 코드를 보자. const arr1 = [10, 20, 30, 40, 50]; //값이 30 이상인 값 구하기 const result1 = arr1.filter(item => item>30); console.log("값이 30 이상인 값 구하기"); console.log(result1); //값이 40 인 값 구하기 const res..
[ JavaScript ] 자바스크립트 map( ) 함수
값을 여러개 가지고 있는 배열에서 모든 값을 꺼내고자 할 때, 꺼내는 방법은 정말 다양하게 알려져 있다. 이번 포스팅에선 이러한 배열에서 값 꺼내는 방법 중 map( ) 을 다뤄보도록 하자. 아래와 같은 배열 arr 이 있다고 가정해 보자. let arr = [ 10, 20, 30, 40, 50 ]; arr 배열의 5 개의 값을 전부 꺼내 콘솔에 찍어보고 싶다면 아래처럼 for 문을 이용한 분들도 많았을 것이다. const arr = [ 10, 20, 30, 40, 50 ]; //기본 for문 방식 console.log("기본 for문"); for(let index = 0 ; index < arr.length ; index++) { console.log(arr[index]); } //향상된 for문 방식..
[ JavaScript ] 자바스크립트 배열 concat
만약 [ 1, 2, 3 ] 이렇게 세 개의 값을 가지고 있는 배열 arr 가 있다고 가정할 때, 4 를 배열 arr 에 추가 하고 싶다면 push 메서드를 이용하는 경우가 대부분일 것이다. push 를 사용하는 것이 안 좋다는 말은 아님을 분명히 짚고 넘어가며, 리액트 등의 특정 환경에서는 배열안의 본래 값을 수정하면 안되는 경우도 존재함에 concat 사용을 권장한다. push 는 본 배열안에 값을 직접적으로 박아넣어버리는 개념이고, concat 은 배열을 하나 복사해 이 복사본에 값을 박아버리는 개념이라고 생각하면 된다. 예제 코드를 살펴보자. let arr = [ 1, 2, 3 ]; arr.push(4); // [ 1, 2, 3, 4 ] console.log(arr); 서론에서 언급한대로 [ 1, ..
[ JavaScript ] 자바스크립트 화살표 함수
화살표 함수(Arrow Function)? 기존의 JavaScript 의 일반 function 대신에 ES6 부터는 보다 간략하게 함수를 정의할 수 있는 화살표 함수(Arrow Function)을 제공한다. 화살표 함수의 기본적인 문법과 일반 함수와 차이점에 대해 알아보자. 화살표 함수 기본 문법 1. 매개변수(인자)를 사용할 경우 // 매개변수가 없을 경우 () => { ... } // 매개변수가 하나일 경우 - 소괄호 생략 가능 data => { ... } (data) => { ... } // 매개변수가 두 개 이상일 경우 = 소괄호 생략 불가 (data1, data2, data3) => { ... } 매개변수가 하나일 경우 소괄호 ( ) 를 생략 가능하고 두 개 이상일 때는 불가능하다는 것만 짚고 ..
[ JavaScript ] 자바스크립트 삼항 연산자, && 연산자, || 연산자
삼항 연산자 우리는 어떠한 조건을 수행하는 로직을 작성할 때 보통 if 문을 사용해 아래와 같이 표현하곤 한다. const done = true; if(done === true) { const result = '참'; } else { const result = '거짓'; } console.log(result); //참 이러한 if 문 ~ else 문을 삼항 연산자를 사용하면 보다 요약적이게 작성가능하다. 위의 코드를 삼항 연산자를 이용해 작성하면 아래와 같다. const done = true; //삼항연산자 const result1 = done === true ? '참' : '거짓'; console.log(result1); //참 이처럼 조건 ? 결과1 : 결과2 의 형태를 가진 걸 삼항 연산자라 하며,..