중첩된 배열의 차원을 낮추는 flat 매서드에 대해서 알아보자. flat() flat 메서드는 배열 안에 배열이 있는 다중 차원의 배열의 차원을 한 단계 낮춰준다. 배열이 일차원이라면 그대로 일차원으로 남는다. flat()의 단점은 속도가 비교적 느리다는 점이다. 구문 1 flat([depth]); cs 기능 1) 다중 차원 배열 평탄화 1 2 3 4 5 6 7 8 const array1 = [1, 2, 3, 4, 5, [6, 7, 8, 9, 10]]; array1.flat(); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const array2 = [1, 2, 3, 4, 5, [6, 7, [8, 9, 10]]]; array2.flat(); // [1, 2, 3, 4, 5, [6, 7,..
ES6부터 구조분해 할당(destructuring assignment)이라는 문법이 등장했다. 말 그대로 어떤 배열이나 객체를 분해한 후 다시 할당하는 것이다. ES5와 ES6를 비교하며 알아보자. 목차 배열 구조분해 할당 객체 구조분해 할당 구조분해 할당 응용 1. 배열 구조분해 할당 1) 형식 ES5 배열의 모든 요소에 접근해 하나씩 변수에 담는 방식이다. 1 2 3 4 5 6 const fruits = ['apple', 'banana', 'kiwi']; const red = fruits[0]; const yellow = fruits[1]; const green = fruits[2]; console.log(red, yellow, green); // apple banana kiwi cs ES6 frui..
누구나 알고 있겠지만 평균을 구할 때에는 저장된 요소의 값을 모두 더하고 그 요소의 개수만큼 나누면 된다. 이렇게 평균값을 구하는 방식을 코드로 작성해보자. 1 2 3 4 const array = [12, 5, 7, 32, 10]; const average = array.reduce((a, c) => a + c) / array.length; console.log(average); // 13.2 Colored by Color Scripter cs 모든 값을 더할 때, reduce라는 매서드를 사용하였다. reduce는 배열에 있는 모든 요소의 값을 합쳐서 새로운 값으로 반환하는 매서드이다. reduce의 형식은 아래와 같다. 1 2 3 array.reduce((accumulator, currentValue..
자바스크립트에서 삼항 연산자(Ternary operator)인 물음표에 대해 알아보자. 주로 if 문을 간단하게 표현하고 싶을 때 사용한다. 참과 거짓 중 하나를 선택할 수 있도록 만든 것으로 '조건 연산자'라고 한다. 목차 2항 연산자와 3항 연산자의 구분 삼항 연산자 구문 표현 삼항 연산자 사용법 다중 삼항 연산 1. 2항 연산자와 3항 연산자의 구분 2항 연산자 3항 연산자 n > 5 n > 5 ? 9 : 2 2. 삼항 연산자 구문 표현 (조건) ? value1 : value2 조건이 참인 경우 물음표 바로 다음에 있는 value1이 실행되며, 거짓이면 value2가 실행된다. 3. 삼항 연산자 사용법 삼항 연산자는 변수에 결괏값을 담아 필요할 때마다 변수를 사용한다. 같은 조건이 if 문과 삼항 ..
본문으로 들어가기 전에 변수의 재선언, 재할당, 변수 참조, 그리고 유효범위(Scope)에 대해서는 아래 페이지에서 참고하면 된다. var, let, const 차이점과 유효범위 (Scope) 작업을 할 때 무의식적으로 var로만 변수를 선언하다가, let이나 const라는 변수를 보면 의아할 것이다. 도대체 왜 변수를 구분해서 쓸까? 사실 ES6 이전에는 let과 const가 존재하지 않았다. ES6에서 let fromnowwon.tistory.com for 문을 사용할 때, 조건식 영역에서 var을 사용할 때와 let을 사용할 때 결괏값이 다르게 나온다. 그 이유에 대해 알아보자. 목차 var, let, const 비교표 for 문에서의 변수 참조 for 문 안에서 함수를 사용할 때 for 문 안에서..
배열 안의 요소를 정렬하기 위해서는 어떤 함수를 사용해야 할까? 자바스크립트 배열 메서드 중에 sort()를 사용하면 된다. sort()에 대해 자세히 알아보자. 목차 sort() 기본 형식 sort() 사용법 1. sort() 기본 형식 array.sort(정렬순서function) sort()의 매개변수 자리에는 정렬 순서를 정의하는 함수가 온다. 생략할 경우 각 요소를 문자열로 변환하고 그 문자열의 유니코드(ASCII)에 따라 오름차순으로 정렬된다. sort()는 정렬이 수정된 기존 배열을 반환하기 때문에 배열이 복사되는 것이 아님에 주의하여야 한다. 2. sort() 사용법 문자 정렬 1 2 3 4 const fruit = ['grape', 'apple', 'melon', 'banana']; // ..
배열 메서드인 slice()는 기존 배열에서 원하는 만큼 가져와 새로운 배열로 반환한다. splice()와 비슷하게 생겼지만, 기능은 다르니 확실하게 구분하여 사용하여야 한다. 목차 slice()와 splice()의 비교 slice() 1. slice()와 splice()의 비교 slice(시작인덱스, 끝인덱스) 시작 인덱스 자리에 있는 요소부터 끝 인덱스 전까지 요소를 추출하여 가져옴 splice(시작요소, 삭제개수, 기존배열추가요소) 시작 요소부터 끝 인덱스까지 추출하여 가져옴 [Javascript] splice 기능 - 배열에서 원하는 요소 제거, 추가 자바스크립트에서 배열의 맨 앞과 맨 뒤 요소를 제거하거나 추가하는 방법은 비교적 간단했다. 그렇다면 원하는 위치의 요소를 제거하거나 다른 값으로 바..
자바스크립트 랜덤으로 숫자를 추출해야 할 경우가 종종 있다. 이러한 난수를 생성하기 위해 사용하는 Math.random() 매서드에 대해 알아보자. 목차 Math.random() 숫자 범위 지정하고, 소수점을 자연수로 바꾸기 무작위 숫자 배열로 추출 1. Math.random() Math.random() 함수는 0부터 1 미만까지 무작위로 부동소수점의 난수를 추출한다. 아래 예제에서 추출된 난수는 새로고침 할 때마다 바뀐다. See the Pen by cw (@fromnowwon) on CodePen. 2. 숫자 범위 지정하고, 소수점을 자연수로 바꾸기 1) 범위 지정하기 랜덤 숫자의 범위를 지정하고, 최댓값에서 최솟값을 빼준 다음 1을 더한다. Math.random() * (최대값 - 최소값) + 최소..
fill()은 배열의 매서드이다. 원하는 값을 배열의 원하는 요소 자리에 채우고 싶을 때 fill() 함수를 사용한다. fill() 함수의 기본 형식부터 여러가지 예제를 살펴보자. 목차 fill() 기본 형식 fill() 기본 예제 음수 인덱스 값 배열 생성 후 fill()로 값 채우기 1. fill() 기본 형식 1 배열명.fill(value, start, end); cs value : 해당 배열 위치에 넣을 값 (필수 값) start : 시작 인덱스 (선택사항, 기본값=0) end : 끝 인덱스 (선택사항, 기본값=배열의 length) 반환값(return 값) : 지정한 value 값을 채운 배열이 반환된다. fill()은 배열이 반환되는 배열의 매서드이다. value, start, end 3개의 매..
for 문, while 문 등 반복문의 종류는 여러 가지가 있다. 배열 매서드인 forEach와 map은 for 문과 어떤 점이 다른지 차이점을 통해서 알아보자. 목차 for() vs. forEach() vs. map() forEach() map() 1. for() vs. forEach() vs. map() for() forEach() map() 기본 형식 for(초기화식; 조건식; 증감식) { 실행문; } 배열명.forEach(function(매개변수) { 실행문; }); 배열명.map(function(매개변수) { 실행문; }); 설명 - 조건식에 부합하면 멈추지 않고 계속해서 순회한다. - 멈추고 싶다면 'break;'을 사용하여야 한다. - 반복문 기능을 지닌 배열 매서드이다. - 배열의 요소를 ..