본문 바로가기

프로그래밍/JavaScript(JS)

(15)
자바스크립트(JavaScript) - 화살표 함수 화살표 함수는 ES6부터 새로 생긴 표현식입니다. 화살표 함수는 익명 함수를 좀 더 간단히 쓰는 표현식입니다. 표현식 화살표 함수의 표현식은 아래와 같습니다. var a = (x) => { return x; }; var a = (x1, x2) => { return x1 + x2; }; 여기서 인수가 하나만 있다면 괄호를 지우고 사용이 가능합니다. var a = x => { return x; }; 리턴 값만 있다면 return과 {} 중괄호를 지우고 사용이 가능합니다. var a = x => x; 인수의 기본값, 나머지 매개변수를 설정하여 사용도 가능합니다. // 기본값 매개변수 var a = (x1=1, x2=2, x3) => { return x1 + x2 + x3; }; a(undefined,undef..
자바스크립트(JavaScript) - 클로저(Closure) 자바스크립트에는 클로저라는 기능이 존재합니다. 클로저는 Execution Context를 알아야 이해가 되니 참고하시기 바랍니다. https://bearcomputer.tistory.com/28 클로저는 무엇인가? 아래에 코드를 먼저 확인해보겠습니다. function ab() { var count = 0; return function() { return count++; } } var a = ab(); console.log(a()); // -> 0 console.log(a()); // -> 1 console.log(a()); // -> 2 리턴하는 함수가 ab 함수에 있는 count변수를 사용하고 있습니다. 이것이 클로저라는 구조를 가지고 있기 때문에 가능한 일입니다. 클로저는 함수내부에 선언된 내부 함수..
자바스크립트(JavaScript) - Execution Context(실행 문맥)과 코드 실행 및 내부 동작 원리 ECMAScript2015(ES6)을 중점으로 다루고 있습니다. 참고하시기 바랍니다. 글에 오류가 있을 수도 있으니 알려주시면 감사하겠습니다. 실행 문맥(Execution Context) 실행 문맥은 실행이 가능한 코드들이 평가 또는 실행되고 관리되는 영역이며 코드에 대한 정보들이 저장되어있다. 여기서 평가는 코드가 전역 변수인지 지역 변수인지 변수의 값이 무엇인지 범위는 어디까지인지 코드를 상황에 맞게 파악하는 것이라고 보면 될 것 같다. Execution Context(실행 문맥)가 가지고 있는 구성요소(ES5.1) 렉시컬 환경(LexicalEnvironment) 변수 환경(VariableEnvironment) 디스 바인딩(ThisBinding) LexicalEnvironment은 자바스크립트 코드를..
자바스크립트(JavaScript) - 템플릿 리터럴(Template literals) ES6에서 새로 생긴 문자열 표현 방법입니다. 기존 문자열 표현에서 여러 줄을 표현하려면 이스케이프 시퀀스를 쓰고 문자열에 변수에 있는 값을 사용하려면 변수를 사용하고 + 를 사용해 문자열을 연결해주어야 했습니다. 새로 생긴 템플릿 리터럴을 사용하면 간편하게 표현할 수 있습니다. var bear = "bear"; var text = `곰은 ${bear} 이다.`; console.log(text); // -> 곰은 bear 이다. 이제는 + 를 쓰지 않고 ${ }를 통해서 변수나 함수를 호출하여 값을 받을 수 있습니다. ${ }를 플레이스 홀더라고 부릅니다. 템플릿 리터럴을 사용하려면 ` `(백틱) 물결표 키를 누르면 나타나는 백틱을 사용해야 합니다. 기존에는 여러 줄을 표현할 때 사용했던 \n를 쓰지 않..
자바스크립트(JavaScript) - 데이터 타입 자바스크립트의 데이터 타입에는 원시 타입과 객체 타입이 있다. 원시 타입(기본 타입)은 값을 바꾸지 못하는 불변의 값입니다. 따라서 변수에 넣는 값이 변경이 되는 것은 값이 변경이 되는 것이 아니라 새로 교체되는 것입니다. 동적 타입 언어 자바스크립트는 데이터 타입을 지정하여 변수를 선언하는 것이 아닙니다. var test = "aaa"; test = 1.2; test = true; 따라서 선언된 변수에는 모든 데이터 타입이 저장될 수 있습니다. 원시 타입(기본 타입) 기본 타입에는 6가지가 존재합니다. 숫자(Number) 자바스크립트에서 숫자는 소수점이라고 해서 나누어져 있는 것이 아니라 모두 64비트 부동소수점으로 표현합니다. let a = 1; let b = 2.0; let c = 3.14; 문자열..
자바스크립트(JavaScript) - 변수, 변수 선언, 호이스팅 자바스크립트 변수 변수는 프로그램에서 중요한 역할을 맡고 있습니다. 변수가 없다면 일일이 값을 직접 하나하나 넣어주고 다시 하나하나 바꾸고 해야 합니다. 변수가 있다면 일일이 직접 넣어주지 않아도 되고 공유를 할 수도 있습니다. 변수는 메모리 공간에 이름을 지정한 것입니다. 지정한 이름을 통해 정해진 공간에 값을 저장하고 사용합니다. 자바스크립트에서 변수 선언 자바스크립트에서는 var 키워드를 사용해 변수를 선언할 수 있습니다. var abc; var abc = 1; 이렇게 var를 사용해서 변수를 선언하거나 또는 변수 선언과 동시에 값을 저장할 수 있습니다. 값을 지정하지 않으면 변수에는 "undefined" 값이 들어가 있습니다. 변수 선언은 한 번에 여러 개도 가능합니다. var a=1, b=2, ..
자바스크립트(JavaScript) 객체 기초(객체 생성, 접근 방법, 프로퍼티 추가/삭제) 객체 기초(객체 생성, 접근 방법, 프로퍼티 추가/삭제) JavaScript의 객체는 이름과 값을 한 쌍으로 묶은 데이터를 여러개 모은 것 var abc = { a:"a", b:"b", c:"c" } 객체에 포함된 이름과 값을 프로퍼티(Property)라고 하며 프로퍼티의 이름을 키(Key) 값은 똑같이 값(Value)라고 합니다. 객체 리터럴을 이용해 객체 생성 자바스크립트에서 객체를 생성하는 방법은 두 가지가 있습니다. 객체 리터럴을 이용 객체 생성자를 이용 -객체 리터럴을 이용해 객체 생성 객체의 리터럴은 { }로 표현하여 생성할 수 있습니다. var abc = { a:"a", b:"b", c:"c" } abc 변수에 리터럴을 이용해 객체를 대입했습니다. 프로퍼티는 키와 값으로 이루어져있습니다. 프..