네이게이션 건너뛰기
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" 사용하기
  • 자바스크립트로 글자수 제한하기
    글자수 제한하기와 말줄임 표시(…)

자바스크립트 반복문(Loop) 소개

JavaScript 다음

자바스크립트 반복문 다루기

자바스크립트에서 반복문의 이해와 반복문을 다루는 방법에 대해 소개합니다.

반복문이란

반복문은 컴퓨터 프로그램에서 특정 작업을 여러 번 반복해서 수행할 수 있도록 도와주는 기능의 구문입니다.
예를 들어, 어떤 작업을 10번 반복해야 할 때, 그 작업을 일일이 10번 적는 대신, 반복문을 사용하면 한 번만 작성하고 10번 반복하도록 할 수 있습니다.

왜 반복문을 사용할까

반복문은 특정 코드를 여러 번 반복해서 실행하고 싶을 때 사용합니다. 마치 같은 일을 여러 번 반복해야 하는 경우, 사람이 직접 일일이 하기보다는 한 번만 입력하고 반복해서 시키는 것처럼 효율적입니다.

반복문을 사용하는 주된 이유는 다음과 같습니다.

같은 일을 반복할 때

  • 1부터 10까지 숫자를 출력한다거나,
  • 리스트에 있는 모든 아이템을 하나씩 처리해야 할 때

조건이 만족될 때까지 반복할 때

  • 사용자가 "종료"라고 입력할 때까지 프로그램을 계속 실행한다거나,
  • 특정 값을 찾을 때까지 데이터를 계속 검색할 때

자바스크립트 반복문 소개

반복문은 특정 코드 블록을 여러 번 반복 실행하는 데 사용되는 자바스크립트의 중요한 문법 요소입니다. 특정 조건이 만족될 때까지 또는 일정 횟수만큼 코드를 반복 실행하여 효율적인 프로그래밍을 가능하게 합니다.

자바스크립트에서 사용되는 반복문 종류

자바스크립트에서 반복문은 특정 코드를 여러 번 반복해서 실행할 때 사용됩니다. 지원하는 반복문은 다음과 같습니다.

자바스크립트 반복문 소개
for 문
특정 횟수나 범위만큼 반복
for 문은 특정 횟수나 범위만큼 반복하는 문입니다. 해당 루프에 연계된 초깃값이 있는 루프 변수가 존재하며, 루프 변수의 비교와 증감을 통해 특정 횟수나 범위만큼 코드 블록을 반복해서 실행할 수 있는 반복문입니다.
for...of 문
이터러블 객체를 순회하는 반복문
for of 문은 자바스크립트에서 이터러블 객체를 순회하는 반복문입니다. 이터러블 객체는 내부 요소를 하나씩 순회할 수 있는 객체를 말합니다. for of 문은 주로 배열, 문자열, Map, Set 등과 같은 컬렉션을 순회하는 데 사용됩니다.
for...in 문
객체의 프로퍼티를 순회하는 반복문
for in 문은 자바스크립트에서 객체의 프로퍼티를 순회하는 반복문입니다. 이 반복문을 사용하여 객체의 모든 열거 가능한 프로퍼티를 순회하고 그 값을 가져올 수 있습니다.
for...in 문과 for...of 문의 차이
비슷해 보이지만 서로 다른 용도와 동작 방식
자바스크립트의 for in 문과 for of 문은 둘 다 반복문이고 비슷해 보이지만 서로 다른 용도와 동작 방식을 가지고 있습니다. for in 문과 for of 문의 차이점에 대해 알아보겠습니다.
while 문
조건식이 참인 동안 반복
while 문은 조건식과 코드 블록으로 구성되며, 조건식이 참인 동안 코드 블록을 반복 실행하는 반복문입니다. 조건식이 거짓이 되면 반복이 종료됩니다. while 문은 if 문이 반복되는 형태로 생각할 수 있습니다.
do...while 문
무조건 한 번 실행 후 조건식이 참인 동안 반복
do while 문은 코드 블록과 조건식으로 구성됩니다. 먼저 코드 블록을 무조건 한 번 실행한 후, 그 다음부터는 조건식이 참인 동안 코드 블록을 실행하는 루프를 만듭니다. 조건식이 거짓이 되면 do while 문은 종료됩니다.
label 문
break나 continue 문이 실행 위치를 참조하는 문
break나 continue 문에는 실행 위치를 참조할 수 있는 레이블(label)을 함께 사용할 수 있습니다. 레이블 문은 이러한 레이블을 지정하는 문으로, 실행 위치에 해당하는 특정한 문(statement) 앞에 레이블로 사용할 식별자를 지정합니다.
break 문
loop, switch, label의 현재 문을 즉시 종료하기
break 문은 반복문, switch 문, label 문에서 사용되며, 실행중인 현재 문을 즉시 종료하고, 다음 코드로 제어를 이동시키는 명령어입니다.
continue 문
반복문의 현재 반복만 건너뛰고 다음 반복으로
continue 문은 현재 반복 또는 레이블이 지정된 루프의 현재 반복에서 남은 코드를 건너뛰고 다음 반복을 즉시 시작하도록 하는 명령어입니다.
break 문과 continue 문의 차이
역할과 동작 방식에 대한 차이점 비교
break 문과 continue 문은 둘 다 반복문에서 흐름 제어에 사용되지만, 역할과 동작 방식이 다릅니다. 두 문을 비교하고 차이점을 설명합니다.
JavaScript 다음

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

Copyright © 옵티안. All Rights Reserved.