JavaScript
-
자바스크립트 - 호이스팅(Hoisting)이란?JavaScript/기본 2020. 7. 19. 16:54
호이스팅(Hoisting)이란? scope(스코프) 안에서의 변수 선언을 최상위에서 선언한 것과 동등하다는 의미를 가진다. 즉, 변수가 선언되기 이전에 변수를 사용하면, 변수가 사용된 블럭 범위의 맨 위로 변수를 끌어올린다는 말이다. var x = '외부 scope'; function fnc() { console.log(x); // undefined var x = '내부 scope'; }; fnc(); 함수 fnc를 실행해보면, 콘솔 창에는 undefined가 출력이 된다. 왜 undefined가 출력이 될까? 그 이유는 var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어지는데, scope(스코프) 안에서 선언된 변수는 항상 최상위에 선언한 것과 동등한 의미를 가지기 때문에 즉, 호이..
-
자바스크립트 - scope(스코프)란?JavaScript/기본 2020. 7. 19. 01:17
scope란? 변수에 접근할 수 있는 범위를 의미한다. 이 범위는 변수의 접근성을 관리하는 정책이며, scope에는 global(전역)와 local(지역) 2개의 범위가 존재한다. global(전역) scope const name = "Lim"; // 전역 스코프 function print(){ console.log(name); // Lim } print(); console.log(name); // Lim 먼저 name이라는 변수를 정의하고 print 함수 블록 안과 밖에 console.log(name)을 출력하면 둘 다 같은 값이 나온다. 따라서, 변수 name은 전역 스코프라고 볼 수 있다. 전역 scope로 선언된 변수는 모든 범위에서 사용할 수 있다. local(지역) scope 코드 블록 내부에..
-
자바스크립트 - fetch란?JavaScript/동작원리 2020. 7. 12. 01:18
Fetch의 탄생 배경 fetch가 나오기 전까진 자바스크립트에서는 ajax를 쓰기란 매우 까다로웠다. 또, 익스플로러랑 기타 브라우저가 맞춰져 있지 않다 보니 커먼 라이브러리로 만들어 쓰거나 손쉽게 만들어져 있는 제이쿼리(jQuery)를 이용해왔다. 예를 들면, jQuery의 ajax() 메소드와 같은 것들을 사용해 단지 AJAX 구현만을 목적으로 사용해왔다. $.ajax({ url: "", type: "", cache: , dataType: "", data: "", success: function(data){ }, error: function (request, status, error){ } }); 여기서 AJAX란? JavaScript의 라이브러리 중 하나이며, Asynchronous Javascr..
-
자바스크립트 - 동작 원리JavaScript/동작원리 2020. 7. 5. 20:23
자바스크립트는 싱글 스레드 프로그래밍 언어이다. 싱글 스레드 런타임을 가지고 있다는 의미이다. 이것은 결국 한 번에 하나의 싱글 콜 스택(Call Stack)만을 가지고 있다는 말을 뜻한다. 여기서 싱글 스레드란? 하나의 프로그램은 동시에 하나의 코드만 실행할 수 있다는 것을 말한다. 그렇다면 자바스크립트는 어떻게 작동할까? Call Stack 그림을 보면서 이해해보자. Call Stack은 Data Structure(자료 구조)로 작성한 코드가 실행되는 순서를 기억하고 있다. 함수를 실행하려면 Stack(스택)에 해당하는 함수를 집어넣게 되고, 함수에서 리턴이 일어나면, 스택의 가장 위쪽에서 해당 함수를 꺼내게 된다.(LIFO) 이것이 Call Stack이 하는 일의 전부이다. 이 코드를 실행하면 실행..
-
자바스크립트 - 클래스 기본 개념JavaScript/기본 2020. 5. 6. 10:41
Class의란? Class는 사실 함수이다. 함수는 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class표현식과 class선언 두 가지 방법을 제공한다. Class의 선언 class를 정의하는 한 가지 방법은 class 선언을 이용하는 것이다. class를 선언하기 위해서는 클래스의 이름과 함께 class 키워드를 사용해야 한다. class Person { constructor(name, age) { this.name = name; this.age = age; } } 단, 함수 선언과 클래스 선언의 중요한 차이점은 호이스팅 여부이다. 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 그렇지 않다. 클래스를 사용하기 위해서는 클래스를 먼저 선언 해야하며, 그렇지 않으면 Refer..
-
자바스크립트 - 객체 메소드 정리JavaScript/기본 2020. 5. 5. 19:33
자바스크립트에서 객체를 어떻게 선언하고, 사용할 수 있는지 알아보자. 먼저 객체는 {}(중괄호)로 감싸져 있고, :(클론)으로 구분된 이름/값 쌍들이 , (쉼표)로 분리된 목록의 형태이다. 다시 말하면 객체는 이름과 값으로 구성된 프로퍼티의 집합이라고 할 수 있다. 위에서 propertyName1,2로 나누었는데, 프로퍼티 이름은 중복이 되면 안 되기 때문에 숫자로 구분해 놓았다. 객체를 만들때는 규칙 1. property 이름은 중복될 수 없다. 2. property이름과 property값 사이에 :(콜론)으로 구분한다. 3. property를 추가할 때는 , (쉼표)를 붙여준다. 4. property 값에는 어느 type이나 가능하다.(string, numberm array, object, funct..
-
자바스크립트 - 배열 메소드 정리JavaScript/기본 2020. 5. 4. 22:10
Array.map()이란? map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. map은 callback 함수를 각각의 요소에 대해 한 번씩 순서대로 불러 그 함수의 반환 값으로 새로운 배열을 만든다. callback 함수는 배열 값이 들어있는 인덱스에 대해서만 호출된다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않는다. 예시를 통해 알아보자. map()을 이용해서 구구단 3단의 수를 출력 해보도록 하자. data변수 안에 1 ~ 9까지의 배열이 담겨져 있고, map매서드를 통해서 각 항목에 × 3을 해서 새로운 배열을 result라는 변수에 담아서 출력한다. 출력한 결과 구구단 3단의 수들이 result에..
-
자바스크립트 - javascript ES6란?JavaScript/기본 2020. 4. 23. 21:27
ES6란 무엇인가? 바로 ES6는 ECMA Script 2015를 의미한다. ES는 ECMA Script의 줄임말이며, ECMA Script는 JavaScript를 표준화시키려고 탄생했다. 그렇다면 왜 생겨난 것인가? JavaScript의 역사는 점점 깊어지고, 문법의 보완이 필요하면서 버전별로 문법을 확장시키고 브라우저는 특정 버전의 기능별로 지원할 수 있도록 ES가 명세를 확정해왔다. 그렇다! 그래서 ECMA Script는 JavaScript를 표준화시키고, 규격화하기 위해 만들어진 것이다. 현재는 ES10 버전까지 나왔고, 주로 쓰이는 것은 ES6인데, 6은 버전 이름이며 ES 2015라고도 한다. 2015년에 ES6버전이 최종으로 나왔기 때문에 그렇게 불린다.