네이게이션 건너뛰기
codingEverybody
  • HTML
  • CSS
  • JavaScript
  • PHP
  • JavaScript 소개
  • 문자열
  • URL
  • 반복문
  • 배열
  • DOM 요소 및 텍스트 다루기
  • DOM 요소 속성 다루기
  • DOM 요소 스타일 다루기
  • 유용한 코드 스니펫
JavaScript
  • 자바스크립트 소개
  • HTML에 자바스크립트 적용과 연결하는 방법
    웹 페이지에 자바스크립트를 어떻게 넣나요?
  • 변수 선언 방법과 유효 범위
    var, let, const의 차이와 사용 사례
  • undefined 값
    변수에 값이 할당되지 않은 상태의 값
  • null 값
    값이 없음을 명시적으로 나타내는 값
  • undefined와 null 값의 차이점
    undefined와 null 값 비교하기
  • typeof 연산자
    변수의 데이터 타입 확인
  • 삼항 (조건) 연산자
    조건에 따라 다른 값을 선택하는 연산자
  • length 속성 이해
    문자열, 배열, 유사 배열의 길이 반환
  • 프로토타입 상속
    객체 지향 프로그래밍을 이해하는 새로운 방법
  • 스프레드(…) 문법
    객체 항목을 펼쳐서 나열하는 쉬운 방법
  • Rest 파라미터
    인수의 개수가 고정되지 않는 함수 만들기
  • 즉시 실행 함수
    변수 호이스팅과 스코프의 오염 방지하기
  • 화살표 함수
    화살표 함수와 일반 함수의 차이점 이해
  • 생성자 함수
    새로운 객체를 생성하는 틀 역할을 하는 함수
JavaScript 문자열
  • 자바스크립트 문자열 소개
  • 템플릿 리터럴 - 백틱
    템플릿 리터럴로 문자열 다루기
  • length
    문자열의 길이 반환
  • split()
    문자열을 분리해서 배열로 변환
  • trim()
    문자열 앞뒤 공백 제거
  • toUpperCase()
    문자열을 대문자로 변환
  • toLowerCase()
    문자열을 소문자로 변환
  • charAt()
    인덱스 위치에 해당하는 문자를 반환
  • includes()
    문자열에 특정 문자열 포함 여부 확인
  • indexOf()
    특정 문자열의 처음 등장한 위치 찾기
  • lastIndexOf()
    특정 문자열의 마지막 등장한 위치 찾기
  • startsWith()
    특정 문자열로 시작하는지 체크
  • endsWith()
    특정 문자열로 끝나는지 체크
  • slice()
    문자열의 특정 범위 잘라서 가져오기
  • substring()
    문자열의 부분 문자열 추출
  • search()
    정규식으로 일치하는 문자열을 찾아 인덱스로 반환
  • replace()
    문자열을 다른 문자열로 교체
  • match()
    정규식으로 일치하는 첫 번째 문자열을 배열로 반환
JavaScript URL
  • 자바스크립트 URL 소개
  • URL 인코딩 함수 비교
    인코딩 함수의 사용 목적과 차이점 비교하기
  • encodeURI()
    일부 특수문자를 제외한 URI를 인코딩
  • encodeURIComponent()
    URI Component를 인코딩
  • URL 디코딩 함수 비교
    디코딩 함수의 사용 목적과 차이점 비교하기
  • decodeURI()
    encodeURI()로 인코딩한 URL을 디코딩
  • decodeURIComponent()
    인코딩한 URI Component를 디코딩
JavaScript 반복문
  • 자바스크립트 반복문(Loop) 소개
  • for 문
    특정 횟수나 범위만큼 반복
  • for...of 문
    이터러블 객체를 순회하는 반복문
  • for...in 문
    객체의 프로퍼티를 순회하는 반복문
  • for...in 문과 for...of 문의 차이
    비슷해 보이지만 서로 다른 용도와 동작 방식
  • while 문
    조건식이 참인 동안 반복
  • do...while 문
    무조건 한 번 실행 후 조건식이 참인 동안 반복
  • label 문
    break나 continue 문이 실행 위치를 참조하는 문
  • break 문
    loop, switch, label의 현재 문을 즉시 종료하기
  • continue 문
    반복문의 현재 반복만 건너뛰고 다음 반복으로
  • break 문과 continue 문의 차이
    역할과 동작 방식에 대한 차이점 비교
