본문으로 들어가기 전에 변수의 재선언, 재할당, 변수 참조, 그리고 유효범위(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개의 매..
[Javascript] 반복문 for, forEach, map 차이점
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;'을 사용하여야 한다. - 반복문 기능을 지닌 배열 매서드이다. - 배열의 요소를 ..
조건문을 작성할 때, 논리 연산자를 자주 사용하게 된다. 논리 연산자에 따라 주어진 조건의 결과가 true인지 false인지 정해진다. 이러한 논리 연산자의 관계는 진리표를 사용하면 이해하기 쉽다. 목차 진리표란? || (OR) 연산자의 관계 && (AND) 연산자의 관계 1. 진리표란? 진리표(True table)란, 모든 명제나 그 조합에 대한 결과를 정리해놓은 표이다. 논리학에서 사용되는 것인데 자바스크립트 코드를 작성할 때에도 유용하게 사용된다. ∨(또는) 진리표 A B A ∨ B (A 또는 B) true true true true false true false true true false false false A와 B 두 개의 명제 중 하나라도 true이면, 결과도 true이다. 반대로 말해서 ..
일반적으로 함수를 만들 때에는 function 예약어를 사용한다. 일반적인 함수 표현식보다 더 간결하게 표현할 수 있는 방법이 있는데 바로 화살표 함수(arrow function)를 사용하는 것이다. 이 함수의 형태가 화살표처럼 생겨 화살표 함수라는 이름이 지어졌다. 목차 함수의 선언 함수의 호출 함수의 매개변수와 인수 1. 함수의 선언 함수를 다른 곳에서 사용하기 위해서는 이름을 붙여주어야 한다. 일반적으로 사용하는 함수의 형태는 function 뒤에 함수 이름을 바로 적는 데, 이를 함수 선언문(function declaration statement)라고 한다. 이와 다르게 변수나 상수에 대입하는 형식을 함수 표현식(function expression)이라고 한다. 아래 여러 가지 기본 형태를 외워두..
원하는 요소에 접근하기 위해서는 상대 위치, 절대 위치를 사용하면 된다. 요소가 서로 가까운 경우에 상대 위치를 사용하면 되고, 상대 위치를 이용하지 않으면서 원하는 목표 요소에 접근하기 위해서는 절대 위치를 검색하는 방법을 통해 접근할 수 있다. 목차 getElementById(), id 사용하여 검색 querySelectorAll() querySelector() 1. getElementById(), id 사용하여 검색 형식 document.getElementById(selectors); 타이틀입니다. 텍스트입니다. 단, id를 직접 참조하는 경우, 같은 이름의 변수가 선언되면 참조가 불가해진다. 따라서 와 처럼 id를 직접적으로 사용하는 코드는 변수와 충돌할 위험이 있으므로 지양하여야 한다. 타이틀입..