거꾸로 바라본 세상
[ES6] Symbol
Language/Javascript 2023. 4. 20. 09:22

symbol 변경 불가능한 원시타입의 값이다. 주로 변수명이 충돌 위험이 없는 유일한 객체의 Property Key를 만들기 위해 사용되며 Symbol 함수를 호출하여 생성한다. //symbol key는 이름 충돌 위험이 없는 유일한 객체의 property key 이다. let key = Symbol('key'); console.log(key); console.log(typeof key); //symbol var obj = {}; obj[key] = 'value'; console.log(obj[key]); //value [결과] Symbol(key) symbol value

템플릿 리터럴(Template Literals)
Language/Javascript 2023. 4. 20. 09:17

템플릿 리터럴(Template Literals) ES6는 템플릿 리터럴(Template Literals)은 일반 문자열과 비슷해보이지만 ' 또는 " 같은 통상적인 따옴표 문자 대신 백틱(Backtick) (`) 문자를 사용한다. const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할 수 있다.`; console.log(template); 방법1 일반적인 문자열에서 줄바꿈은 허용되지 않고 공백(white-spce)를 표현하기 위해 백슬래시(\)로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용해야한다. 템플릿 리터럴은 일반적인 문자열과 다르게 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모..

[ES6] Class(클래스)
Language/Javascript 2023. 4. 20. 09:16

[ES6] Class(클래스) 클래스는 프로토타입 기반 객체 지향 패턴을 더 쉽게 사용할 수 있게 할 수 있는 대체제로 클래스 패턴 생성을 더 쉽고 간단하게 생성할 수 있다. //클래스 선언 class Person { //constructor 생성자 constructor(name) { this._name = name; } Hello() { console.log('Hello! ' + this._name); } } const me = new Person("Paik"); const friends = new Person("Lee"); me.Hello(); friends.Hello(); 인스턴스 생성 new 연산자를 이용하여 클래스 인스턴트를 생성한다. class Foo {} const foo = new Foo(..

[ES6] Arrows
Language/Javascript 2023. 4. 20. 09:16

[ES6]-Arrows Arrows 함수는 function 키워드 대신 화살표('=>') 를 사용하여 함수를 선언하는 축약형 함수이다. Arrows는 표현식 본문(Expression Bodies)와 상태 블럭 본문(Statement block bodies)를 지원한다. 콜백 함수에서 사용하면 간결하게 표현이 가능. //매개변수 지정 방법 () => {...} // 매개변수가 없는 경우 x => {...} // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x,y) => {...} //매개변수가 여러 개의 경우, 소괄호를 생략할 수 없다. //함수 몸체의 지정 방법 x => { return x * x} //signle line block x => x * x //함수의 몸체가 한줄구문이라면 중괄호를..

[ES6] Scope 연산자 let, const
Language/Javascript 2023. 4. 20. 09:11

Scope 연산자 let, const 기존 ES6 변수들을 선언할 수 있는 방법은 var 키워드이다. var키워드를 사용할 때 주의를 기울이지 않으면 심각한 문제를 일으킨다. [문제점] Function-level scope(함수레벨 스코프) 함수의 코드 블록만을 스코프로 인정한다. 그러므로 전역함수 외부에서 생성한 변수는 모두 전역 변수이다. 이는 전역변수를 남발할 가능성이 크다. for문 변수 선언문에서 선언한 변수를 블록 외부에서 참조할 수 있다. var 키워드 생량 허용 : 암묵적 전역 변수를 만들어 낼 가능성이 크다. 변수 중복 선언 허용 : 의도하지 않은 변수값의 변경이 일어날 가능성이 크다. 변수 호이스팅 : 변수를 선언하기 이전에 참조할 수 있는 것. 대부분의 문제는 전역변수로 인해 발생한다..

[JS] 호이스팅(Hoisting)
Language/Javascript 2023. 4. 20. 09:06

호이스팅 (Hoisting) 자바스크립트의 인터프리터가 함수선언과 변수선언의 선언들이 속해 있는 스코프의 최상단으로 끌어올릴수 있는 방법에 대한 일종의 비유이다. 이로인해 자바에서 작성했다면 분명히 잘못된 것을 컴파일하면 실패하는 것들이 자바스크립트에서는 전혀 문제가 되지 않은 것을 볼 수 있다. travel = 'No Plan'; var traval; console.log(traval); //undefined function travel() { console.log('Traveling'); } travel(); //TypeError: travel is not a function function workout() { goToGym(); var goToGym = function..

[ES6] 객체 프로퍼티와 프로퍼티 속성
Language/Javascript 2023. 4. 20. 09:05

객체 프로퍼티와 프로퍼티 속성 자바스크립트에서 객체는 논리적인 프로퍼티의 집합이며 속성(Attributes)은 프로퍼티의 상태를 정의하고 설명하는데 사용한다. 프로퍼티의에는 데이터 프로퍼티(Data Property), 접근 프로퍼티(Access Property)가 있다. 데이터 프로퍼티(Data Property) value : 자바스크립트의 모든 자료형 writeable : 데이터 프로퍼티의 변경가능 여부 정의 enumerable : for-in 구분을 이용해 열거 가능 여부 정의 configurable : 제거 가능 여부, 접근 프로퍼티 변경 여부, 쓰기 불가 여부, enumerable 속성의 수정 가능여부 정의 접근 프로퍼티(Access Property) get 접근자(get accessor) : F..

article thumbnail
[JavaScript]브라우저명과 모바일, PC브라우저 체크
Language/Javascript 2016. 4. 14. 15:51

1. 모바일 브라우저라면 모바일 브라우라우저라고 출력하고 PC브라우저라면 PC브라우저라고 출력하기.2. 브라우저 종류 출력하기 broswerChk.js 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455var broswer = {}; broswer.isMobile = function() { var tempUser = navigator.userAgent; var isMobile = false; // userAgent 값에 iPhone, iPad, ipot, Android 라는 문자열이 하나라도 존재한다면 모바일로 간주됨. if (tempUser.indexOf("iPhone") ..

article thumbnail
[JavaScript] 5자리 인증번호 만들기
Language/Javascript 2016. 4. 11. 17:46

0~9까지 다섯자리 인증번호 만들기 javaScript 소스 rand.js1234567891011121314151617var randomNum = {};//0~9까지의 난수randomNum.random = function(n1, n2) { return parseInt(Math.random() * (n2 -n1 +1)) + n1;};//인증번호를 뽑을 난수 입력 n 5이면 5자리randomNum.authNo= function(n) { var value = ""; for(var i=0; i