본문 바로가기

분류 전체보기

 (122)
JavaScript - Spread ES2015에서 등장한 문법이다. 배열에서 유용하게 활용할 수 있다. 스프레드 구문 시 주의해야할 점은, 배열에 요소가 1개인 경우 에러가 발생한다는 점이다. spread 기능은 다음과 같다. 1. 배열 풀기 '펼치다'라는 의미처럼 여러개의 값을 하나로 묶은 배열을 스프레드를 사용해서 다시 풀어놓을 수 있다. const numbers = [1, 2, 3]; console.log(…numbers); // 1 2 3 (배열이 아님) 마치 console.log(1, 2, 3); 한 것처럼 출력된다. 2. 깊은 복사 const firstAnimals = ['dog', 'cat']; const secondAnimals = […firstAnimals]; secondAnimals.push(‘rabbit’); cons..
JavaScript - 문장과 표현식 statements와 expressions 우리가 작성하는 모든 자바스크립트 코드는 문장과 표현식으로 구성되어있다. 문장 문장은 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리 이다. let x; // 문장 1 x = 3; //문장 2 if( x === 3) { console.log('x는 3이다.'); }else{ console.log('x는 3이 아니다.'); } // 문장 3 표현식 결과적으로 하나의 값이 되는 모든 코드를 가리킨다. 5 // 표현식 1 'abcd' // 표현식 2 5 + 5 // 표현식 3 'a' + 'b' + 'c' + 'd' // 표현식 4 true && null // 표현식 5 const numbers = [1, 2, 3]; // 표현식이면서 문장 numbers[3]; /..
JavaScript - 함수 다루기 함수 만드는 방법 1. 함수 선언 function 함수이름(파라미터){ 동작; return 리턴값; } 2. 함수 선언을 변수에 할당(함수 표현식) const printA = function () { console.log(‘A’); } printA(); 2번과 같이 함수를 변수에 담음으로 값처럼 표현하는 것을 함수표현식(Function Expression)이라고 부른다. 함수표현식은 함수를 값처럼 표현한 모든것을 일컫는데, 예를들면 아래와같이 addEventListener를 할 때에 두번째 파라미터 함수를 주는 경우도 함수를 값처럼 표현한 것이므로 함수표현식이다. document.querySelector('#btn').addEventListener('click', function() { console.l..
JavaScript- 변수와 스코프 var와 let/const의 차이 1. 변수가 유효한 시점의 차이 console.log(title); // undefined var title = '강아지'; 위 코드 실행시 에러가 발생하지 않는다. (로그는 undefined가 찍힌다. 선언부만 호이스팅되므로) console.log(title); // error let title; 위 코드는 실행시 reference에러가 발생한다. let으로 선언된 변수는 에러를 발생시켜서 문제 해결을 쉽게한다. 2. 중복선언 가능 여부의 차이 var title = '강아지'; var title = '고양이'; 위 코드는 에러가 발생하지 않는다. 중복선언 가능한 것이 왜 문제되냐면, 이 두 줄의 코드 사이에 수많은 코드가 끼어있다는 가정 하에, 두 값 모두 사용되어야하..
JavaScript - 데이터타입, 연산자 자바스크립트의 동작 원리 데이터 타입의 특징과 종류 데이터 타입의 특징 자바스크립트는 다른 프로그래밍 언어에 비해서 데이터 타입이 유연하다. 상황에 따라 데이터 타입이 변할 수 있다는 의미이다. 한 변수에 여러 데이터 타입의 값을 할당할 수 있기는 하지만, 값마다 데이터 타입이 있긴 하다. 데이터 타입의 종류 기본형(Primitive Type) Number String Boolean Null Symbol BigInt 참조형(Reference Type) Object Symbol 정의하기 // Symbol('변수의 설명'); const user = Symbol(); const user = Symbol('this is a user'); Symbol이 된 변수는 그 어떤 값과 비교해도 false가 된다. use..
JavaScript - 모던 자바스크립트 정의 모던 자바스크립트의 정의 ECMAScript 자바스크립트라는 프로그램언어의 표준 명세서. 자바스크립트도 다른 언어들처럼 유용한 기능이 추가되고, 아쉬운 부분이 보완되어가고있다. 이러한 이력을 Ecma international이라는 국제 표준화 기구에서 관리하고 있다. JavaScript를 사용할 때 준수해야하는 규칙, 세부 사항을 Ecma-262라는 문서로 관리하게 되는데, 이 문서가 EcmaScript이다. 1997년 Ecma1, 줄여서 ES1이 생겨났고, 이후 업데이트가 있을 경우 ES2, ES3 처럼 뒤의 숫자를 늘리기 시작했다. 2015년, ES6가 생긴 이후부터는 1년에 한 번씩 업데이트를 하기로 했다. ES6의 공식적인 버전 명칭은 연호를 붙여서 ECMAScript 2015라고 부른다. ES6..
JavaScript - HTTP 메소드 HTTP 메서드란, 클라이언트와 서버 사이에 이루어지는 요청과 응답데이터를 전송하는 방식을 말한다. 서버에 주어진 리소스에 수행하길 원하는 행동, 서버가 수행해야할 동작을 지정하는 요청을 보내는 방법이다. 주요 종류는 총 9가지이다. 주요메서드 5가지 GET 리소스를 조회한다. 오직 데이터를 받기만 한다. 데이터는 쿼리스트링을 통해 전달할 수 있다. 쿼리스트링 외에 메세지 바디를 통해 데이터를 전달할 수도 있지만 권장하지 않는다. post도 데이터 조회시 사용될 수 있지만, get메서드는 캐싱이 가능하기때문에 get을 사용하는 것이 좋다. POST 전달한 데이터를 처리/생성을 요청하는 메서드. 메시지바디를 통해 서버로 요청데이터를 전달하면 서버는 요청 데이터를 처리하여 업데이트한다. 전달된 데이터로 신규..
JavaScript - this 자바스크립트에서의 this는 다른 언어와 조금 다르게 동작한다. strinct mode인지 아닌지에 따라 일부 차이가 있다고 하지만 이 부분은 제외하고 아래의 경우가 존재한다. 1. 전역객체(window)객체를 의미 함수의 외부에서 사용될 때 객체의 값으로 들어있는 함수가 아닌, 일반 함수의 내부에서 사용될 때 function getThis(){ console.log(this); // window객체가 출력된다. } console.log(this); // window객체가 출력된다. 2. 함수를 호출한 객체를 의미 객체의 값으로 들어있는 함수내에서 사용될 때 function getFullName(){ return `${this.first} ${this.last}`; // this는 객체 ann이다. } ..

티스토리툴바