JavaScript

splice, shift, pop, unshift, push 말고도 배열에는 다양한 메소드들이 있습니다.배열에서 특정 값을 찾으려면 indexOf 메소드를 사용하면 됩니다. array.indexOf(item)을 하면 array 배열에 item이 포함되어 있는지 확인할

실습 설명오늘은 풋살 동아리 경기가 있는 날입니다. 총인원 10명이서 5명씩 팀을 나누려고 하는데요.실력이 비슷한 사람들끼리 가위바위보를 했고, 이긴사람이 0번 index, 진 사람이 1번 index 배열을 만들어 정리했습니다.다음 groups 배열을 가지고, 이긴

Date객체처럼 자바스크립트의 내장 객체 중 다양한 연산들을 유용하게 사용하기 위해 Math라는 객체가 있습니다.이번 노트에서는 Math객체의 다양한 메소드에 대해 살펴봅시다.학창 시절 수학 시간에서 배운 '절댓값(absolute value)' 기억하시나요?간단하게 설

문자열도 생각해보면 '문자' + '열'이기 때문에 배열과 비슷한 부분들이 많습니다.실제로 지난 시간에 배열과 문자열 모두 length프로퍼티를 가지고 있고, 대괄호 표기법으로 각 요소에 접근할 수 있다거나..꽤 많은 메소드들이 배열과 문자열 모두 동일하게 사용되는 것도

실습 설명재훈이는 요즘 커피 공부에 빠져 있습니다.에스프레소를 기본으로 하는 커피 메뉴의 레시피를 배웠는데요.아메리카노는 에스프레소에 물을 더한 메뉴이고, 카페라떼는 에스프레소에 우유를 더한 메뉴라고 배웠습니다.그래서 이 레시피를 배열로 한번 정리해 보려고 아래와 같이

자바스크립트에는 variable의 약자를 따서 var라는 키워드로 변수를 선언할 때가 있었습니다.자바스크립트에 변수를 선언하는 방식은 처음부터 let과 const가 아니였던 것이죠!그래서 오래된 프로젝트들이나 혹은 자바스크립트의 정보들을 정리해둔 조금 오랜 시간이 지난

== 는 느슨한 같음(loose equality)으로 두 값이 같은지 비교합니다. 이때, 두 값을 공통 형(type)으로 암묵적으로 변환합니다. 암묵적 변환은 서로 다른 타입이면 Number 타입으로 변환하고 최종 같음 비교는 === 처럼 수행됩니다.=== 는 엄격한

이전 시간에 잠깐 등장했던 HTMLCollection 기억나시나요? 배열과 모양은 같지만, 완벽히 배열은 아닌 이런 형태를 유사 배열이라고 부른다고 했었는데요.당장은 직접 유사 배열을 만들어서 사용하게 될 일은 없겠지만, 지난 시간처럼 자바스크립트로 HTML 태그를 다

배열과 유사한 객체 ex) HTMLCollection, NodeList, DOMTokenList, ... 1.숫자 형태의 indexing이 가능하다. 2.length 프로퍼티가 있다. 3.배열의 기본 메소드를 사용할 수 없다. 4.Array.isArray(유사배열)의

지난 시간에 배운, 요소 노드를 이동시킬 때 사용하는 프로퍼티들을 정리해봅시다.배웠던 그대로 이 프로퍼티들은 노드 중에서도 '요소 노드'인 경우에만 존재하는 프로퍼티들입니다.그럼 요소 노드 말고 텍스트 노드에 접근하고 싶을 땐 어떻게 해야 할까요?만약 요소 노드가 아닌

이전까지는 HTML 태그의 속성을 다룰 때, 대부분 표준 속성들을 사용했을 겁니다.하지만 자바스크립트로 HTML 태그를 다루다 보면 때로는 표준이 아닌 속성을 사용하게 될 때도 있는데요.아래 코드를 한 번 살펴봅시다.위 코드를 보시면 b 태그들의 field 속성과 bu

window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체입니다.자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, 영어로는 Global Object라고 부릅니다.어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체

아직까진 click 이벤트 하나만에 대해서만 배웠는데요, 이 외에도 사용자의 동작에 따라 반응할 수 있는 다양한 이벤트들이 있습니다.이후에도 천천히 살펴볼 예정이지만 어떤 종류의 이벤트들이 있는지 미리 알아두면 필요할 때 알맞은 이벤트 핸들러를 설정할 수 있겠죠?처음에

