Coding Story/JAVASCRIPT
[ 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)이라는 기호( ` )를 사용해 표현하는 방식이다. 템플릿 리터럴 사용해보기 먼저 기존에 사용하던 문자열 표현 방식을 보자. 기존엔 변수들의 값을 문자열로 사용하고 싶으면 위와 같은 형태로 사용했다. 이를 템플릿 리터럴을 적용하면 다음과 같다. 위처럼 백 틱 ( ` ) 을 사용했고 변수의 필드명을 ${ } 로 그대로 할당받을 수 있다. 실행 결과는 다음과 같다. 이상 템플릿 리터럴이었습니다.
[ JavaScript ] 자바스크립트 var, let, const 의 차이
보통 JavaScript 에서 변수를 선언할 때 "var" 로 선언하곤 한다. 이 외에도 "let" 이나 "const" 가 존재하는데, 이 세 가지의 변수 선언 방법의 차이에 대해 알아보자. 1. "var"는 함수 단위, "let"과 "const"는 블럭 단위의 스코프(범위)를 가진다. 무슨 말인가 하니, 먼저 var 를 아래처럼 선언해놨다고 가정하자. 이를 실행해 콘솔에 찍히는 1~5번 a를 확인해보면, 3번 a에서 var a = 100 ; 을 선언했더니 4번 a와 5번 a도 100으로 바뀌어 찍히는 걸 확인할 수 있다. 이는 1번 a에서 var 변수를 이미 할당해놓았고, 하위의 모든 블럭내에서 a를 재선언하면, 최초 선언된 a변수가 전역변수로써 기능을 수행하기에 새로 만들어내는 것이 아니라 이 a를 ..