JavaScript

JavaScript ES6 (ECMAScript 2015 또는 ECMAScript 6)은 ECMA-262 기술 규격에 따라 정의하고 있는 2015년에 도입된 최신 버전의 JavaScript를 말한다.ES6 버전에서 var 이외에 let, const가 추가되었다.가장 큰

use strict (엄격모드)란? - 암묵적인 "느슨한 모드(sloppy mode)"를 해제하고, 명시적인 "엄격 모드(Strict Mode)"를 사용하는 방법을 말한다.

템플릿 리터럴이란 따옴표 대신 백틱(\`\`)을 사용해 문자열을 표기하는 방식을 말한다.ES6 이전에선 아래와 같이 띄어쓰기를 할 때의 번거로움이 있었다.ES6 이후에선 변수를 ${}로 감싸주면 자동으로 띄어쓰기가 된다.연산도 가능하다!템플릿 리터럴은 멀티 라인을 지

▶ 표현식(Expressions) > 표현식은 프로그램에서 값으로 평가될 수 있는 코드 조각을 의미한다. 무슨 말인지 이해가 되지 않았다. 천천히 살펴보자. ▷ 값으로 평가되는 표현식 값으로 평가된다라는 말이 무슨 뜻일까❓ "값으로 평가된다"는 뜻은 코드를 실행했

# ▶자료형 > JS의 모든 값은 자료형을 갖는다. 총 7개의 자료형을 제공하며, 자료형은 <span style="color:indianred">원시형</span>과 <span style="color:indianred">참조형(객체, 함수, 배열)</span>으로 분

《 원시형과 참조형 》의 구분 기준은 값의 저장 방식과, 불변성 여부이다.불변성이란? 한 번 생성된 값이 변경되지 않는 특성을 말한다.원시 값은 변경 불가능한 값이지만 (불변성 가짐), 객체는 변경 가능한 값이다. (불변성 가지지 않음)원시 값을 변수에 할당하면 변수에

- 불변 객체의 정의 - 객체를 예로 들면, 객체의 속성에 접근해서 값을 변경하면 가변이 성립하고, 객체 데이터 자체를 변경(새로운 데이터를 할당)하고자 한다.

▶ 문자형으로 변환 > String(value) 함수 호출 ▶ 숫자형으로 변환 > Number(value) 함수 호출 > 숫자형으로 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어난다. > 숫자형으로 변환 시 적용되는 규칙 | 전달받은 값 | 형 변환 후

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다. 이 때 연산의 대상을 피연산자(Operand)라고 한다.피연산자도 평가되어 하나의 값이 되므로 표현식이고 피연산자를 연산자와 결합한 연산자 표현식도 물론 표

var, let, const는 JavaScript에서 변수를 선언할 때 사용하는 키워드이다.스코프(scope)란 변수나 함수를 참조할 수 있는 범위를 말한다. 즉, 스코프는 변수나 함수가 어디에서부터 어디까지 유효한지를 결정한다.블록 스코프(block scope)란 변

forfor (초기식; 조건식; 증감식) { 반복적으로 실행할 코드 } Untitledfor in객체의 속성을 하나씩 돌아가면서 알아보는 방법이다. (객체의 속성 순회)임의의 순서로 객체의 속성들에 대해 반복한다. (⚠️단, 임의의 순서로 반복하기 때문에 인덱스의 순서

var, let, const는 JavaScript에서 변수를 선언할 때 사용한다.ES6 이후부터 var은 사용하지 않는 추세이며 재할당이 필요한 경우에만 let을 사용한다.var은 let, const와 다르게 같은 스코프 내에서 중복 선언을 허용한다.아래 코드와 같이

객체나 배열에 저장된 데이터 일부를 사용하기 위해 변수로 분해하여 사용할 수 있게 해주는 것을 말한다. 이 배열에서 첫 번째 요소와 두 번째 요소를 각각 변수 a와 b에 할당하려면 기존 방식으로는 다음과 같이 작성해야 합니다.하지만 구조 분해 할당을 사용하면 다음과 같

전개 구문(spread operator)이란?배열이나 객체를 전개하는 문법으로, 《 구조 분해 할당 》과 함께 정말 많이 사용된다.문법배열이나 객체 앞에 점 세 개를 붙여주면 된다. 배열짜잔!🎇배열에 4를 추가하고 싶다면? 《 push 》를 사용해도 좋지만, 전개 구

실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 말한다.js는 어떤 실행 컨텍스트가 활성화되는 시점에 다음과 같은 일이 일어난다.선언된 변수를 위로 끌어올린다. = 호이스팅(hoisting)외부 환경 정보를 구성한다.this 값을 설정한다.이런 현상들 때문에 JS에

호이스팅이란 코드 실행 전 변수나 함수를 찾아 스코프 내에서 최상단으로 끌어올려주는 것을 말한다.아래 코드는 변수 a를 선언하기 전에 a를 출력하려고 하기 때문에, 일반적인 상황에서는 오류가 발생한다.하지만, JavaScript는 호이스팅을 통해 변수 선언을 스코프의

실행 시 Hello JS! 를 콘솔에 출력하는 프로그램을 작성하세요.디렉토리 생성하여 코드 관리Hello JS! 를 콘솔에 출력파일 실행 결과실행 시 매개변수를 가져와 인사를 출력하는 함수 helloSomeone을 작성하세요. 매개변수로는 문자열, 숫자, NaN, un

객체란 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.객체는 속성(Attribute)과 메서드(Method)를 가지고 있다.자바스크립트는 원시값을 제외한 모든 것이 객체이다.→ 이것이 무슨 말이냐?질문1) 무조건 속성은 키+값으로 구성

배열이 아닌데 배열인 척 하는 애들을 유사 배열 객체(=유사 배열)이라고 한다.즉, 배열처럼 사용할 순 있지만 배열과 관련된 메소드를 사용할 수 없다. (push(), pop(), slice() 등)그렇다면 왜 배열이 아닌 유사배열 객체를 사용할까?배열은 다양한 메서드

단축 속성명 (property shorthand)을 사용하면, 객체(object)의 key와 value 값이 같다면, 생략이 가능하다!아래의 객체는 key와 value의 값이 같다.따라서 아래와 같이 생략이 가능하다 !

▶ 배열 ▷ 배열 만들기 연관된 데이터를 정리정돈해서 단순화시키기 위해 배열을 사용한다. 문자가 따옴표(")로시작해서 따옴표로 끝나는 것처럼, 배열은 대괄호( [ )로 사작해서 대괄호( ] )로 끝난다. 대괄호 안에 여러가지 값을 적을 수 있다. 값과 값 사이는 ,(컴

배열의 각 요소에 대해 주어진 함수를 순서대로 한 번씩 실행하는 메서드이다. (배열 요소 순환 처리)map() 메서드와 거의 비슷하지만, return 하는 값이 없다!forEach 메서드는 파라미터와 함께 배열의 각 요소에 적용하게 될 《 콜백 함수 》를 전달한다.콜백

개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되는 것을 말한다.타입 강제 변환(Type Coercion)이라고도 한다.문자열에서 +는 문자열 연결 연산자로 이용된다. 문자열 연결 시 피연산자 중 문자열 타입이 아닌 경우 문자열로 바

5월 17일, 영민이는 학교에 떨어져 있는 의문의 구슬을 만지자 갑자기 타임워프를 할 수 있는 능력이 생겼습니다. 이를 실험하고자 time.js를 만들었지만, 아쉽게도 time.js를 작성하는 도중 타임워프를 해 코드가 다 완성하지 못했습니다. 여러분들은 미완성인 ti

메모이제이션이란? 메모이제이션이란 말 그대로 메모를 하는 것이다. 복잡한 함수의 결과를 저장(메모)해두고, 나중에 같은 입력이 들어오면 저장된 결과를 사용하여 불필요한 계산을 줄이는 최적화 기법이다. 이로 인해 프로그램이 더 빨리 실행된다.

클로저를 이해하기 위헤 먼저 어휘적 스코프에 대해서 이해를 해야한다.어휘적 스코프는 선언된 환경이 무엇인가에 대해 말하는 것이다. 우리가 이전에 공부한 Scope의 대한 개념으로 코드를 함께보자위 코드의 어휘적 스코프는 어디일까?myName이 전역 환경에 선언되었으니

js는 프로토타입 기반의 언어라고 불린다.자바스크립트에는 클래스라는 개념이 없기 때문에 모든 객체들이 메소드와 속성을 생성 받기 위해 프로토타입 객체를 가진다.아래의 코드를 보면 대괄호를 통해 배열을 생성해주었다. 따라서 push()함수와 length 프로퍼티를 사용할

함수란 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블럭이다.같은 코드를 여러 번 중복해서 작성해야 할 경우 함수를 사용한다. (재사용성 증가, 코드 가독성 향상)아래 코드는 식별자와 함수 이름이 동일해서 함수 이름으로 호출된 것이라고 생각하기 쉽다!하지만, 함수

일급 객체(First-Class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.자바스크립트에서 함수는 일급 객체라고 한다. 즉, 함수를 객체처럼 여러가지 방식으로 매우 유연하게 다룰 수 있다!함수가 일급 객체로 취급되는 경우

자바스크립트에서 this가 참조하는 것은 함수가 호출되는 방식에 따라 결정되는데, 이것을 "this binding"이라고 한다.

실행 시 아래 출력 값을 출력하는 객체 exid를 작성하세요. 다음과 같은 동작을 하는 함수를 구현해 exid.js로 제출해야 합니다. 또한 같은 기능을 가진 함수를 메소드 체이닝으로 재구현해 exid-method-chaining.js 로 제출해주세요.exid는 다음과

▶ JS의 상속 구현 자바스크립트는 프로토타입 기반의 객체 지향 언어이기 때문에 class가 필요가 없다. >그렇다면 클래스가 없이 어떻게 상속을 구현할 수 있을까? 바로 생성자 함수와 프로토타입을 아용하면 객체지향 언어의 상속을 구현할 수 있다! ▷ 생성자 함수

프로미스란 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체를 말한다.프로미스는 콜백 헬이라고 불리는 지저분한 js의 해결책이다.코드의 비동기 처리를 위해서 사용한다!프로미스 사용 전에는 코드를 분리할 수 없어 코드를 분리해야 할 때 코드가 지저분해진다.하지만 프

프로미스를 사용하면 프로미스 체이닝을 사용한다.따라서 작업이 많아지면 체인의 길이가 길어지고 코드가 복잡해져 버그를 찾거나 수정하기 어려울 수 있다. async 와 await는 프로미스를 조금 더 간결하게 만들어준다.또한 동기적으로 코드를 작성하듯(평소와 같이 코드를

성결대학교에서 공부를 하고 있는 천민우는 최근 새로나온 전자기기를 구입하기 위해 안양1번가를 전전하며 알바를 구하기 시작하였다.그 결과 안양1번가의 명물 꽈배기 집에 알바로 들어가게 되었다!민우는 꽈배기를 만드는 업무에 배정을 받게 되었는데, 꽈배기를 만들려면 다음 아

https://velog.io/@sieunpark/HTTP-%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C

이터러블과 이터레이터는 이해가 됐는데 제너레이터는 잘 이해가 안가는 것 같다.. 나중에 꼭 다시 복습해보자.지난 포스팅에서 이터러블과 이터레이터에 대해서 살펴보았다.또한 제너레이터라는 것을 사용하면 이터레이터를 편리하게 만들 수 있다는 것을 알게 되었다.이번 포스팅에서

이번 주 퀴즈는 API 서버 통신을 연습 해볼 겁니다.JSONPlaceholder - Free Fake REST API해당 사이트는 Fake API를 지원하는 서버로 프로미스를 공부할 때 참고가 되는 사이트입니다.fetch는 Promise를 반환하는 메서드입니다. co

Map과 Set은 최근 등장한 자료구조이다.데이터의 구성, 검색 및 사용을 객체(object)와 배열(array)보다 효율적으로 처리할 수 있게 한다.Map 및 Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있다.Map이란?Map은 키-값 쌍을 저

CSS 선택자로 문서 내 첫 번째 요소를 반환한다.일치하는 요소가 없으면 null을 반환한다.Happy 클래스 명을 가진 첫 번째 요소의 배경색을 핑크색으로 바꿔보자짜잔!

JavaScript에서 제공하는 DOM(Document Object Model) 메서드 중 하나로, 특정 ID를 가진 HTML 요소를 선택하는 데 사용한다.ex. ID가 'greeting'인 div 요소의 텍스트를 'Merry Christmas🎄'로 변경한다.Merr

CSS 선택자로 문서 내 모든 요소를 배열로 반환한다.Happy 클래스 명을 가진 모든 요소의 배경색을 핑크색으로 바꿔보자

addEventListener() 메소드는 이벤트 리스너를 등록하는 메소드이다.이벤트 리스너는 특정 이벤트가 발생할 때 실행되는 함수를 말한다.addEventListener() 메소드는 이벤트 대상 요소와 이벤트 유형, 이벤트가 발생했을 때 실행할 함수 세 개의 매개변

senlnterval(콜백함수, 시간) 함수는 일정 시간마다 함수를 반복해서 실행한다.시간은 밀리초 단위로 사용된다. (1000밀리초 = 1초)3초마다 "나는 행복한 사람이야!" 를 출력하는 코드를 작성해보자.위 코드를 아래와 같이 동시에 실행할 수 있다.senlnte

웹 문서에서 각 요소의 포함 관계를 나타낸 것을 DOM 트리라고 하고,여기에서 가지가 갈라져 나가는 부분을 노드라고 한다.DOM 트리의 시작 부분(html) 노드는 루트 노드라고 한다.DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 여러 개의 노

innerHTML, textContent, innerText 프로퍼티를 이용하여 웹 요소의 접근한 후 내용을 가져오거나 수정할 수 있다.아래 코드에서 두 번째와 세 번째 p 태그는 display:none을 사용해서 화면에 감추었으므로 브라우저 창에 보이지 않을 것이다.

js로 css의 스타일을 수정하기 위해서 `요소.style.속성명`을 사용해야한다. ▶ CSS 속성에 접근하고 수정하기 버튼을 클릭했을 때 글자의 배경색과 innerText을 사용하여 내용을 수정해보자 ▶ 클래스 스타일 추가하고 삭제하기 > js를 사용하면 필요할

▶ 폼 요소에 접근하기 > 웹 문서의 폼 요소에는 사용자가 내용을 입력하는 텍스트 필드뿐이 아니라 라디오 버튼이나 체크 박스와 같이 클릭하는 요소가 있다. 이렇게 다양한 요소에 접근하는 방법에 접근하는 방법에 대해 알아보자. ▶ 폼 요소 값 가져오기 >

▶ 자주 사용하는 이벤트 ▷ 문서 로딩 이벤트 | 이벤트 | 이벤트가 발생하는 순간 | |:--:|:--:| | abort | 웹 문서가 완전히 로딩되기 전에 불러오기를 멈추었을 때 | | error | 문서가 정확히 로딩되지 않았을 때 | | load | 문서 로딩

DOM에는 웹 문서에 발생하는 이벤트를 저장하는 event 객체가있다.event 객체를 통해 이벤트가 발생한 대상을 확인할 수 있다.웹 문서에 이벤트가 발생하면 자동으로 이벤트와 관련된 객체가 만들어진다.이것 외에도 다양한 event 객체가 존재하니 필요할 때 검색하기

open("URL", "새창이름", "새창옵션")URL 페이지를 새 창으로 나타낸다.alert(date)경고 창을 나타낸다.방문자가 확인 버튼 누르면 alert()을 사용한 후 다음 위치 코드 수행한다.prompt("질문", "답변")문자열을 입력할 때 사용숫자를 입력

저번 포스팅에서 DOM 트리와 노드리스트를 다루었다. click 같은 이벤트가 발생했을 때 기존에 없던 새로운 문서를 웹 문서에 추가해야 한다. 즉, DOM 트리에 새로운 노드를 추가해야 하는것이다. 어떻게 DOM을 사용하여 웹 요소에 접근할 수 있을지 살펴보도록

- 내장 객체란 사용자가 쉽게 가져와서 사용할 수 있도록 미리 만들어진 객체이다. ▶ window 객체 - 웹 브라우저 창 관리 ▷ window 객체의 프로퍼티 > - 웹 문서를 열면 가장먼저 window라는 객체가 만들어지는데, window 객체의 프로퍼티 중 자주

- js 내장 객체 중에서 Data 객체는 날짜와 시간에 대한 정보를 조절할 수 있는 객체이다. 현재 날짜와 시간을 홈페이지에 출력하거나 달력을 표시할 수 있고, 특정까지 얼마나 남았는지 세는 등 여러가지로 응용이 가능하다. ▶ js 객체의 인스턴트 만들기 > - D

➡️ 함수를 주기적으로 반복적으로 실행하고 중단하기 위해 아래와 같은 함수를 사용한다. 일정시간 마다 함수를 반복적으로 실행하는 함수이다.시간은 1ms 단위이며, 1초마다 실행시키고싶으면 1000ms 를 쓰면 된다.handler 는 반복적으로 실행할 함수를 말한다.He

전체 클래스 문자열을 한번에 설정하거나 가져오려는 경우에 사용한다.클래스 하나만 조작하고 싶을 때 사용하고 싶을 때 사용할 수 없다.짜잔!🎇짜잔!🎇⚠️ 클래스명 추가시에 기존에 가지고 있는 class명들을  전부 지우고 추가한다.짜잔!🎇클래스를 개별적으로 조작하려

split이란?split은 "나뉘다", "분열되다" 라는 뜻을 갖고 있다.문자열을 분할하여 배열로 리턴하는 함수이다.사용법str : 변경하고자 하는 문자열separator(선택사항) : 문자열을 구분할 기준이 되는 문자열, 기본 값은 공백 (" ")limit(선택사항)

substr, slice는 문자열에서 특정한 구간의 문자열을 추출한다.substr시작 위치부터 몇 개까지 자를지 선택할 수 있다.slice시작 위치부터 끝까지 자른다.짜잔!🎇https&#x3A;//opentutorials.org/course/50/97