지난 시간에 이벤트 핸들러의 첫번째 파라미터에는 자동으로 이벤트 객체가 전달된다는 걸 배웠습니다.그리고 그 이벤트 객체는 이벤트 타입에 따라서 갖고 있는 프로퍼티들이 조금씩 다른데요.이번 시간에는 자주 사용되는 이벤트 객체의 프로퍼티들을 한 번 정리해 봅시다.아래의 프

이벤트엔 버블링 이외에도 ‘캡처링(capturing)’ 이라는 흐름이 존재합니다. 실제 코드에서 자주 쓰이진 않지만, 상황에 따라 필요할 수도 있으니 간단하게 살펴봅시다.먼저, 표준 DOM 이벤트에서 정의한 이벤트 흐름에는 3가지 단계가 있습니다.캡처링 단계: 이벤트가

HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에 Element.addEventListener('type', 'handler')를 통해서 이벤트 핸들러를 등록할 수 있습니다.addEventListener 메소드를 활용해서 이벤트 핸들러를 등록했다

마우스 이벤트를 다룰 때 자주 사용되는 이벤트 객체의 프로퍼티인 clientXY, pageXY, offsetXY에 대해서 한 번 더 짚고 넘어갑시다!client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고있는데요. 클라이언트 영역이란 이벤트가

마우스 이벤트 타입에는 mouseover, mouseout과 비슷한 mouseenter와 mouseleave라는 타입이 있습니다.이름에서도 알 수 있듯이 mouseenter는 mouseover처럼 마우스 포인터가 요소 바깥에서 안쪽으로 들어갈 때, mouseleave는

마우스 이벤트 객체의 버튼 프로퍼티를 활용하면, 마우스 버튼을 눌렀을 때 일어난 이벤트에 대해서 어떤 버튼을 눌러서 일어난 이벤트인지를 정확하게 알아낼 수 있습니다.참고로 mouseenter, mouseleave, mouseover, mouseout, mousemove

실습 설명게임을 좋아하는 재우는 이번에 배운 자바스크립트를 활용해서 청기 백기 게임을 만들어 보려고 합니다.업로드중..마우스를 이용해서 마우스 왼쪽 버튼을 누르면 청기(flagBlue)가 올라가고, 마우스 오른쪽 버튼을 누르면 백기(flagWhite)가 올라가도록 기획

실습 설명얼마 전 월급이 오른 효준이는 큰맘 먹고 집을 이사했습니다. 비록 전셋집이지만 나름대로 만족스러운 집을 구했어요.실습 창의 코드는 효준이가 장만한 새로운 집의 평면도를 HTML과 CSS로 구현한 코드입니다. 다만, 코드를 실행해보면 아직 각 공간이 어떤 공간인

실습 설명코드잇 우등생 규리는 최근에 공부한 HTML/CSS, 그리고 자바스크립트를 활용해서 웹으로 간단한 채팅 앱을 만들었습니다. textarea 태그에 메시지를 입력하고 오른편에 있는 send 버튼을 클릭하면 화면에 입력한 메시지가 나오죠.규리가 만든 것처럼 tex

지난 영상에서 Symbol과 BigInt라는 새로운 데이터 타입을 잠깐 살펴봤는데요. 특별한 경우에만 사용되기 때문에 활용 빈도가 높진 않지만, 그래도 어떤 값인지 가볍게 한 번 살펴봅시다.심볼(symbol)은 기본형 데이터 타입(primitive data type)

지금까지 계속해서 자바스크립트의 데이터 타입에 대해서 살펴보고 있는데요. 우리가 사용하는 값이 어떤 데이터 타입을 가지고 있는지 확인하려면 typeof 연산자를 사용해야 합니다.typeof 연산자는 키워드 다음에 공백(띄어쓰기)을 두고 값을 작성해도 되고, 함수를 사용

불린으로 평가 할때 falsy값으로 trㅕthy값으로 평가되는 경우 지난 시간에는 자바스크립트에서 AND와 OR 연산자의 독특한 연산 방식에 대해 알아봤는데요. 아래 코드를 봅시다.파라미터 value로 전달되는 값이 10보다 작으면서 0보다는 크고, 그러면서도 3은 아

ES2020에서 새롭게 추가된 null 병합 연산자에 대해 살펴보겠습니다. 영어로는 'Nullish coalescing operator' 라고 하는데요.물음표 두 개(??)를 사용해서 null 혹은 undefined 값을 가려내는 연산자 입니다.아래 코드를 보세요.ex