JavaScript 배열
  • 자바스크립트 배열 소개
  • 배열의 선언과 초기화
    다양한 방법으로 배열을 선언하고 초기화하기
  • length
    배열의 길이 반환
  • isArray()
    변수의 배열 타입 확인
  • forEach()
    배열의 각 요소를 순회해서 콜백 함수로 처리
  • map()
    배열을 순회해서 처리한 새로운 배열을 반환
  • filter()
    배열 값을 필터링한 배열로 생성
  • map()과 filter()의 차이점
    요소를 순회하는 목적과 처리하는 방법
  • join()
    배열을 문자열로 변환
  • sort()
    배열 요소를 원하는 정렬 순서로 변경
  • reverse()
    배열 요소 역순 정렬
  • includes()
    배열에 특정 요소 포함 여부 확인
  • indexOf()
    배열에서 요소의 위치 찾기
  • findIndex()
    배열에서 콜백 함수로 특정 요소의 인덱스 찾기
  • find()
    배열에서 콜백 함수로 특정 요소 찾기
  • some()
    배열의 특정 조건을 만족하는 요소가 있는지 확인
  • every()
    배열의 모든 요소가 특정 조건을 만족하는지 확인
  • reduce()
    콜백 함수로 배열을 하나의 결과 값으로 생성
  • slice()
    배열의 특정 범위 요소 잘라서 가져오기
  • unshift()
    배열 시작 부분에 요소 추가
  • shift()
    배열의 첫 번째 요소 제거
  • push()
    배열 끝에 요소 추가
  • pop()
    배열의 마지막 요소 제거
  • concat()
    배열끼리 합치기
JavaScript DOM 요소 및 텍스트
  • 자바스크립트 DOM 요소 및 텍스트 다루기
  • DOM의 특정 요소 찾기
    id, 태그, 클래스, CSS 선택자로 요소를 직접 찾기
  • getElementById()
    id 값으로 요소 찾기
  • getElementsByTagName()
    태그 이름과 일치하는 모든 요소 찾기
  • getElementsByClassName()
    클래스 이름과 일치하는 모든 요소 찾기
  • querySelector()
    CSS 선택자와 일치하는 첫 번째 요소 찾기
  • querySelectorAll()
    CSS 선택자와 일치하는 모든 요소 찾기
  • querySelector()와 querySelectorAll() 비교
    반환 객체의 형태와 다루는 방식 비교하기
  • DOM 계층 관계로 요소 찾기
    조상, 부모, 자식, 형제 관계로 요소 찾기
  • closest()
    CSS 선택자와 일치하는 가장 가까운 조상 요소 찾기
  • parentElement
    부모 요소 찾기
  • children
    자식 요소 목록 찾기
  • firstElementChild
    첫 번째 자식 요소 찾기
  • lastElementChild
    마지막 자식 요소 찾기
  • previousElementSibling
    바로 이전 형제 요소 찾기
  • nextElementSibling
    바로 다음 형제 요소 찾기
  • DOM 컬렉션
    유사 배열인 요소들의 집합
  • HTMLCollection
    HTML 요소만을 모아둔 객체
  • NodeList
    HTML 요소 객체와 모든 노드를 모아둔 객체
  • HTMLCollection과 NodeList
    반환 객체와 다루는 방식 비교하기
  • DOM 생성하기
    DOM 객체를 생성하는 함수들
  • createElement()
    새로운 HTML 요소를 생성
  • createTextNode()
    새로운 텍스트 노드를 생성
  • createDocumentFragment()
    새로운 DocumentFragment 객체를 생성
  • DOM 요소 복제하기
    cloneNode()
  • DOM 콘텐츠 조작하기
    DOM 요소의 콘텐츠를 조작하는 속성들
  • textContent
    요소의 텍스트를 가져오거나 설정하기
  • innerText
    렌더링된 요소의 텍스트를 가져오거나 설정하기
  • innerHTML
    요소의 내부 HTML 콘텐츠를 가져오거나 설정하기
  • DOM 삽입, 교체 및 제거하기
    요소 추가, 교체 및 제거를 위한 핵심 함수들
  • appendChild()
    자식 요소 추가
  • insertBefore()
    지정한 자식 요소 앞에 삽입
  • insertAdjacentText()
    요소의 인접한 위치에 텍스트 삽입
  • insertAdjacentHTML()
    요소의 인접한 위치에 HTML 코드 삽입
  • insertAdjacentElement()
    요소의 인접한 위치에 DOM 요소 노드 삽입
  • replaceChild()
    자식 요소 교체
  • removeChild()
    자식 요소 제거
  • remove()
    자신을 호출한 요소를 DOM에서 제거
JavaScript DOM 요소 속성
  • 자바스크립트 DOM 요소 속성 다루기
  • DOM 요소 속성을 다루는 공통 함수
    요소 속성을 동적으로 관리하기 위한 핵심 함수들
  • getAttribute()
    요소에서 속성 값 가져오기
  • setAttribute()
    요소에 속성 값 설정이나 속성 추가하기
  • removeAttribute()
    요소에서 지정한 속성 제거하기
  • hasAttribute()
    요소에 지정한 속성이 있는지 체크하기
  • toggleAttribute()
    요소에 부울 속성 추가/제거 상태 바꾸기
  • 요소의 클래스 속성 다루기
    classList 객체의 이해와 클래스 속성 다루기
  • classList.add()
    요소에 클래스 값 추가하기
  • classList.remove()
    요소에서 클래스 값 제거하기
  • classList.toggle()
    요소에 클래스 값이 없으면 추가, 있으면 제거하기
  • classList.replace()
    요소에 클래스 값 교체하기
  • classList.contains()
    요소에 지정한 클래스 값이 있는지 체크하기
