Javascript 문법 정리
Javascript 문법에 대한 정리문서로 각 문법은 아래 포스팅 참고하면 된다.
[Javascript] 기본문법
기본문법 주석 주석은 작성된 코드의 의미를 설명하기 위해 사용한다. // : 한 줄 주석 /* */ : 여러 줄 주석 /* 여러줄 주석 */ // 한줄주석 출력 가장 기본적인 출력은 방법은 alert() 함수를 사용. aler
ypangtrouble.tistory.com
[Javascript] 데이터 타입
데이터 타입 데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터(숫자, 문자열, 불리언 등)의 종류를 말한다. 코드에서 사용되는 모든 데이터는 메모리에 저장되고 참조될 수 있어야 한
ypangtrouble.tistory.com
[Javascript] 변수
변수 var 키워드를 이용하며 모든 형을 다 담을 수 있다. var pi, radius; pi = 3.141592; radius = 10; console.log(2 * pi * radius); // 62.83184 var x = y = 100; console.log(x); // 100 console.log(y); // 100 var string = 'String'; var number
ypangtrouble.tistory.com
[Javascript] 연산자
연산자 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행한다. 산술 연산자 산술 연산자는 수학적 계산을 수행하여 새로운 값을 만든다. 이항 산술 연산자 2
ypangtrouble.tistory.com
[Javascript] 자료형
자료형 검사 자바스크립트에서 자료형을 검사하기 위한 방법과 같다. typeof() Object.prototype.toString.call() typeof() 피연산자의 데이터 타입을 문자열로 반환한다. typeof('String'); // string typeof(245); // numbe
ypangtrouble.tistory.com
[Javascript] 조건문
조건문 if 문 if (조건식1) { 조건식1이 참이면 이 코드 블록이 실행된다. } else if (조건식2) { 조건식2이 참이면 이 코드 블록이 실행된다. } else { 조건식1과 조건식2가 모두 거짓이면 이 코드 블록이
ypangtrouble.tistory.com
[Javascript] 반복문
반복문 while문 while (불 표현식) { 문장 } var value = 0; while (value < 4) { console.log(value + '번째'); value++; } 0번째 1번째 2번째 3번째 do while문 조건을 먼저 검사하고 반복을 실행, 즉 최소 한 번은 무조건 실
ypangtrouble.tistory.com
[Javascript] 객체
객체 자바스크립트는 객체 기반의 언어이며, 객체는 키와 값으로 구성된 프로퍼티들의 집합이다. 객체는 프로퍼티와 메소드로 구성되어 있으며 다음과 같다. 프로퍼티 : 키와 값으로 구성되어
ypangtrouble.tistory.com
[Javascript] 배열(1)
배열 배열은 여러 개의 값을 순차적으로 저장할 때 사용한다. 자바스크립트의 배열은 객체이다. 대괄호[]를 사용하여 표현하며 어떤 종류의 자료형도 배열의 요소가 될 수 있다. 배열의 인덱스
ypangtrouble.tistory.com
[Javascript] 배열(2)
배열 함수 기본적으로 제공되는 배열 함수들이다. isArray(x) x가 배열이면 true, 배열이 아니면 false를 반환한다. Array.isArray([]); // true Array.isArray(['a', 'b']); // true Array.isArray(); // false Array.isArray({}); // f
ypangtrouble.tistory.com
[Javascript] 함수(1)
함수 함수란 어떤 작을 수행하기 위해 필요한 코드들의 집합을 정의한 코드 블록이다. 필요한 때에 호출하여 실행할 수 있다. 이러한 특징은 코드의 재사용 측명에서 매우 유리하다. 함수 생성
ypangtrouble.tistory.com
[Javascript] 함수(2)
반환값 함수 내에서 수행된 결과를 return 키워드를 이용하여 반환할 수 있으며 반환된 값을 반환값이라 한다. 배열 등을 이용하여 한 번에 여러 개의 값을 반환할 수 있다. function sum(s1, s2) { var res
ypangtrouble.tistory.com
[Javascript] 프로토타입
프로토타입 객체 다름 객체지향 프로그래밍 언어와 달리 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어이다. 모든 객체는 자신의 부모 역할을 담당하는 하는 객체와 연결되어 있
ypangtrouble.tistory.com
[Javascript] this
this 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 자바스크립트에서 함수를 호출하는 방식은 다음과 같다. 함수호출 메소드 호출 생성자 함
ypangtrouble.tistory.com
[Javascript] 스코프
스코프 스코프(유효 범위)란 참조 대상 식별자를 찾아내기 위한 규칙을 말하며, 식별자는 선언 위치에 따라 해당 스코프를 가지게 된다. 구분 자바스크립트에서 크게 전역/지역 스코프로 나눌
ypangtrouble.tistory.com
[Javascript] 클로저(Closure)
클로저 클로저란 외부함수의 변수에 접근할 수 있는 내부 함수를 일컫으며 스코프 체인(scope chain)으로 표현되기도 한다. function outer() { var color = 'green'; function inner() { console.log(color); } return inner; }
ypangtrouble.tistory.com
[Javascript] 전역 객체
전역객체 전역객체란 자바스크립트 내에서 가장 최상위에 위치한 유일한 객체를 의미한다. 클라이언트(브라우저) 측면에서는 window, 서버(Node.js) 측면에서는 global 객체를 의미한다. 자바스크립
ypangtrouble.tistory.com
[Javascript] Date 객체
Date 객체 Date 객체는 날짜와 시간을 위한 메소드를 제공하는 객체이면서 생성자 함수이다. 생성자 new Date() 인수를 전달하지 않으면 현재 날짜와 시간을 가지는 인스턴스를 반환한다. var date = new
ypangtrouble.tistory.com
[Javascript] Math 객체
Math 객체 Math 객체는 수학을 위한 프로퍼티와 메소드를 제공하는 객체이다. 속성 PI pi 값을 반환한다. Math.PI; // 3.141592653589793 함수 abs(x) 절댓값을 반환한다. Math.abs(-1); // 1 Math.abs('-1'); // 1 Math.abs(''
ypangtrouble.tistory.com
[Javascript] Number 객체
Number 객체 Number 객체는 숫자에 대한 프로퍼티와 메소드를 제공하는 객체이다. 생성 Number() 생성자 함수를 통해 생성할 수 있다. var a = new Number(1); var b = new Number('1'); var c = 1; console.log(a); // 1 console
ypangtrouble.tistory.com
[Javascript] String 객체
String 객체 생성 String() 생성자 함수를 통해 생성할 수 있다. var a = new String('Yang'); var b = 'Yang'; console.log(a); // 'Yang' console.log(b); // 'Yang' console.log(typeof(a)); // object console.log(typeof(b)); // string 속성 length
ypangtrouble.tistory.com
[Javascript] 문서객체모델(DOM)
문서 객체 모델(Document Object Model, DOM) 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM 이라 한다.
ypangtrouble.tistory.com
[Javascript] 빌트인(built-in) 객체
빌트인 객체 빌트인 객체 는 ECMAScript 명세에 정의된 객체를 말하며 애플리케이션 전역의 공통 기능을 제공하며 Object, String, Number, Function, Array. Date, Math 와 같은 객체 생성에 관계가 있는 객체와
ypangtrouble.tistory.com
[Javascript] ES6 - let, const
ECMAScript ECMAScript 란, ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. ES6(ECMAScript 2015)에서 추가된 사항에 대해 알아보고자 한다. let 기존에
ypangtrouble.tistory.com
[Javascript] ES6 - 템플릿 문자열
템플릿 문자열 템플릿 문자열(Template String)은 문자열을 생성하는 새롭게 도입된 리터럴이다. 문자열을 설정하기 위해 따옴표(`)를 사용한다. const template = `템플릿 리터럴은 '작은따옴표(single quote
ypangtrouble.tistory.com
[Javascript] ES6 - 화살표 함수
화살표 함수 화살표 함수(Arrow function) 는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니며
ypangtrouble.tistory.com
[Javascript] ES6 - Rest 파라미터
Rest 파라미터 Rest 파라미터 는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터 는 함수에 전달된 인수들의 목록을 배열로 전달받으며 순차적으로 할당된
ypangtrouble.tistory.com
[Javascript] ES6 - Spread 연산자
Spread 연산자 Spread 연산자(Spread Syntax, ...) 는 대상을 개별 요소로 분리하며 대상은 Iterable 이어야한다. // ...[1, 2, 3]는 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1, 2, 3 // 문자
ypangtrouble.tistory.com
[Javascript] ES6 - 디스트럭처링
디스트럭처링 디스트럭처링(Destructuring) 은 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변
ypangtrouble.tistory.com
[Javascript] ES6 - 클래스
클래스 자바스크립트는 프로토타입 기반 객체지향 언어로 클래스가 필요없는(class-free) 객체지향 프로그래밍 스타일로 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은
ypangtrouble.tistory.com
[Javascript] ES6 - 모듈
모듈 모듈 이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 파일 단위로 분리되어 있으며 명시적으로 모듈 을 로드하여 재사용한다. 기능별로 분
ypangtrouble.tistory.com
[Javascript] ES6 - Symbol
Symbol Symbol은 ES6에서 새롭게 추가된 7번 째 타입으로 변경 불가능한 원시 타입이다. 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용한다. Symbol 생성 Symbol 은 Symbol()
ypangtrouble.tistory.com
[Javascript] ES6 - 이터레이션
이터레이션 이터레이션 이란 데이터 컬렉션을 순회하기 위한 프로토콜이다. 이터레이션을 준수한 객체는 for of 문으로 순회할 수 이쏘 Spread 문법의 피연산자가 될 수 있다. 이터러블 이터러블
ypangtrouble.tistory.com
[Javascript] ES6 - for of
for of 문 for of 문 은 내부적으로 이터레이터의 next 메소드를 호출하여 이터러블을 순회하며 next 메소드가 반환한 이터레이터 리절트 객체의 value 프로퍼티 값을 for of 문 의 변수에 할당한다. 그리
ypangtrouble.tistory.com
[Javascript] ES6 - 커스텀 이터러블
커스텀 이터러블 일반 객체는 이터레이션 프로토콜을 준수(Symbol.iterator 메소드를 소유)하지 않기 때문에 이터러블이 아니다. 따라서 일반 객체는 for…of 문에서 순회할 수 없으며 Spread 문법의 대
ypangtrouble.tistory.com
[Javascript] ES6 - 동기와 비동기
동기(synchronous)와 비동기(asynchronuous) 동기(synchronous) 방식은 이전 작업이 완료된 후 차례로 다음 작업을 순차적으로 싱핼하는 방식이며 비동기(asynchronuous) 방식은 여러 작업을 동시에 처리하기 위
ypangtrouble.tistory.com
[Javascript] ES6 - 콜백 함수(Callback)
콜백 함수(Callback) 콜백(Callbakc) 함수 란 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다. 그리고 파라미터로 일반적인 변수나 값을 전달하는 것이 아
ypangtrouble.tistory.com
[Javascript] ES6 - 프로미스(Promise)
프로미스(Promise) Promise 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 Array나 Object 처럼 독자적인 객체라고 보면 된다. 비동기 작업이 끝날 때까지 결과를 기다리는 것이 아니라, 결과를
ypangtrouble.tistory.com
[Javascript] ES6 - async / await
async / await async / await 는 ES2017에서 도입된 문법으로 Promise 로직을 더 쉽고 간결하게 사용할 수 있게 해준다. 하지만 완전히 Promise를 대체하기 위한 기능은 아니다. 사용법은 function 키워드 앞에 asy
ypangtrouble.tistory.com
'Javascript' 카테고리의 다른 글
| [Javascript] ES6 - async / await (24) | 2023.12.11 |
|---|---|
| [Javascript] ES6 - 프로미스(Promise) (73) | 2023.12.08 |
| [Javascript] ES6 - 콜백 함수(Callback) (78) | 2023.12.07 |
| [Javascript] ES6 - 동기와 비동기 (72) | 2023.12.06 |
| [Javascript] ES6 - 커스텀 이터러블 (58) | 2023.12.05 |
댓글