자바스크립트 기초
자바스크립트 파워북 www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791197122811
자바스크립트 파워북 - 교보문고
자바스크립트 입문자를 위한 학습서로, ES6 기초부터 DOM에 대한 이해까지 할 수 있습니다. 300개 이상의 기초 예제를 통해 자바스크립트 실력을 키울 수 있으며, 실무 프로젝트에서 가져 온 다양
www.kyobobook.co.kr
변수와 상수
- ES5까지 사용하던 var
- ES6에서 새롭게 추가된 let, const
- ES5 까진 상수 선언이 없었지만 ES6에 와서 const 상수 선언자가 생겼다.
- 상수로 선언한 변수에 다른 값을 대입하면 에러가 발생
- 변수를 선언하는 방법은 var, let이 존재
- var, let을 혼용하지 않는 것이 좋다.
- let 사용하는 것이 권장사항이지만, 기존의 var 코드를 수정하거나 확장하는 경우에는
var을 사용
변수의 스코프
- var 변수가 사용되는 범위
- 전역 or 함수 내부 로컬만 가능
- let 변수가 사용되는 범위
- 전역, 함수 내부 로컬, 코드 블록, 구문, 표현식 로컬로도 정의해 사용 가능
- let은 변수가 사용되는 스코프가 존재,
- 자신의 스코프(실행 사용 범위)블록과 선언된 블록의 하위 블록, 구문, 표현식에서만 접근 가능
- 전역 객체의 속성
- var, let은 전역 객체를 접근하는 this 지시자로 접근하는 방법에도 차이가 존재
- var로 생성한 변수는 전역 객체 속성이 생성되어 전역 객체로 접근 가능,
- let은 더이상 전역 객체 속성이 생성되지 않는다.
- 전역 변수로 선언했으면, 전역으로 접근이 가능하지만 전역 객체 속성으로
접근되지 않는다.
var str = “var”;
let str2= “let”;
console.log(this.str1); // “var”
console.log(this.str2); // undefined
function run() {
console.log(this.str1); // “var”
console.log(this.str2); // undefined
console.log(str1); // “var”
console.log(str2); // “let”
}
변수의 호이스팅(Hoisting)
- var로 함수 안의 코드 중간에 선언된 변수들은 hoisting이라는 자바스크립트의 언어 특징으로 인해
런타임 시점에 함수 맨 위로 선언이 이동한다.
- 함수의 실행 전 함수 코드를 전 처리하여 변수의 선언 구문만을 모아 함수 맨위로 따로 모으는 개념
- 이는 스크립트 언어인 자바스크립트가 변수 선언 없이 변수를 즉시 사용하면서 발생하는 미선언 변수 사용으로 인한 에러를 방지하기 위한 기법
- 선언하기 전, 호이스팅에 의해 위로 끌어 올려져 변수 선언은 되어 있지만
초기화되어 있지 않아 Undefined 상태인 변수가 된다.
- 반면 let은 호이스팅을 하지 않는다. 변수가 선언되기 전에 사용되면 에러가 발생
- 변수 호이스팅이 편리하기는 하지만, 자바 스크립트가 긴 경우 변수 호이스팅으로 인한 오버헤드가 발생
- let으로 변수를 사용할 경우에는 반드시 선언 후에 사용
- 변수 선언의 확장과 호이스팅
- 변수를 선언할 때는 기본적으로 [변수 선언자 변수명 = 초기값;]
- 위 같은 방식으로 변수를 선언하지만 여러 개의 변수를 선언할 때는 다음과 같이
나열형으로 선언하면 코드 양을 단축 가능
// 여러 개의 변수를 같은 값으로 치고하
let name1 = name2 = name3 = ‘’;
// 객체 속성 값들을 배열로 초기화
let {name1, name2, name3} = ‘names’;
let arrNames = [‘name1,’name2’,’name3’];
let {name1, name2, name3] = arrNames;
- 변수 선언을 호이스팅하는 자바스크립트의 기본 선언 방식과 마찬가지로 함수명도 호이스팅을 한다.
function getName() {
return “name”;
}
let getName = undefined;
getName = function getName() {
return “name”;
}
- 호이스팅은 스크립트형 언어인 자바스크립트가 변수나 함수가 선언되지 않은 상태에서
사용할 수 있도록 해주는 기반
변수 명 사용 규칙과 제약사항
- 자바스크립트는 자유도가 높은 언어
- _var, $1, _name_of_value_ 와 같은 자바스크립트 변수명들도 모두 사용 가능
- 심지어 아래와 같은 변수 선언 및 사용까지 허용한다.
let 0_9 = ‘변수’;
let _ = 1;
let $ = 2;
let $2 = _ + $;
- 기본적으로 자바스크립트 언어 명세에서 코드 생성기의 목적이 아닌 경우 변수 접두어로
$를 사용하는 것을 권장하지 않지만, 자바스크립트 명세 자체에서는 $,_ 사용에 대한 제한이
없기 때문에 실제 사용에는 문제가 없다.
- 실제로 사용하는 것을 권장하지 않는다.
- 기본적으로 자바스크립트 변수 명에 자바스크립트 예약어를 사용하지 못한다
- 예약어는 모두 소문자로 표시하지만, 예약어 중 Infinity, NaN과 같이 대문자가 포함된 예약어는
문법 구문으로 사용하는 예약어가 아닌, 출력용 예약어이므로
고정된 단어로 대소문자를 구분해 단어 그대로 출력된다
- 예약어 목록
arguments await break case catch class const continue debugger
default delete do else enum eval export extends false finally for function if
implements import in Infinity instanceof interface let NaN new null package
private protected public return static super switch this throw true try typeof
undefined var void while with yield
-자바스크립트의 모든 변수와 함수 이름은 소문자로 시작하는 것이 원칙이지만, 소문자도 되고 대문자도 된다.
- 한가지 예외가 있다면 new 연산자로 인스턴스를 생성하는 경우 객체 생성자는 대문자로
시작해야 한다. (이것도 약속이기 때문에 소문자도 된다.)
원시형 데이터 타입과 참조형 데이터 타입의 이해
- 자바스크립트는 다른 언어와 달리 내장형 자료형이 많지 않다.
- 간결할 만큼 복잡하지 않고 이해하기도 쉽다.
- 원시형 데이터 타입
|
자료형 |
설명 |
|
숫자형(Number) |
정수, 실수, 지수 표현 등 모든 숫자 형태의 데이터를 표현하는 자료형. |
|
문자형 |
문자, 숫자, 기호, 특수문자의 모음을 작은 따옴표, 큰 따옴표로 감싸서 표현하는 자료형 |
|
불리언형 |
참(true)/거짓(false) 두 가지 값만을 가지는 자료형 |
|
심볼형 |
ES6에서 새로 추가된 자료형, 문자열 인자를 받아 고유한 키 값을 생성. 같은 인자를 넘겨도 다른 키 값이 생성되기에 값이 실행할 때마다 다른 값이 필요할 때 사용 |
|
null |
빈 값을 의미. 변수는 선언되었지만, 값이 초기화되지 않은 상태 |
|
undefined |
변수 자체가 선언되지 않은 것 |
- 참조형 데이터 타입
- 객체만 있기 때문에 객체와 같다고 보면 된다.
- 중괄호 안에 {} “키:값” 형태로 하나 이상의 속성을 표현 한 것.
- 객체의 속성 키는 반드시 문자형이어야 하며, 값은 원시형, 또는 객체가 될 수 있다.
- 객체 속성 값에는 다시 객체가 올 수 있다 (중첩)
- 객체 속성 값에 대한 접근은 객체 속성 키를 통해 가능.
전역 변수를 가급적 사용하지 않는 이유 : 보안상 안전하지 않기 때문에
- 전역 변수에 사용한 중요 정보가 노출되면해커는 XSS(Cross Site Scripting) 공격으로 사이트의,
서버를 점령 가능
- XSS를 이용한 위변조 공격에 속수 무책으로 당할 수 있으므로, 전역 변수에 결제, 또는 인증과 관련된
중요 정보를 저장해서 사용할 경우 100% 확률로 사이트가 위변조 피해를 입게 된다.
- 전역 변수는 가급적 사용하지 않는 것이 좋으며, 전역 변수의 값을 전송하는 경우 서버에서
전송된 값의 추가 검증을 반드시 해야 한다.
자료형의 변환
- 타입 캐스팅, 형 변환
- 자바스크립트는 원시 내장 타입 간의 변환, 또는 숫자형의 정수, 실수 사이의 변환을 지원
- 자바스크립트는 숫자를 표현하는 원시 자료형이 숫자형 1개만 있기에, 실수 또는 정수형 연산을 해야 하는 경우
명시적으로 변환을 해야 연산 결과의 오차를 피할 수 있다.
- 다른 자료형 간의 연산을 할 때 명시적으로 변환을 하지 않아도 자동으로 형 변환을 해주고,
자동 현 변환은 자바스크립트 내부의 정해진 규칙에 따라 이루어진다.
- 자동 형 변환 규칙
|
연산자 |
우선순위 |
형변환 규칙 |
|
+ |
문자열 |
문자열+문자열은 문자열 합치기 |
|
-,*,/ |
숫자 |
숫자로 형 변환이 가능한 경우 모든 경우에 문자열 → 숫자로 변환 |
- NaN은 숫자형이 아니라, 원시 데이터 중 하나로 “NaN” 이라는 고유 데이터이다.
- 주로 숫자로 형 변환하거나, 숫자 연산의 결과 값이 숫자가 아닌 경우 “NaN”을 반환한다.
- 숫자 형 변환이나, 연산의 결과가 “NaN”인지를 체크 가능하도록 isNaN() 내장 함수가 별도로 제공된다.
- 숫자(정수 → 실수) 형 변환
- Number 타입이 경우 정수와 실수 연산시 실수에 우선 순위가 있다.
- 따라서 결과 값이 정수여야 할 경우에는 실수를 정수로 형 변환하거나 결과 값을 형 변환해야 한다
- 자바스크립트는 정수, 실수 변환을 위한 내장 메서드(함수) 2개를 제공
- parseInt()는 정수형으로 강제 형 변환을 하고, 형 변환이 불가능 한 경우 “NaN”을 반환
- parseFloat()는 부동소수점 실수형으로 강제 형 변환을 한다. 형 변환이 불가능한 경우 “NaN”을 반환
- parseInt(), parseFloat() 함수는 입력 받은 값을 파싱할 때 2가지 규칙을 적용
1. 입력 받은 값을 문자로 변환한 후, 첫 문자가 숫자인지를 체크해서 숫자가 아니면
“NaN”을 반환하고 함수 종료
2. 1번째 문자 이후로는 숫자가 아닌 문자가 나올 때까지만 사용하고 그 이후는 모두 버린다.
문자열과 조합된 숫자가 넘어오면 파싱이 가능한 부분까지만 형 변환을 한다.
예를 들어, “123ab”는 숫자 123을 반환
- 문자열로 형 변환
- 숫자형에는 문자열로 변환하는 toString() 메서드가 제공
- join() 메서드를 사용해 배열 요소들을 하나의 문자열로 합칠 수 있다. 그 외에는 내장 함수인 String() 함수를
사용해 문자열로 형 변환을 한다.
- String() 함수는 모든 원시 자료형 및 배열에 사용 가능
- 객체의 경우 내부 객체 요소가 개별 객체로 인식 되기에 “Object 로 출력될 분 객체의 값이
문자열로 표시되지 않는다.
- String()으로 숫자와 배열의 문자열 형 변환이 가능하지만, 내장 메소드 사용을 좀 더 권장.
내장 메소드의 파라메터 옵션을 통해 문자열로 변환 시 변환되는 문자열로 가공 가능
- 배열의 내장 문자열 변환 메서드의 join()의 경우 문자열로 합칠 때 중간 구분자를 사용자가 지정 가능
console.log((3.14).toString()) // “3.14”
let arr = [1,2,3];
let obj = {name: “라이언”, age:5};
console.log(arr.join()); //”1,2,3”
console.log(String(arr)); // “1,2,3”
console.log(String(obj.age)); // 5
숫자 표현과 숫자 변환 기초
- 자바스크립트의 숫자형은 134, -1508, 0.27, 2.344e6과 같은 모든 숫자 표현을 말한다.
- 다른 개발 언어의 정수형, 실수형, 부호 없는 정수형과 같은 세세한 숫자형의 구분 방식과
달리 자료형이 1개만 있다.
- 자바스크립트의 숫자형은 내부적으로 부호가 있는 64비트 부동소수점으로 저장된다.
|
비트 자릿수 |
표현 |
|
0~51 |
숫자(52비트) |
|
52~62 |
지수(11비트) |
|
63 |
부호표시(1비트) |
- 그 외, 숫자형은 아니지만 수적인 표현을 사용하기 위해 Infinity(무한),
NaN과 같은 숫자형을 보조하는 자료형이 있다.
- Infinity와 NaN은 계산 결과 값이 숫자로 표현할 수 없는 경우(64비트 부동소수점으로 표현할 수 없는 값)에
결과 값을 대신해 표시한다.
- 정수형, 실수형 데이터의 구분이 아예 없는 것은 아니다. 연산을 하기 전에 숫자를 캐스팅해서 구분 불가능하다.
- parseInt(), parseFloat() 함수 등을 사용해 부동소수점 실수형과 정수형으로 변환 가능
- 정수형 변환
- 전역 함수인 parseInt()를 사용.
- 숫자 또는 문자열을 파라미터로 받아 정수 값을 반환, 정수로 변환 불가능할 경우 “NaN”을 반
- 두 번째 파라미터로 진법(2~36 진수)을 지정 가능.
- parseInt() 함수는 파라미터 첫 번째 문자가 숫자인지를 판단하며, 숫자가 아니면 “NaN”을 반환
- 두번째 문자부터 숫자가 아니면 해당 문자 이후를 모두 버린다
- 3자리마다 콤마 찍기
- 금액 표시를 위해 3자리마다 콤마를 찍는 메서드나 함수가 제공되지 않기에
정규표현식(Regular Expression)을 사용하여 3자리마다 콤마를 표시해야 한다.
/\B(?=(\d{3})+(?!\d))/g- 위 정규 표현식은 소수점 이하 4자리 이상으로 긴 숫자에는 대응하지 못한다.
const num = 12345678;
consle.log(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”)); //12,345,678
- 부동소수점 실수로 변환
- 전역 함수인 parseFloat()을 사용.
- 숫자 또는 문자열을 파라미터로 받아, 부동소수점 실수를 반환. 반환 불가능할 경우 “NaN” 반환
- 소수점 자릿수 제한
- 숫자형의 메서드 toFixed()를 사용해 소수점 자릿수를 제한한 문자열로 변환 가능.
- 문자열로 결과 값을 반환한다는 것에 주의.
- 음수의 경우 숫자형이 반환되기에 수사를 괄호로 감싸서 마이너스 부호 적용이 먼저 이루어지도록 해야
문자열을 반환
- toFixed()의 숫자 변환 규칙
1. 소수점 자릿수를 제한하는 길이 용 파라미터 1개를 받는다.
2. 파라미터가 없거나 0을 넘긴 경우 반올림한 정수 값이 된다.
3. 소수점 자릿수를 줄일 경우 밑에 자리에서 반올림한 값이 된다.
4. 자릿수를 늘릴 경우 남는 공간만큼 0으로 채운다.
5. 음수의 경우 숫자를 괄호로 감싸 toFixed()를 적용해야 문자열이 반환
6. 결과 문자열을 숫자로 변수에 할당하려면 “1*소수점숫자.toFixed(2);
와 같이 연산식을 붙여 결과 값을 숫자형으로 캐스팅하는 트릭을 쓸 수 있다.
- 내림, 올림, 반올림, 버림
- 자바스크립트 전역 객체인 Math 객체의 전용 메소드 들을 활용하면 소수점 이하 숫자를 원하는 방식으로
표현 가능
|
기능 |
메서드 |
설명 |
|
내림 |
Math.floor() |
내림 한 정수를 반환, 주어진 숫자보다 작거나 같은 정수를 반환 |
|
올림 |
Math.ceil() |
올림 한 정수를 반환, 주어진 숫자보다 크거나 같은 정수를 반환 |
|
반올림 |
Math.round() |
소수점 숫자가 가까운 쪽의 정수를 반환 |
|
버림 |
Math.trunc() |
소수점 이하를 모두 버리고 정수형으로 변환 |
- 절대값, 숫자의 부호를 얻기
- 숫자의 양수 음수를처리하는 메서드
|
기능 |
메서드 |
설명 |
|
절대값 |
Math.abs() |
숫자의 부호 없는 양의 숫자 값을 반환 |
|
부호 |
Math.sign() |
숫자의 부호를 알려준다. |
- 숫자형의 표현 범위와 사용시 주의할 점
- 자바스크립트의 숫자형 구현은 다른 언어 기준으로는 64비트 배정도 부동소수점 실수 타입.
- 64비트 실수의 자리 수 구성은 1개의 부호 비트 + 11비트 지수 + 52비트 숫자로 이루어진다.
- 자바스크립트에는 -0도 존재
- 전역 객체의 “is()” 메서드는 파라미터로 넘어온 두 값이 같은지를 비교하여 boolean을 타입의 값을 반환
- Object.is(0,-0)은 다른 숫자로 인식되어 false를 리턴
- NaN과 Infinity
- NaN과 Infinity는 실제 숫자 값은 아니지만 숫자 타입으로 정의
- Object.typeof()로 출력해보면 둘은 숫자 타입(number), 숫자는 아니지만 숫자이며
실제 숫자처럼 변수에 대입해서 사용도 가능
- 내장 예약어, 별도로 정의된 숫자 타입의 한 종류이며, NaN은 문자열을 숫자로 변환 불가능한 경우,
Infinity는 숫자로 표현할 수 없는 큰 숫자인 경우(자바스크립트로 표현 가능한 최대 정수보다 큰 경우)
- 내장 속성 중 특별한 속성이 몇가지 있다.
Number.EPSILON : 두 표현 가능한 숫자의 최소 간격 // 2.2200446049250313e-16
Number.MAX_SAFE_INTEGER : 안전한 최대 정수. // 9007199254740991 → 2의 53승 -1
Number.MAX_VALUE : 표현 가능한 가장 큰 양수. // 1.7976931348623157e+308
Number.MIN_SAFE_INTEGER : 안전한 최소 정수. // -9007199254740991 → -(2의 53 -1)
Number.MIN_VALUE : 표현 가능한 가장 작은 양수. 0보다 큰 0에 가장 가까운 양수 // 5e-324
Number.NaN : 숫자가 아님을 나타내는 특별한 값
Number.NEGATIVE_INFINITY : 음의 무한대를 나타내는 특수한 값. 오버플로우 시 Infinity를 반환
Number.POSITIVE_INFINITY : 양의 무한대를 나타내는 특수한 값. 오버플로우 시 -Infinity를 반환
소수점 오류
- 아주 정밀한 소수점 단위 합계를 여러 개 누적하거나, 차감하는 경우 자바스크립트는 최종 결과값이
실제 값과 차이가 나는 경우가 발생
- 자바스크립트로 정밀한 소수점 수학 계산식이나, 실제 세계의 소수점 금액을 계산하는 용도로 사용할 때는
소수점 이하 값을 사용할 때 특별히 주의
- 최대 안전한 정수를 초과해서는 안된다.
- Number.MAX_SAFE_INTEGER 값을 넘어서는 정수를 사용 불가능. 넘어서는 경우에는 문자열로 표현해 사용
- 큰 금액 단위를 표현하는 숫자 값을 사용하는 경우 자바스크립트는 표현에 많은 제약이 생긴다.
- 배열을 사용해 큰 숫자를 2개 이상으로 쪼개서 부분 계산을 이용해 +/- 연산을 하는 방식을 사용할 수도 있다.
- 불리언 사용시 주의
- ==, != 보다, ===, !==를 사용하도록 권장하는 이유는 자바스크립트의 두 항목 비교시점에서 발생하는 타입캐스팅으로 인한 문제점을 피할 수 있기 때문이다.
- 데이터 타입이 단순한 자바스크립트에서는 이런 변수 표기 방법을 사용해 용도를 구분하는 것을 추천
- true/false
- false, null, undefined, ‘’(빈문자열), 0, NaN
- 자바스크립트에서 false라고 판단하는 값
- 이외에는 모두 true가 된다.
Null, Undefined, 0의 차이
- 자바스크립트에서 변수에 값이 할당되지 않은 것을 표현하는 방법
- Null(널, null) : 자바스크립트에서 변수가 빈 값으로 초기화 된 상태임을 표시
- Undefined는 변수가 정의되지 않은 것. 선언되지 않았기에 호이스팅에 의해 변수 명만 존재하고
아무 것도 할당되지 않은 것.
- 자바스크립트는 원시형 데이터 타입도 내부적으로 객체로 래핑해서 구현하기에 원시형 변수를 선언했지만,
내부적으로는 객체가 생성된다.
- Null은 내부적으로 널 객체가 생성되고, 변수는 이 널 객체의 참조 주소를 가지고 있다.
- Undefined는 내부 객체가 생성된 것이 없다. 따라서 변수는 객체의 참조 주소도 가지고 있지 않다.
- 둘다 실제 데이터 값은 없지만 “Undefined”는 내부적으로 사용하는 객체 조차도 생성되지 않은 것.
- null/undefined의 비교
- 둘 다 값이 할당되지 않은 점에서 같기에 값만 비교하는 이항 비교 연산자를 사용하면 true로 처리가 된다.
- 함수의 파라미터를 정의할 때 불필요하게 많은 파라미터를 정의해서 인자로 넘어오는 값이 없는 상태의
파라미터가 생기는 것은 좋지않다.
- 자바스크립트는 정의한 파라미터에 인자 값이 넘어오지 않으면 “Undefined”를 넘기게 되므로, 정의한 함수의 파라미터 개수와 실제 파라미터 개수가 달라도 자바스크립트는 에러를 발생시키지 않는다.
- 다만 파라미터 변수를 사용하는 시점에서 “Undefined” 인 파라미터 값으로 인해 오류가 발생한다.
- 오류 상태를 피하기 위해 “Undefined” 여부를 사전 체크하는 코드를 추가해야하는 번거로움이 있고
- 자바스크립트는 “Undefined” 문제를 피하기 위한 다양한 방법을 ES6에서 도입하였다.
- true/ false
- Null, Undefined, 0은 모두 조건문 비교에서 false이므로, 변수에 값을 적용하거나 객체를 할당하는 경우,
변수의 true/false 여부를 체크함으로써 변수나 객체 할당이 이루어졌는지를 체크 가능하다.
- 변수의 true/false를 체크하는 습관을 기르자
연산자 기초
- 크게 5가지 타입의 연산자로 구분
- 산술, 비교, 논리 삼항, 비트 연산자 5가지
- 산술 연산자
- +, -, *, / 의 사칙 연산을 하는 연산자
- 문자열의 경우에는 더하기 연산자를 사용 가능
- 그 외에 %(나머지), **(제곱), 음수/양수(-/+), 증가/감소(++/--) 연산자가 있다
- 증가/감소 연산자는 숫자 변수의 값을 1증가 또는 1감소한다.
- 사칙 연산자는 등호와 결합해 산술 등호 연산자(+==, *-, -=, /-)로 사용 가능
- 사칙 연산자는 반드시 등호 앞에 와야하고, 사칙 연산자가 등호 뒤에 오면, 사칙 연산자는 무시되고
등호만 적용된다.
-
(x += 3) equal (x = x+3)
- 비교 연산자
- 두 개의 값을 비교해 값이 같은지 크거나 작은지를 비교
|
일치연산자 |
설명 |
|
== |
값이 같음 |
|
!= |
값이 다름 비교하는 두 값이 비교가 가능하도록 캐스팅한 후 비교 |
|
=== |
값이 같고 타입이 같음 |
|
!== |
값이 다르거나 또는 타입이 다름 |
- 관계 연산자는 >, <, >=, <= 비교 연산자가 있다.
- 숫자형 외에도 문자열도 비교 가능 (문자열 비교시에는 대문자보다 소문자 코드 값이 크다는 점만 주의)
(숫자 < 대문자 < 소문자)의 순서
- 삼항 연산자
- if 조건 비교문을 대신해 사용하며, 비교 결과에 따른 값의 대입을 간결하게 표현해주기 때문에
사용빈도가 높다.
- let 변수 = 조건 비교문 ? 참일 경우 실행 : 거짓인 경우 실행;
- 논리 연산자
- 참/거짓을 나타내는 2개의 불리언 항을 비교해 거짓인지를 판단하는 연산자
- 비교하는 좌우 두 항도 불리언, 반환 결과도 불리언
- AND, OR, NOT 3개의 연산자가 존재, 자바스크립트에서 사용하는 논리 연산자의
실제 사용 기호는 &&(AND), ||(OR), !(NOT)
- NOT 연산자는 각 비교항의 앞에 붙으며, AND, OR 연산자는 두 항의 사이에 위치
- 자바스크립트에서 “Undefined”, “Null”, “0”, “NaN”, “”은 false이며, 그 외에는 모두 true로 캐스팅된다.
- 다양한 데이터 타입과 데이터를 논리 연산자로 비교 가능.
- 단 단항을 비교할 때 나중에 나오는 항의 데이터 타입은 반드시 불리언 타입이 되어야 한다.
- 캐스팅 원칙에 따라 뒤에 나오는 항의 데이터 타입을 따라가게 된다.
console.log(!!’문자열’); //true
console.log(1<2 && 3<3); //false
console.log(1 && true); //true
console.log(!!’문자열’ || false)); // true
console.log(null || !!undefined); // false
console.log(false || null); // null
console.log(null || true); // true
- 비트연산자
- 바이너리 데이터 제어 외에도 사용 빈도가 높지는 않지만, 웹에서 이미지
필터 적용이나 암호화 데이터 생성하는 용도로 많이 사용
|
비트연산자 |
기호 |
사용법 |
|
AND |
& |
‘a&b’로 작성. 두 항의 같은 자릿수 비트 값 모두 모두 1이면 1, 둘 중 하나라도 0이면 0 |
|
OR |
| |
‘a|b’로 작성. 두 항의 자릿수 비트 값 중 한쪽만 1이어도 1, 둘 다 0이면 0 |
|
XOR |
^ |
‘a^b’로 작성. 두 항의 같은 자릿수 비트 값 중 한쪽만 1이면 1, 아니면 0 |
|
NOT |
~ |
‘~피연산자’로 작성. 2진수 모든 비트 값을 반대로 바꾼 값. 비트 연산의 결과는 -(피연산자+1)이 된다. |
|
오른쪽 시프트 |
>> |
“피연산자 >> 자릿수”로 작성. 왼쪽 피연산자 숫자를 자릿수 만큼 오른쪽으로 시프트 이동하고, 오른쪽 남는 부분은 버린다. 부호 비트는 그대로 유지하고 음수인 경우 양수 시프트 결과의 마이너스 값이 된다. |
|
왼쪽 시프트 |
<< |
“피연산자 << 자릿수”로 작성. 왼쪽 피연산자 숫자를 자릿수 만큼 왼쪽으로 시프트 이동하고, 오른쪽은 0으로 채운다. 부호 비트는 그대로 유지된다. 음수인 경우 양수 시프트 결과의 마이너스 값이 된다. |
|
0으로 채우는 오른쪽 시프트 |
>>> |
“피연산자>>>자릿수”로 작성한다. 왼쪽 피연산자를 오른쪽 자릿수만큼 오른쪽으로 시프트하고 왼쪽에 생긴 자릿수 만큼의 공백은 0으로 채운다. 음수인 경우 전혀 다른 결과가 된다. -13 >>> 2인 경우 2진수 표현의 왼쪽에 붙는 부호 표시가 2자리 밀리고 그 자리에 0이 채워지면서 양수로 바뀌게 된다. |
'JavaScirpt > basic' 카테고리의 다른 글
| [JavaScript] 문법 기초(for ~of, for ~in, forEach, 함수, 커링, 펼침 연산자, 나머지 파라미터, 화살표 함수, 고차함수, 생성자 함수) (0) | 2020.12.20 |
|---|