JavaScript DOM 요소 스타일
  • 자바스크립트 DOM 요소 스타일
  • 요소 스타일 가져오기
    요소의 CSS 스타일 속성값 가져오기
  • 요소 스타일 설정하기
    요소의 CSS 스타일 속성값 설정하기
  • 자바스크립트로 CSS 변수 제어하기
    CSS에서 사용하는 변수의 접근과 설정
JavaScript 유용한 코드 스니펫
  • 자바스크립트 유용한 코드 스니펫 소개
  • 자바스크립트 strict mode
    "use strict" 사용하기
  • 자바스크립트로 글자수 제한하기
    글자수 제한하기와 말줄임 표시(…)

자바스크립트 배열 소개

JavaScript 다음

자바스크립트 배열 다루기

자바스크립트 배열 관련 함수
배열의 선언과 초기화
다양한 방법으로 배열을 선언하고 초기화하기
자바스크립트에서 배열의 선언과 초기화는 배열을 생성하고, 그 배열에 초깃값을 할당하는 것을 의미합니다. 다양한 방법으로 배열을 선언하고 초기화할 수 있습니다.
length
배열의 길이 반환
배열에서 length 속성은 배열에 포함된 요소(혹은 원소)의 개수를 숫자로 반환합니다. 빈 배열은 length가 0입니다. 배열에서 length 속성을 사용할 때 참고해야 하는 사용법에 대해서 다룹니다.
isArray()
변수의 배열 타입 확인
자바스크립트에서 배열인지 확인하려면 Array.isArray() 메서드를 사용할 수 있습니다. 이 함수는 전달된 값이 배열인지 여부를 부울(Boolean) 형태로 반환합니다.
forEach()
배열의 각 요소를 순회해서 콜백 함수로 처리
자바스크립트의 forEach() 함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수입니다. 배열의 각 요소에 대해 주어진 콜백 함수를 적용해서 순서대로 한 번씩 실행합니다.
map()
배열을 순회해서 처리한 새로운 배열을 반환
배열에서 map() 함수는 배열의 각 요소를 순회하여 콜백 함수를 적용한 결과를 모아 새로운 배열을 반환하는 함수입니다. 원본 배열은 변경하지 않습니다.
filter()
배열 값을 필터링한 배열로 생성
filter() 함수는 배열의 요소를 순회하면서 콜백 함수를 사용하여 원하는 조건에 따라 필터링하고 필터링된 배열을 반환하는 함수입니다.
map()과 filter()의 차이점
요소를 순회하는 목적과 처리하는 방법
자바스크립트 배열에서 map()과 filter() 함수는 모두 배열의 요소를 순회하고 새로운 배열을 반환하지만, 요소를 순회하는 목적과 처리하는 방법이 다릅니다.
join()
배열을 문자열로 변환
join() 함수는 자바스크립트에서 배열의 각 요소를 지정된 구분자로 연결(join)하여 하나의 문자열로 반환하는 함수입니다. 이 함수는 배열을 문자열로 변환하는 간편하고 유용한 방법을 제공합니다.
sort()
배열 요소를 원하는 정렬 순서로 변경
자바스크립트 배열 sort() 함수는 배열 요소를 원하는 정렬 순서로 변경(sort)하는 함수입니다. 이 함수는 기본적으로 문자열의 유니코드 코드 포인트를 기준으로 오름차순으로 정렬하지만, 숫자 등 다른 데이터 타입을 정렬하려면 콜백 함수를 사용해서 원하는 정렬 순서로 변경할 수 있습니다.
reverse()
배열 요소 역순 정렬
자바스크립트 배열 reverse() 함수는 배열의 요소 순서를 역순(reverse)으로 정렬합니다. 즉, 첫 번째 요소는 마지막 요소가 되고 마지막 요소는 첫 번째 요소가 됩니다. reverse() 함수는 원본 배열을 직접 수정하며, 새로운 배열을 반환하지 않습니다.
includes()
배열에 특정 요소 포함 여부 확인
자바스크립트 배열 includes() 함수는 배열에 특정 요소가 포함하는지 확인하는 함수입니다. 배열에서 주어진 요소가 포함되어 있으면 true를 그렇지 않으면 false를 반환합니다.
indexOf()
배열에서 요소의 위치 찾기
자바스크립트 배열 indexOf() 함수는 배열과 관련된 프로토타입 메서드(Array 인스턴스)로, 배열에서 인수로 전달된 요소를 찾아 첫 번째로 검색된(등장한) 요소의 인덱스를 반환합니다. 인수로 전달된 요소를 찾을 수 없다면 -1을 반환합니다. indexOf() 함수는 배열에서 요소의 위치를 찾거나, 존재하는지 확인할 때 유용한 함수입니다.
findIndex()
배열에서 콜백 함수로 특정 요소의 인덱스 찾기
findIndex() 함수는 배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소의 인덱스를 반환하는 함수입니다. 배열의 각 요소에 대해 콜백 함수를 사용하여 원하는 조건의 요소를 찾습니다. 이 함수는 배열에서 특정 요소의 인덱스를 찾는 데 유용합니다.
find()
배열에서 콜백 함수로 특정 요소 찾기
find() 함수는 배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소를 반환하는 함수입니다. 배열의 각 요소에 대해 콜백 함수를 사용하여 원하는 조건의 요소를 찾습니다. 이 함수는 배열에서 특정 요소를 찾는 데 유용합니다.
some()
배열의 특정 조건을 만족하는 요소가 있는지 확인
배열의 some() 함수는 배열의 특정 조건을 만족하는 요소가 있는지 확인합니다. 하나의 요소라도 조건을 만족하면 true를 반환하고 그렇지 않으면 false를 반환합니다.
every()
배열의 모든 요소가 특정 조건을 만족하는지 확인
배열의 every() 함수는 배열의 모든 요소가 특정 조건을 만족하는지 확인합니다. 모든 요소가 조건을 만족하면 true를 반환하고, 하나라도 조건을 만족하지 않으면 false를 반환합니다.
reduce()
콜백 함수로 배열을 하나의 결과 값으로 생성
reduce() 함수는 배열의 모든 요소에 콜백 함수를 적용하여 하나의 결과 값을 생성하는 함수입니다. 배열의 요소들을 하나로 줄여(reduce) 집계한 값을 반환합니다.
slice()
배열의 특정 범위 요소 잘라서 가져오기
자바스크립트 배열 slice() 함수는 배열의 특정 범위의 요소를 잘라내어(slice) 추출한 결과를 새로운 배열로 반환하는 함수입니다. 이 함수를 사용하여 배열의 원하는 범위의 요소를 잘라서 추출할 수 있습니다.
unshift()
배열 시작 부분에 요소 추가
unshift() 함수는 배열의 시작 부분에(unshift, 위치 변경 없이 앞에서) 하나 이상의 요소를 추가하는 데 사용됩니다. unshift() 함수의 사용 방법과 활용 예제에 대해 알아보겠습니다. 그리고, unshift() 함수를 사용한 배열 요소의 역순 배열에 대해서도 알아봅니다.
shift()
배열의 첫 번째 요소 제거
shift() 함수는 배열의 시작 부분에서(shift, 앞 부분으로 빼내듯이 이동시켜) 첫 번째 요소를 제거하고 제거한 요소의 값을 반환합니다. shift() 함수의 사용 방법과 사용 예제, 주의할 점과 여러 상황에 대해 알아봅니다.
push()
배열 끝에 요소 추가
push() 함수는 배열의 끝(마지막)에 하나 이상의 요소를 추가(push, 뒤에서 밀어 넣기)하는 데 사용됩니다. push() 함수의 사용 방법과 사용 예제에 대해 알아봅니다. 그리고, push() 함수로 객체(object)를 추가하는 예제에 대해서도 살펴봅니다.
pop()
배열의 마지막 요소 제거
pop() 함수는 배열의 맨 마지막 끝의 요소를 제거(pop, 맨 아래의 것을 위로 쏙 빼내는)하고 제거한 요소를 반환합니다. pop() 함수의 사용 방법과 사용 예제, 주의할 점과 여러 상황에 대해 알아봅니다.
concat()
배열끼리 합치기
concat() 함수는 두 개 이상의 배열을 순서대로 하나씩 연결(concatenate, 연결시키다)하여 새로운 배열을 반환하는 함수입니다. concat() 함수의 기본 사용법을 살펴보고, 중복 요소를 제거하는 방법 등에 대해 살펴봅니다.
JavaScript 다음

codingEverybody는 모든 사람을 위한 코딩 학습서입니다.
모든 자료와 예제는 오류를 방지하기 위해 지속적으로 검토되지만 완전한 정확성을 보증할 수는 없습니다.
따라서, 모든 자료와 예제를 신뢰하기 전에 스스로의 판단에 따라 오류, 버그, 취약점이 없는지 신중하게 테스트하고 검토해야 합니다.
크리에이티브 커먼즈 저작자표시-저작자표시 4.0 국제 에 따라 사용할 수 있습니다.

Copyright © 옵티안. All Rights Reserved.