[JavaScript]

프로그래밍에서 데이터를 담는 공간이다. 선언 방법은 let 키워드를 사용하며, =는 대입 연산자로서 우측에 있는 값을 왼쪽에 있는 변수에 담는 연산자다. ;(세미콜론)은 문장의 끝을 알린다. 오류를 방지하기 위해 문장이 끝나면 꼭 선언해 주도록 하자.참고로 함수 선언식

자료형은 데이터 값의 유형이다.원시타입과 객체(참조)타입으로 나눌 수 있다.문자열(String)숫자(Number)논리형(Boolean)언디파인드(Undefined)널(Null)객체(Object)배열(Array)함수(Function)여기서 객체(참조)타입과 객체(Obje

이전 포스팅에서도 언급했지만 참조타입으로는 객체(Object), 배열(Array), 함수(Function)가 있다. 원시타입과 참조타입을 비교하는것에 초점을 두어 간단히 알아본다.자바스크립트에서 객체는 단순하게 표현하면 속성명(Key), 값(value) 형태의 속성(p

JS 특정 값 개수 구하기자바스크립트에서 특정 값의 개수를 구하는 함수를 아래와 같이 작성하였다.예를 들어 함수 counterCharacter('Abcea', 'a')는 'Abcea' 에서 a가 몇 번 들어갔는지 세는 함수로 대소문자 구분이 없다.즉, 위 예시의 경우

자바스크립트에서의 스코프란 코드가 실행되는 컨텍스트(유효범위)이며 전역 스코프, 지역 스코프, eval 스코프로 나눌 수 있다.함수나 객체의 밖에서 선언되었다면 전역 스코프로 정의된다.모든 곳에서 전역 스코프에 있는 변수를 사용할 수 있다.함수나 객체의 안에서 선언되었

문자열 자르는 자바스크립트 메소드 정의특정 문자열을 기준으로 잘라 배열로 반환한다.시작인덱스를 기준으로 종료인덱스 까지 자른다.시작인덱스를 기준으로 문자열 길이로 자른다.

노드 생성생성된 노드 속성 추가텍스트 노드 추가 부모 노드에 생성된 노드 추가위 노드 추가 방법으로 테이블 추가 예제를 만들어 보자, 버튼을 계속 클릭하면 테이블이 추가된다.HTML DOM appendChild() Method

switch키워드 오른쪽 ()안의 값과 case키워드 오른쪽의 값을 비교하여 true일시 콜론 오른쪽 구문을 실행하게 된다.조건을 만족시 구문을 실행하고, break키워드를 만나면 로직을 빠져나가게 된다. break키워드가 없을 경우 로직을 벗어나지 않고 계속 아래 조

while문은 조건을 검사하여 true일경우 계속 구문을 실행시키는 반복문이다.do-while은 whild문과 비슷하지만 처음은 조건과 상관없이 구문을 실행하고 이후에 조건을 검사하여 true일때 구문을 실행한다.처음 구문을 실행하여 0이 출력되고, i는 3이 아니므로

변수를 선언할 때는 var, let, const 키워드를 사용한다.var 는 자바스크립트의 초창기 문법이고 ES6에서 let과 const가 추가 되었다. var의 경우 재선언, 재할당을 할 수 있으며 let은 재할당은 가능하나, 재선언은 불가능하다. const는 재선언

호출 스택이란 함수의 호출을 기록하는 자료구조이다. 기본적으로 우리가 프로그램 안에서 위치한 곳이며, 만약 우리가 어떤 함수를 실행시킨다면, 우리는 스택 위에 무언가를 올리는(push) 행위를 하는 것이다. 그리고 우리가 함수로부터 반환을 받을 때, 우리는 스택의 맨

Array.forEach 매서드는 배열 전체를 돌때, 요소마다 콜백 함수를 실행한다. 배열의 요소에 직접 어떠한 작업을 수행하고 싶을 때 적합한 메서드이다. Array.forEach 메서드는 리턴 값이 없다.현재 배열 요소의 값현재 배열 요소의 index현재 돌고 있는

Array.map 메서드는 Array.forEach와 마찬가지로 배열의 각 요소를 순회하며 콜백 함수를 실행한다. 다만, 콜백에서 리턴되는 값을 배열로 만들어낸다. 원본 배열은 건들지 않고 그 요소들을 사용해서 혹은 약간 변형해서 새로운 배열을 만들어야 할 때 유용하다

Array.filter메서드는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 특정 조건에 맞는 요소만 모아 배열로 리턴한다. 특정 케이스만 필터링해서 추출할 때 유용하다.현재 배열 요소의 값현재 배열 요소의 index현재 돌고 있는 배열 자체\[JavaScript]

Array.some메서드는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 하나의 요소라도 조건을 만족할 때 true를 반환하며, 만족하지 않을 때 false를 반환한다. 특정 조건을 만족하는지 알고 싶을 때 적합한 메서드다.현재 배열 요소의 값현재 배열 요소의 ind

Array.reduce메서드는 배열의 각 요소를 순회하며 콜백 함수를 실행하며 이전 리턴값을 넘겨 받는다. 이전 값을 넘겨 받아 현재 값과 어떠한 작업을 수행하고 싶을 때 적합한 메서드이다. 인자 값이 다른 메서드와 약간 다르며, 콜백 함수 뒤에 인자를 하나 더 줄 수

버튼을 클릭했을 때 작성한 내용이 할일로 추가 된다.엔터키를 눌렀을 때 버튼을 클릭한 것과 동일한 효과 적용작성된 리스트를 더블 클릭하면 밑줄이 그어진 후 서서히 삭제된다.입력창에 마우스 클릭 시 공란이 되게 한다.ul 안에 li 요소가 추가된 경우 li를 선택하여 이

자바스크립트에서 자주 쓰이는 배열 메서드 정리배열을 하나로 합칠 때 사용한다. 인자로 들어온 배열의 순서대로 합쳐진다.주어진 함수를 배열 요소 각각에 대해 실행한다.배열을 반복하고, 콜백함수가 리턴한 값으로 새 배열을 반환한다.배열을 반복하고, 콜백함수의 리턴값이 tr

1)자바스크립트는 동기적이다.호이스팅이 된 이후부터 코드가 작성된 순서대로 하나씩 동기적으로 실행한다. \*호이스팅(Hoisting)이란? 자바스크립트에서 코드를 처리할 때 먼저 let 변수 등의 선언이나 function declaration을 최상단으로 띄운 후 코드

obejct에 접근하는 방법은 dot(.)과 bracket(\[])이 있다.dot notation의 경우 키와 값은 항상 정해져 있다.bracket의 경우 변수로 키와 값을 할당할 수 있다. 위의 경우 가지는 값에 따라 해당 변수에 유동적으로 다른 키와 다른 값으로 할

자바스크립트의 fetch 함수는 비동기 통신 API로써 서버에 네트워크 요청을 보내 새로운 정보를 받아올 수 있다. ES6부터 지원하며, 가독성이 매우 뛰어난 장점이 있다. 이곳을 클릭하면 JSON 데이터 화면이 나온다. fetch API를 이용해 이 JSON을 가져와

ECMAScript6(2015)에서 새로 추가된 비구조화 할당(Destructuring Assignment)이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)이다.animalList는 "CAT", "D