자바스크립트에는 8가지 데이터 타입이 있습니다.numberstringbooleanundefinednullobjectsymbolbigint자바스크립트는 데이터 타입이 유연한 프로그래밍 언어입니다. 맥락에 유연하게 변하는 데이터 타입의 특징은 처음엔 생소하고 혼란스러울 수

// 함수를 만드는 방법// 1. 함수 선언(Function Declaration)function 함수이름(파라미터) { 동작 return 리턴값;}// // 2. 함수 표현식(Function Expression)// const printCodeit = functi

함수 표현식으로 함수를 만들 때는 선언하는 함수에 이름을 붙여줄 수도 있는데요.이름이 있는 함수 표현식, 즉 기명 함수 표현식이라고 부릅니다.함수 표현식으로 함수가 할당된 변수에는 자동으로 name이라는 프로퍼티를 가지게 되는데요.이렇게 이름이 없는 함수를 변수에 할당

지금까지 함수를 선언하는 다양한 방법에 대해 살펴봤는데요.함수를 선언하는 것은 함수를 실행하는 것과 다르다는 사실, 모두 알고 계시죠?일반적으로는 이렇게 함수를 먼저 선언한 다음,선언된 함수 이름 뒤에 소괄호를 붙여서 함수를 실행하는데요.그런데 때로는 함수가 선언된 순

자바스크립트에서 함수는 다양한 방식으로 선언할 수 있습니다.가장 일반적인 방법은 function 키워드를 통해 함수를 선언하는 방식인데요.이렇게 작성하는 방식을 함수 선언(function declaration)이라고 합니다.그리고 자바스크립트에서 함수는 값으로 취급될

이번 챕터를 본격적으로 시작하기 전에, 자바스크립트의 다양한 문법들을 이해할 때 알아두면 유용한 기초 개념을 한 번 짚고 넘어가고자 합니다. 바로, 문장과 표현식에 대한 개념인데요. 영어로는 각각 statements와 expressions라고 부릅니다.우리가 작성하는

지난 영상에서 Spread 구문에 대해서 살펴봤습니다. Spread 구문은 특히 배열을 다룰 때 유용하게 활용할 수 있었는데요. 그래서 사실 ES2015에서 Spread 구문이 처음 등장했을 땐 배열에서만 사용이 가능했고, 일반 객체에는 사용할 수가 없었습니다.그러다가

지난시간에 try...catch문을 통해 에러를 다루는 방법에 대해서 살펴봤는데요.try...catch는 사실 finally라는 코드 블록을 하나 더 가질 수 있습니다!finally문은 try...catch문이 끝난 다음에 최종적으로 실행될 코드를 다룰 때 활용하는데요

배열에서 sort라는 메소드를 활용하면 배열을 정렬할 수 있습니다.sort 메소드에 아무런 아규먼트도 전달하지 않을 때는 기본적으로 유니코드에 정의된 문자열 순서에 따라 정렬됩니다.그렇기 때문에 numbers에 sort 메소드를 사용한 것 처럼, 숫자를 정렬할 때는 우

객체는 property name을 통해 이름이 있는 여러 값들을 묶을 때 활용할 수 있고,배열은 index를 통해 순서가 있는 여러 값들을 묶을 때 유용하게 활용할 수 있습니다.그런데 ES2015에서 객체와 비슷한 Map과 배열과 비슷한 Set이라는 데이터 구조가 새롭

배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드입니다. forEach 메소드는 첫 번째 아규먼트로 콜백 함수를 전달받는데요. 콜백 함수의 파라미터에는 각각 배열의 요소, index, 메소드를 호출한 배열이 전달됩니다. (index와 array는 생략가능)for

그동안 배운 문법만 되돌아봐도 모듈 문법은 정말 다양한 방식으로 작성될 수가 있습니다.export를 할 때도 선언문을 export하거나선언된 변수나 함수를 코드 블록으로 묶어서 export할 수도 있고,때로는 as 키워드를 통해 이름을 변경해서 export를 할 수도

모듈은 간단하게, 자바스크립트 파일 하나라고 할 수 있습니다.복잡하고 많은 양의 코드를 기능에 따라 각각의 파일로 나눠 관리하면1.코드를 좀 더 효율적으로 관리할 수 있고,2.비슷한 기능이 필요할 때 다른 프로그램에서 재사용 할 수도 있다는 장점이 있습니다.모듈 파일