본문 바로가기

개발(Development)/JS(자바스크립트)80

[자바스크립트] 대소/동등/일치 비교 연산자와 Object.is() # 동등/일치 비교 연산자 1. 동등 비교 연산자 : ==, != 1) '값'만 비교 한다. 2) '타입' 일치 여부는 체크하지 않는다. => 암묵적 타입 변환이 발생해서 결과를 예측하기가 힘들다. console.log(1 == '1'); // true console.log(0 == ''); // true console.log(true == 'true') // false console.log(NaN == NaN); // false // 경우에 따라 숫자는 타입이 변환 되고, 불리언은 안되고, 실수하기 쉽다. 2. 일치 비교 연산자 : ===, !== 1) '값'과 '타입'까지 일치해야만 true를 반환한다. 2) NaN은 체크하지 못한다. isNaN(값) 함수로 체크 필요. console.log(1 ==.. 2020. 12. 11.
[자바스크립트] 실행 환경 ECMA Script, Web API, Node.js 예전에 node.js를 처음 다룰 때, document.getElementById()나 XMLHttpRequest가 왜 안되지... 하면서 헤매곤 했었다. 반대로 브라우저 환경에서 __dirname 등이 안 먹어서 어리둥절 했었다. 이는 자바스크립트는 실행환경에 따라 제공되는 API가 다르기 때문이다. # 자바스크립트 실행 환경 : 자바스크립트라고 하면 아래의 4가지가 연상된다. 1) ECMA Script의 문법 기준을 따르는 프로그래밍 언어 : 변수, 객체, if문, for문 등 2) 브라우저 전용 Web API : BOM, DOM, XMLHttpRequest 등 3) Node.js API(키워드, 객체, 모듈 등) : __dirname, process, path, fs 등 4) 기타 라이브러리 API.. 2020. 12. 10.
[자바스크립트] 문자열 여러번 반복 생성 방법 2가지 "a" 라는 문자를 여러개 이어붙여서 만들고 싶을 때가 있다. "aaaaaaaaaa" 라고 쳐도 되지만, a가 1000개쯤 되면 직접 타이핑하는건 개발자스럽지 못하다. (아닌가? 오히려 개발자스러운가?) 다른 언어에서는 "a" * 100을 해도 되는 경우가 있지만, 자바스크립트는 안 된다. 아래 두가지 방법으로 문자열을 n 개로 반복 생성할 수 있다. # Javascript 문자 n번 반복 생성 방법 1. String.prototype.repeat(n) : 문자열.repeat(n) => 문자열을 n번 반복 연결한 문자열 반환 * n은 반복할 횟수(정수) * n을 생략하거나, 0으로 지정시, 빈 문자열 "" 반환 "a".repeat(3); // "aaa" 반환 "abc".repeat(3); // "abca.. 2020. 12. 4.
[자바스크립트] 논리연산자(&&, ||) 단축평가 # 단축평가란? ||(논리합), &&(논리곱) 연산자는 왼쪽부터 오른쪽으로 평가를 진행하는데, 중간에 평가 결과가 나오면 오른쪽 끝까지 가지 않고 평가 결과를 반환해 버린다. 이를 '단축 평가(short circuit evaluation)'라고 하며, 피연산자의 타입을 변환하지 않고 그대로 반환한다. 단축평가를 활용하면 아래와 같은 코드가 가능해진다. "apple" || "banana"; // "apple" "apple" && "banana"; // "banana" 하나하나 차근차근 살펴 보자. 1. ||(논리합) 연산자의 단축 평가 || 의 경우, 둘 중 하나만 true면 true로 평가되므로 왼쪽 피연산자가 true이면 바로 true를 반환한다. true || false; // true(오른쪽의 fa.. 2020. 10. 15.
[자바스크립트] 변수 선언 방식 차이: var / let / const 자바스크립트의 변수 선언은 var로만 가능했으나, ES6(ES2015)부터 let과 const가 추가 되었다. 옛날의 var가 최신의 let(변수), const(상수)로 분리되었다고 생각할 수 있으나, 내부 사정은 상당히 다르다. (참고로 여전히 var도 함께 사용이 가능하다) var와 let, const가 어떻게 다른지 상세하게 정리해본다. # var, let, const 차이점 5가지 1. 중복선언 가능 여부 2. 재할당 가능 여부 3. 변수 스코프 유효범위 4. 변수 호이스팅 방식 5. 전역객체 프로퍼티 여부 #1. 중복선언 1. var : 중복 선언이 가능하다. // 첫번째 변수 선언+초기화 var a = 10; console.log(a); // 10 // 두번째 변수 선언+초기화 var a = .. 2020. 10. 14.
[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.

티스토리툴바