중첩함수에서 내부함수가 외부함수의 환경을 기억하는것을 클로저라고 한다.func라는 함수를 선언하고 foo변수에 'data'문자열을 추가한 뒤 foo변수를 리턴하는 익명함수를 선언하였다.func함수의 리턴값을 closure변수에 할당한 뒤 closure를 실행한 값을 콘

ECMAScript6(2015)에서 새로 추가된 전개연산자(Spread Operator)란 객체나 배열의 값을 하나 하나 넘기는 용도로 사용할 수 있다. 전개연산자를 사용하는 방법은 점 세개(...)를 붙이면 된다.ES5 에서는 배열의 내용을 합쳐 새로운 배열을 만들기

깊은 복사와 얕은 복사에 대해 알아보겠다. 이 글의 초반 내용은 이전 포스팅의 (원시 타입과 참조 타입의 차이)과 맥락이 비슷하며, 위 포스팅은 원시 타입과 참조 타입의 차이점이라면 아래는 참조 타입의 깊은 복사하는 방법에 대해 알아보도록 하겠다.얖은 복사는 참조(주소

자바스크립트에서 에러가 발생하면 코드는 멈추게 되고, 콘솔에 에러가 출력된다. 하지만 try...catch 문법을 사용하면 스크립트가 죽는 것을 방지하고, 에러 상황을 잡아 예외처리를 할 수 있게 한다. 기본적인 형태는 두 블록으로 구성되며 예시 코드는 아래와 같다.먼

JavaScript는 독립적인 언어가 아니라 스크립트 언어로, 특정한 프로그램 안에서만 동작을 할 수 있다. 자바스크립트를 실행하는 환경은 브라우저환경에서 실행하는 방법과 Node.js에서 실행하는 방법, 코드 에디터는 VS code를 이용하여 브라우저나, Node.j

문자열이 공백인지 체크하는 함수검색창 구현에 필요한 로직회원가입에서 공백, 특수문자 검사하기

부수 효과를 없애고 순수 함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임 부수 효과: 외부 상태를 변경하거나 함수로 들어온 인자 상태를 변경하는 것순수 함수동일한 입력에 대해 항상 동일한 출력을 반환하는 함수외부의 상태를 변경하거나 영향을 받지 않는 함수위 f

자바스크립트의 모든 값은 타입이 있다. 타입 변환이란 이러한 타입을 변환시키는 것을 말하는데 개발자가 의도적, 명시적으로 타입을 변환시키는 경우를 '명시적 타입 변환'이라 하고 개발자 의도와는 상관없이 자바스크립트 엔진에서 암묵적으로 타입을 변환시키는 것을 '암묵적 타

콜백함수를 이용하면 자바스크립트의 비동기 처리의 특성에도 원하는 시간에 원하는 값을 얻어올 수 있다. 하지만 콜백 패턴은 콜백 지옥으로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 한계가 있다는 단점이 있다. 이를 해결하기 위해 ES6에서는 비동

자바스크립트의 오류 유형을 알아보자.자바스크립트 규칙에 어긋나는 문법으로 작성하여 자바스크립트 엔진이 이해 못 할 문자가 입력되었을 때 발생한다. 요즘에는 에디터 내부에서 오류를 친절하게 찾아주기 때문에(ESlint 혹은 Prettier) 브라우저에서 구문 오류는 찾아

자바스크립트의 데이터 타입은 원시타입과 참조타입으로 나눌 수 있다.1.원시타입숫자(number)타입, 문자열(stirng)타입, 불리언(boolean)타입, undefined타입, null타입, 심벌(symbol)타입위 심벌타입의 경우 ES6문법에서 새롭게 추가되었다.

Data 속성HTML5 이후부터 데이터 속성이라는 개념이 추가가 되었다. 데이터 속성은 'data-\`로 시작하며 특정한 데이터를 DOM에 저장해 둘 수 있다. 또한 브라우저는 이러한 데이터 속성에는 관연하지 않아 개발자가 요소에 특정한 데이터를 저장하고 싶은 경우 자

데이터 전달 방식 XML, JSONXML과 JSON 모두 데이터를 저장하고 전달한다는 공통점이 있다.HTML 한계를 극복하기 위해 만들어 졌다. HTML처럼 트리구조로 이루어져 있는데 HTMl 처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로만 만

프론트엔드와 백엔드가 통신을 할때 동기적으로 처리를 해야 하는 경우가 있고, 비동기적으로 처리를 해야 하는 경우가 있다. 먼저 동기와 비동기의 정의와 적합한 사용방법에 대해 알아보려 한다.동기: 동기적인 처리라 함은 차례로 순차적으로 처리하는 것 즉, 서버 컴퓨터가 작

자바스크립트 개발에 있어서 불편한 점 하나는 오류를 찾기가 쉽지 않다는 점이다. 어디에서 오류가 발생했는지 찾기 위해 consoel.log 를 찍어보고 alert을 활용하지만 한계가 있다. 특히 데이터 통신의 경우 오류가 발생했을때 어디서부터 잘못된 것인지 값을 찍어보