javascript
[ 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 의 형태를 가진 걸 삼항 연산자라 하며,..
[ JavaScript ] 자바스크립트 템플릿 리터럴(Template Literal)
템플릿 리터럴(Template Literal)이란 JavaScript 에서 문자열을 입력하는 방식 중 하나로, 기존처럼 작은따옴표( ' )나 큰따옴표( " )를 이용해 사용해 문자를 표현하지 않고, 백틱(Back Tick)이라는 기호( ` )를 사용해 표현하는 방식이다. 템플릿 리터럴 사용해보기 먼저 기존에 사용하던 문자열 표현 방식을 보자. 기존엔 변수들의 값을 문자열로 사용하고 싶으면 위와 같은 형태로 사용했다. 이를 템플릿 리터럴을 적용하면 다음과 같다. 위처럼 백 틱 ( ` ) 을 사용했고 변수의 필드명을 ${ } 로 그대로 할당받을 수 있다. 실행 결과는 다음과 같다. 이상 템플릿 리터럴이었습니다.