본문 바로가기

JavaScript38

[JS] 자바스크립트: ES6 객체 리터럴 기능 3가지 # ES6 : 새로운 객체 리터럴 기능 ES6부터 '객체 리터럴' 방식으로 객체 생성시, 아래의 기능이 추가되었다. 첫째, 프로퍼티 key 이름을 계산해서 사용할 수 있다. 둘째, 프로퍼티/메서드 생성 시, 변수만 설정해주면 된다.(key:value 불필요) 셋째, 메서드 생성 시, key값이나 function 키워드 없이 바로 메서드를 생성할 수 있다. 각각에 대해 쉬운 코드와 함께 정리해 본다. ▼객체 생성 방법 자체에 대한 내용은 아래글 참고. [JS] 자바스크립트 객체 생성, 접근 방법 1. 프로퍼티 key에 계산식 사용 객체 내부에서 프로퍼티의 key를 [계산식] 로 사용할 수 있다. var num_01 = 1; var num_02 = 2; var strHello = 'hello'; var ne.. 2020. 10. 13.
[JS] 자바스크립트 객체 프로퍼티 생성, 삭제 방법 # 프로퍼티/메서드 동적 생성 자바스크립트는 객체 생성이 완료된 후에도, 프로퍼티나 메서드를 추가할 수 있다. 1. 객체.신규key = 값 or 메서드 : 마침표(dot notation)를 이용해 신규 프로퍼티를 만들 수 있다. //myObj 객체 생성 var myObj = { prop_01: 1, method_01: function(){return 'func_01';} }; //prop_02 프로퍼티, method_02 메서드 생성 myObj.prop_02 = 2; myObj.method_02 = function(){return 'func_02'}; //생성 확인 console.log(myObj); /* { prop_01: 1, method_01: [Function: method_01], prop_02.. 2020. 10. 13.
[JS] 자바스크립트 객체 생성, 접근 방법 # 자바스크립트 객체(Object) 자바스크립트에서 원시 타입을 제외한 모든 데이터 타입(객체, 함수, 배열, 정규표현식 등)은 객체다. 객체는 여러가지 값을 가질 수 있으며, 함수도 가질 수 있다. 객체가 보유한 값을 '프로퍼티'라고 하며, 객체가 보유한 함수를 '메서드'라고 한다. (둘다 프로퍼티라고 하기도 한다) 객체의 프로퍼티와 메서드들은 '키값'으로 구분된다. var object ={ key1: value1, key2: value2, ... } # 객체 생성 방식 객체를 생성하는 방법은 3가지 정도가 있다. 1) 객체 리터럴, 2) 생성자 함수, 3) Object.create() 1. 객체 리터럴 방식(Object Literal) var obj = { key: value, ... } : 변수처럼.. 2020. 10. 12.
[JS] 자바스크립트 형변환 #3: number to boolean 등 # 불리언으로 타입변환 방법 2가지 숫자, 문자열, 객체 등은 불리언 타입으로 변환 가능하다. 1. Boolean( 숫자 || 문자열 || 객체 || undefined || null ) : Boolean() 생성자 함수를 new 연산자 없이 호출하여 불리언 타입으로 변환하는 방법 2. !! ( 숫자 || 문자열 || 객체 || undefined || null ) : 부정 논리연산자(!)를 연달아 두번 사용해서 불리언 타입으로 변환하는 방법 1) number to boolean : 0, NaN은 false, 나머지는 모두 true. Boolean(0);// false Boolean(1); // true Boolean(-11.55);// true Boolean(NaN); // false Boolean(Inf.. 2020. 10. 11.
[JS] 자바스크립트 형변환 #2: string to number 등 # 자바스크립트 타입 변환(X to number) 문자열이나 불리언을 숫자로 형변환하는 방법은 4가지 정도다. 1) parseInt(정수 문자열) || parseFloat(실수 문자열) 2) Number(문자열 or 불리언) 3) + (문자열 or 불리언) 4) (문자열 or 불리언) * 1 # 문자열를 숫자로 변환(string to number) : "111" 처럼 숫자로 된 문자열만 변환 가능하다. 숫자가 아닌 경우, NaN 반환 1. parseInt(정수 문자열) || parseFloat(실수 문자열) : 소수가 없는 정수는 parseInt(), 소수가 있는 실수는 parseFloat()로 형변환. parseInt("11") // 11 parseFloat("11.55") // 11.55 parseI.. 2020. 10. 10.
[JS] 자바스크립트 형변환 #1: number to string 등 # 자바스크립트 타입 변환(X to string) 숫자나 불리언을 문자열로 형변환하는 방법은 3가지 정도다. 1) (숫자 or 불리언).toString() 2) String(숫자 or 불리언) 3) "" + (숫자 or 불리언) # 숫자를 문자열로 변환(number to string) 1. (숫자).toString() : Object.prototype.toString 메서드를 활용하는 방법 (111).toString() // "111" (NaN).toString() // "NaN" (Infinity).toString() // "Infinity" 2. String(숫자) : String 생성자 함수를 new 없이 활용하는 방법 String(111) // "111" String(NaN) // "NaN" St.. 2020. 10. 10.
[JS] 자바스크립트 템플릿 리터럴: 백틱(``), 달러(${ }) 사용법 # 템플릿 리터럴(Template Literal) ES6부터 새로 도입된 문자열 표기법이다. 문자열 생성시 따옴표 대신, 백틱(`)을 사용한다. var str_01 = `hello world`; # 템플릿 리터럴의 기능 1. 줄바꿈(개행: Multi-line strings) ▶︎ 백틱(`)으로 템플릿 리터럴을 사용하면, 줄바꿈 등을 쉽게 표현할 수 있다. var str_01 = ` Hi! It's me! JavaScript! So Cool!`; ▶︎ 기존 따옴표 방식에서는 줄바꿈이 허용되지 않았기 때문에, ▶︎ 백슬러시(\)로 시작하는 이스케이프 시퀀스를 사용해야 했다. var str_01 = "Hi! \n\t It's me! \n\t\t\t JavaScript! \n So Cool!"; * \n은 개행.. 2020. 10. 10.
[JS] 자바스크립트 래퍼 객체 (기본/원시타입 표준메서드) # 기본타입의 메서드 호출 (Methods of Primitives) 자바스크립트의 기본타입(원시타입)은 객체가 아니다. 하지만, undefined와 null을 제외한 숫자, 문자열, 불리언, 심벌은 객체처럼 메서드 호출이 가능하다. ('기본타입의 표준 메서드'라고 하기도 한다.) 즉, 아래와 같은 코드가 동작한다. 'hello world'.toUpperCase() // HELLO WORLD 아래는 VS Code 같은 에디터에서, 숫자, 문자열, 불리언, 심벌 타입 변수에 도트(.)를 찍었을 때의 자동완성 목록이다. 객체가 아님에도 (method) 목록이 뜨는 걸 확인할 수 있다. 그리고, 각 메서드 옆에 아래와 같은 도움말이 뜬다. (method) Number.toExponential... (metho.. 2020. 10. 10.
[JS] 자바스크립트 null은 객체? 기본 타입! (typeof null) # 자바스크립트 null? 자바스크립트의 null은 '의도적으로 값이 없음'을 명시하기 위한 기본 데이터 타입이다. 타입도 null이며, 값도 null인 Primitive Type이다. 즉, null은 객체가 아니다!(기본 타입이다!) # typeof null? 하지만 typeof 연산자로 null의 타입을 체크해보면, object가 뜬다. var null_01 = null; typeof null_01; // object 객체인건가 헷갈릴 수 있지만, 이건 자바스크립트 초기 버전의 버그다. # typeof 연산자의 버그 typeof 구현 코드의 원리는 대충 아래와 같다. if(is_undefined?){ // undefined 체크 return undefined; }else if(is_object?){ .. 2020. 10. 10.

티스토리툴바