-
프론트앤드 개발자를 위한 JS - 3장Java Script/프론트앤드 개발자를 위한 자바스크립트 2020. 5. 3. 13:00반응형
3장. 언어의 기초
-
문법
-
대소문자 구분
-
식별자 - 변수, 함수, 프로퍼티, 매개변수의 이름.
- 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($) 중 하나여야 한다.
- 다른 문자에는 글자나 밑줄, 달러 기호, 숫자를 자유롭게 이용할 수 있다.
- ECMAScript 식별자는 관습적으로 카멜 케이스로 쓴다.
-> firstSecond, myCar, doSthImportant 와 같이 소문자로 쓰다가 단어 바뀔 때 대문자
-
주석 - C 언어 스타일을 따름, // 라인 주석 or /* 주석 블럭 */
cf. HTML 주석은 -
스트릭트 모드(엄격 모드) - 기존과는 다른 방식으로 JS를 파싱하고 실행하라는 지시, ECMAScript 3판의 문제 해결 및 안전하지 않은 동작에 에러를 반환함.
엄격하게 문법 검사를 하겠다라고 이해하면 편할듯 함."use strict";▲ 전체 스크립트에 스트릭트 모드를 적용하기 위해서 위의 문장을 스크립트 맨 위에 추가.
이 문법은 ECMAScript 3 문법과 호환됨.function foo() { 'use strict'; // 함수 내용 }▲ 해당 함수에 대해서만 스트릭트 모드로 실행, 이 방법을 더 지향
-
문장 - 세미콜론이 없어도 문장이 유효하기는 하지만 ; 로 끝나는 위치를 표시해야함.
또한, 코드 블록( { } )을 이용하는 것을 권장if(test) { test = false; alert(test); } if(test) alert(test); if(test) { alert(test); }▲ if문이나 for문 등 실행하는 문장이 하나 뿐이면 코드블럭을 쓰지 않아도 되지만, 쓰는 것을 권장
-
- 키워드와 예약어 - break, case, enum 등 예약어 및 키워드가 존재하는데 자세한거는 링크를 통해 확인을 하자. JavaScript 어휘 및 문법
- 추가적으로 5판에 바뀐 규칙
- 일반모드에서 예약어로 사용하는 단어
class, enum, extends, super, const, export, import - 스트릭트 모드에서 예약어로 사용하는 단어
implements, package, public, interface, private, static, let, protected, yield
여기서 let과 yield만 5판에서 새롭게 추가된 키워드 - 5판에서도 예약어 및 키워드는 식별자 이름으로 사용 불가능하지만, 객체의 프로퍼티 이름으로 쓸 수는 있다. 하지만, 쓰지 않는 것을 권장. 프로퍼티에 대한 설명
- 스트릭트 모드에서는 eval과 arguments를 식별자나 프로퍼티 이름으로 사용 불가능하다. 그런 경우 에러를 반환한다.
=> 결론 그냥 쓰지말자
- 스트릭트 모드에서는 eval과 arguments를 식별자나 프로퍼티 이름으로 사용 불가능하다. 그런 경우 에러를 반환한다.
- 일반모드에서 예약어로 사용하는 단어
- 추가적으로 5판에 바뀐 규칙
-
변수 - 느슨한 변수 타입을 사용한다.(== 변수에 어떤 타입의 데이터라도 저장 가능하다)
-
var 변수명; -> 이 경우 초기화를 하지 않았기 때문에 undefined 가 할당됨.
-
var 변수명 = "Zin0"; -> 변수 선언과 동시에 "Zin0"을 저장, 하지만 문자열 타입을 지정한 것은 아니다.
var message = "hi"; message = 100; // 유효하기는 하지만 권장 X▲ 저장 값 및 타입을 바꿀 수 있지만 권장 X
function test() { var message = "hi"; // 지역변수 } test(); alert(message); // 에러 function test2() { message2 = "hi"; // 전역 변수 } test2(); alert(message2); // 유효 "hi"▲ test 함수에는 message가 var를 통해 지역변수로 선언됨. 따라서 test함수 실행 이후 변수는 파괴되어 alert에 message에 접근X (에러)
하지만, test2 함수에서는 message2를 전역변수로 선언, 함수 콜 후에 message2에 접근 가능. ~> 전역변수를 로컬에서 정의하면 관리하기도 어렵고 코드 관리가 어렵기 때문에 가급적 사용X. -
스코프 - JS에서 어떤 변수들에 접근할 수 있는지를 정의한다.
- 전역 스코프(global scope) - 함수 바깥이나 중괄호( { } ) 바깥에 선언.
- 지역 스코프(local scope) - 함수 스코프 및 블록 스코프 ~> 함수나 중괄호 내부에서 선언.
-
변수를 여러개 선언할 때, 쉼표로 구분하여 한 문장에서 선언이 가능하다.
var message = "hi", found = false, age = 29;▲ 변수의 데이터 타입이 다르더라도 같은 문장에서 선언 및 초기화 가능
-
-
데이터 타입
-
6가지 데이터 타입
- 5가지 기본 타입(원시 데이터 타입, primitive data type)
=> Undefined, Null, Boolean, 숫자, 문자열 - 객체 - 이름-값 쌍의 순서 없는 목록
- 5가지 기본 타입(원시 데이터 타입, primitive data type)
-
typeof - 변수의 데이터 타입을 알려주는 연산자
- 정의되지 않은 변수 - "undefined"
- 논리 자료형 - "boolean"
- 문자열 - "string"
- 숫자 - "number"
- 함수 - "function"
- 함수를 제외한 객체 또는 null - "object"
var message = "string~~"; alert(typeof message); // "string" alert(typeof(message)); // "string" alert(typeof 95); // "number"
-
undefined 타입 - 변수를 선언했지만 초기화하지 않았을 때
var msg; alert(msg == undefined); // true var tmp = undefined; alert(tmp == undefined); // true▲두 경우 모두 true가 리턴된다. 하지만, 초기화하지 않은 기본 값은 undefined기 때문에 아래처럼 할 필요 X
var msg; // var age; alert(msg); // "undefined" alert(age); // 에러 alert(typeof msg); // "undefined" alert(typeof age); // "undefined"▲ 정의하지 않은 변수에도 typeof 연산자를 호출하면 "undefined"를 반환한다.
-
Null 타입 - 빈 객체
var car =null; alert(typeof car); // "object"변수를 정의할 때 해당 변수가 객체를 가리키게 할 생각이면, 다른 값을 쓰지말고 null로 초기화 하는 것을 권장한다.
또한, undefined는 null에서 파생되었기 때문에, null == undefined는 true가 반환됨 -
boolean 타입 - true와 false는 대소문자를 구분, 따라서 True와 False는 유효한 식별자이지만 boolean값은 아니다.
- ECMAScript에서는 모든 타입을 Boolean 값으로 표현할 수 있다.
데이터 타입 true로 변환되는 값 false로 변환되는 값var msg = "Hello World"; var msgAsBool = Boolean(msg);
Boolean true false
문자열 비어 있지 않은 문자열 모두 " " (빈 문자열)
숫자 0이 아닌 모든 숫자, 무한대 포함 0, NaN
객체 모든 객체 null
Undefined 해당 없음 undefined
▲ 따라서 위의 msgAsBool 변수에는 true 값이 저장
- ECMAScript에서는 모든 타입을 Boolean 값으로 표현할 수 있다.
-
숫자 타입 - 정수와 부동소수점 숫자, 기본적으로 10진법이지만 8진수나 16진수로 나타낼 수도 있음.
- 8진수 - 첫 번째 숫자가 반드시 0이어야 하며 그 뒤에 0부터 7까지의 숫자를 쓴다.
리터럴 안에 0부터 7을 벗어난 숫자가 있으면 처음의 0을 무시하고, 나머지 숫자를 10진법으로 취급한다.
스트릭트 모드에서는 8진법 허용 X ~> 문법 에러 반환var octalNum1 = 070; // 8진법으로 쓴 56 var octalNum2 = 079; // 9가 범위를 벗어났으므로 10진수 79로 간주 var octalNum3 = 08; // 8이 범위를 벗어남, 10진수 8로 간주 - 16진수 - 첫 두문자에 반드시 0x(대소문자 상관 x)를 쓰고 그 뒤에는 16진수 숫자 (0
9, AF)를 쓴다. 대소문자는 가리지 않음.
▲ 숫자를 16진수로 표현하든 8진수로 표현하든, 실제 계산 시에는 10진수로 변환하여 계산var hexNum1 = 0xA; // 10의 16진수 표기 var hexNum2 = 0x1f; // 31의 16진수 표기 - 부동소수점 숫자 - 소수점 앞에 반드시 정수를 써야하는 것은 아니지만 권장
▲ 부동소수점 숫자를 저장할 때는 정수를 저장할 때보다 메모리를 두배로 소모, 따라서 ECMAScript에서는 가능한 한 정수로 변환하여 저장하려고 한다. 소수점 뒤에 숫자가 없으면 정수로 변환되어 저장됨. 또한, 소수점 아래 자리가 모두 0인 경우(전체 숫자 표기법)도 정수 변환var floatNum1 = 1.1; var floatNum2 = .1; // 유효하지만 권장X
엄청 크거나 작은 부동소수점 숫자를 표현할 때는 'e-표기법(지수 표기법)'을 사용.var floatNum1 = 1.; // 1로 간주 var floatNum2 = 10.0; // 10으로 간주
ECMAScript에서 지수 표기법 : 정수 or 부동소수점 숫자 다음에 리터럴 e를 쓰고 그 다음 10을 몇 번 곱할지 쓴다.
부동소수점 숫자는 소수점 아래 17자리까지 정확하지만, 사칙연산에서는 부정확함.var flaotNum = 3.125e7; // 31,250,000 var floatNum2 = 3e-17; // 0.00000000000000003
ex) 0.1과 0.2를 더했을 때, 0.3이 아니라 0.30000000000000004를 반환.if (a +b == 0.3) { alert("이렇게 하면 안됨"); }
- 8진수 - 첫 번째 숫자가 반드시 0이어야 하며 그 뒤에 0부터 7까지의 숫자를 쓴다.
-
숫자 범위 - 메모리 제한 때문에 모든 숫자를 ECMAScript로 나타낼 수 없다.
최솟값은 보통 5e-324이며 Number 객체의 MIN_VALUE 프로퍼티(Number.MIN_VALUE)에 저장
최대값은 보통 1.7976931348623157e+308로 Number 객체의 MAX_VALUE 프로퍼티에 저장
계산 결과 표현 범위를 벗어나면, 음수는 -Infinity, 양수는 Infinity로 변환된다. -
NaN - Not a Number => 숫자를 반환할 것으로 의도한 조작이 실패했을 때 반환 값. (에러가 아님), 다른 프로그래밍 언어에서는 어떤 숫자를 0으로 나누려 하면 에러를 반환하지만, ECMAScript에서는 NaN을 반환하고 나머지는 처리를 계속 수행함.
-
특징
- NaN이 포함된 조작은 항상 NaN을 반환 (ex ~> NaN /10)
- NaN은 어떤 값과도 일치하지 않으며, NaN 끼리도 일치X
alert(NaN == NaN); // false - 2번 특징 때문에 ECMAScript에서는 isNaN() 함수를 따로 제공한다. ~> 숫자가 아닌 값인지 검사
alert(isNaN(NaN)); // true alert(isNaN(10)); // false alert(isNaN("10")); // false ~> 숫자 10으로 변환 가능 alert(isNaN("blue")); // true alert(isNaN(true)); // flase ~> 숫자 1로 변환 가능
-
숫자 변환
숫자가 아닌 값을 숫자로 바꾸는 함수-
Number() 함수 - 어떤 데이터 타입에도 사용 가능
- Boolean ~> true, false 는 각각 1, 0으로 반환
- 숫자는 그대로 반환
- null ~> 0 반환
- undefined ~> NaN 반환
- 문자열 ~> 리딩 제로(첫 숫자 앞의 0)을 모두 버리고 10진수로 변환, 문자 기호 + or -는 보존 , 또한 유효한 16진수 형식이라면 그에 맞는 정수 반환
- 빈 문자열 ~> 0 반환
- 위의 두 경우가 아닌 문자열 ~> NaN 반환
- 객체
> 먼저, valueOf() 메소드 호출 <반환된 값에서 위의 규칙 적용.
결과가 NaN이라면 toString() 메서드를 호출한 후 문자열 변환 규칙을 적용.
var num1 = Number("Hello world!"); // NaN
var num2 = Number(""); // 0
var num3 = Number("000011"); // 11
var num4 = Number(true); // 1
-
parseInt() - 문자열을 정수형으로 변환, 리딩 스페이스를 모두 버림 ~> 첫 문자가 +/- 기호가 아니라면 NaN 반환, 따라서 빈 문자열도 NaN을 반환한다.
~> Number()가 0을 반환하는 것과는 다름
소수점은 버림하여 표현, 첫 문자가 숫자라면 10진수, 8진수, 16진수를 인식하고 그에 맞게 변환var num1 = parseInt("123abc"); // 123 var num2 = parseInt(""); // NaN var num3 = parseInt("0xA"); // 16진수 ~> 10 var num4 = parseInt("2.6"); // 2 var num5 = parseInt("0xAF", 16); // 175, 이런식으로도 사용 가능 var num6 = parseInt("AF", 16); // 175, 0x 생략 가능 var num7 = parseInt("AF"); // NaN, 생략 시 진수 표기 없으면 NaN var num8 = parseInt("10", 2); // 10진수 2 var num9 = parseInt("10", 8); // 10진수 8 -
parseFloat() - 문자열을 부동소수점으로 변환, 리딩 제로 항상 무시, 16진수 숫자를 넘기면 항상 0 반환 <~ 10진수 기준으로 파싱하기 때문, 진법 매개변수를 넘겨도 무시
var num1 = parseFloat("123BC"); // 123 var num2 = parseFloat("0xA"); // 0 var num3 = parseFloat("22.34.5"); // 22.34 var num4 = parseFloat("0908.5"); // 908.5 var num5 = parseFloat("3.125e7"); // 31250000
-
-
-
문자열 타입 - '' or ""로 표현
리터럴 의미
\n new line
\t tap
\b backspace
\r 캐리지 리턴 (↵)
\f 폼 피드 (이 기호부터 한 장을 뛰어넘은 다음 프린트 재개를 하는 기호)
\ 역슬래시()
' 작은 따옴표로 감싼 문자열 안에서 작은 따옴표를 써야할 경우 사용
" 큰 따옴표로 감싼 문자열 안에서 큰 따옴표를 써야할 경우 사용
\xnn 16진수 코드 'nn'으로 표현한 문자. n은 0~f까지 16진수, \x41 = "A"
\unnnn 위와 동일, \u03a3은 그리스 문자 σ(시그마)var text = "This is the letter sigma: \u03a3."; alert(text.length); // 28 ~> \u03a3은 한 글자.-
문자열 성질 - ECMAScript에서 문자열은 불변 ~> 기존 값을 바꾸려면 그 문자열을 파괴하고 새 문자열을 채워야 한다.
var lang = "Java"; lang = lang + "Script";▲ 10글자를 저장할 문자열을 만듬 ~> Java와 Script를 채움 ~> 이 두 문자열은 파괴
-
문자열로 변환
-
toString() - null 과 undefined를 제외하고는 문자열로 변환해주는 메소드 존재.
-
String() - 메서드 호출 값이 null이나 undefined일 가능성이 없다면 이용 가능
-
값에 toString() 메서드가 존재한다면 매개변수 없이 호출하여 결과 반환
-
null ~> "null" 반환
-
undefined ~> "undefined" 반환
var age = 10;
var ageString = age.toString(); // "10"
var found = true;
var foundStr = found.toString(); // "true"// n진수로 변환하여 문자열로 반환 가능
alert(age.toString()); // "10"
alert(age.toString(2)); // "1010"
alert(age.toString(8)); // "12"
alert(age.toString(16)); // "a"var val = null;
var val2;
//String() 메서드
alert(String(age)); // "10"
alert(String(found)); // "true"
alert(String(val)); // "null"
alert(String(val2)); // "undefined"
-
-
-
객체 타입
ECMAScript에서 객체는 데이터와 기능의 집합.var o = new Object(); var o2 = new Object;▲ Object 타입의 '인스턴스'를 만들고 프로퍼티 or 메서드를 추가하여 객체를 만들 수 있다. 두 문법 다 지원하지만, 아래는 지양하는 것이 좋음.
Object 타입의 인스턴스는 Object 타입의 프로퍼티와 메서드를 전부 상속
프로퍼티 및 메서드 설명
constructor 해당 객체를 만드는 데 쓰이는 함수, 위의 예제는 Object() 함수가 생성자
hasOwnProperty(propertyName) 해당 프로퍼티가 객체 인스턴스에 고유하며 프로토타입에서 상속하지 않았음을 확인.
ProperttyName은 반드시 문자열이어야 한다.
isPrototypeOf(object) 해당 객체가 다른 객체의 프로토타입인지 확인하는 메서드
propertyIsEnumerable(propertyName) 해당 프로퍼티를 for-int 문에서 나열할 수 있는지 확인
toLocaleString() 객체를 지역에 맞게 표현한 문자열을 반환
숫자 단위수 별로 콤마 찍기
문화권에 맞는 시간 표기법
toString() 객체를 문자열로 변환
valueOf() 문자열이나 숫자, boolean을 반환
-
-
연산자
-
단항 연산자 - 단 하나의 값에만 적용되는 연산자, ECMAScript에서 가장 단순한 연산자.
- 증감 연산자 ~> !, ++, -- 등
- 유효한 숫자 형태의 문자열에 적용하면 해당 문자열을 숫자로 바꾼 후 증감
- 유효한 숫자 형태의 문자열이 아니라면 NaN값이 저장됨.
- 값이 true ~> 1, false ~> 0으로 바꾼 후 증감.
- 부동소수점 숫자에 적용하면 그대로 증감
- 객체에 적용하면 valueOf() 메서드 호출 후 증감, 결과가 NaN이라면 toString()메서드를 호출 후 다른 규칙을 다시 적용
- 모든 데이터 타입은 숫자로 변환
- 단항 플러스와 단항 마이너스 ~> a = +a; a = -a; ~> 위의 변환 규칙에서 부호만 적용.
- 증감 연산자 ~> !, ++, -- 등
-
비트 연산자
-
64비트의 값을 32비트 정수로 변환하여 비트 연산자를 적용한 후 다시 64비트로 변환
부호가 붙은 정수는 32비트 중 첫 31비트가 정수의 숫자형 값, 32번 비트(부호 비트)가 숫자의 부호를 나타냄 (0 : 양수, 1 : 음수) ~> 31비트는 2진 형식으로 저장
음수 역시 이진 코드로 저장되지만 2의 보수 형식을 사용 한다. -
2의 보수 계산
-
절대값의 2진 표현을 구한다. (ex, -18을 찾으려면 먼저 18의 2진 표현을 구함)
-
그 숫자에 대해 1의 보수를 구한다. (0
> 1, 1>0 으로 바꿈)
-
결과에 1을 더함.
0000 0000 0000 0000 0000 0000 0001 00101111 1111 1111 1111 1111 1111 1110 1101 <- 1의 보수
1111 1111 1111 1111 1111 1111 1110 1110 <- +1
ECMAScript에서는 이를 노출하지 않으려고 음수를 2진 문자열로 표현할 때, 절대값의 2진 표현에 마이너스 부호를 붙인 값을 준다.
var num = -18;
alert(num.toString(2)); //"-10010"
-
-
비트 연산에서 NaN과 Infinity를 0과 마찬가지로 취급함
-
숫자가 아닌 값에 비트 연산자 적용 ~> Number()함수를 적용해 숫자로 바꾼 후 연산 적용
-
비트 NOT, AND, OR, XOR
// 비트 NOT> 틸데() 로 나타냄, 피연산자의 1의 보수 반환, ~A 로 표현
/* 결론적으로 숫자의 부호를 바꾼 후, -1을 해줘 반환 */
var num1 = 25; // 2진 25
var num2 = ~num1; // 2진 1의 보수
alert(num2); // -26// 비트 AND ~> 앰퍼샌드(&)로 나타냄, A & B로 표현
var result = 25 & 3;
alert(result); // 1// 비트 OR ~> 파이프(|)로 나타냄, A|B 로 표현
var result2 = 25 | 3;
alert(result); // 27// 비트 XOR ~> 캐럿(^)으로 나타냄, A^B 로 표현
/* 같은 비트는 0, 서로 다른 비트는 1을 반환 */
var result3 = 25 ^ 3;
alert(result); // 26 -
왼쪽 시프트 부호 여부에 따른 오른쪽 시프트
// 왼쪽 시프트 ~> <<로 나타냄, A << N으로 표현.
/* 모든 비트를 N만큼 왼쪽으로 움직이고, 오른쪽에 N만큼 빈 비트를 0으로 채움
또한 A의 부호를 유지한다 */
var leftTarget = 2; // 2진수 10, 10진수 2
var newLeft = leftTarget << 5; // 2진수 1000000, 10진수 64
var leftTarget2 = -2;
var newLeft2 = leftTarget2 << 5; // -65// 부호 있는 오른쪽 시프트 ~> >>로 나타냄, A >> N으로 표현.
/* N만큼 오른쪽으로 비트 이동, 부호는 그대로 유지, 빈 비트 0으로 채움*/
var rightHasSign =64;
var result1 = rightHasSign >> 5; // 2// 부호 없는 오른쪽 시프트 ~> >>>로 나타냄, A >>> N으로 표현
/* 양수에 >>> 는 부호 있는 오른쪽 시프트 >>와 같은 결과값음수에서는 숫자의 부호와 관계 없이 0으로 채워짐 ~> 음수의 2진 표현을 양수로 간주*/var rightNoSign = -64;
var result2 = rightNoSign >>> 5; // 134,217,726
-
-
Boolean 연산자
-
NOT - !로 표현
!(피연산자) 객체 ~> false 반환 빈 문자열 ~> true 반환 비어있지 않은 문자열 ~> false 반환 숫자 0 ~> true 0 이외의 숫자 ~> false null ~> true NaN ~> true undefined ~> true -
AND - && 표현
(A) && (B) 둘 다 true 일 경우만 true 나머지는 다 false ~~> A가 false면 B 판단 안하고 false 반환 A,B 중에 하나라도 boolean이 아닌 경우 A가 객체 ~> B 반환 B가 객체 ~> A가 true일 때만 B 반환 ~> 이 때, B에 대한 선언이 없으면 에러 ~> false 일 때는 동작 함. A,B 모두 객체 ~> B 반환 A,B 중 하나라도 null ~> null 반환 A,B 중 하나라도 NaN ~> NaN 반환 A,B 중 하나라도 undefined ~> undefined 반환 var found = true; var result = (found && sth); // 여기서 에러 발생 ~> sth이 선언되지 않았기 때문 alert(result); // 이 행은 실행되지 않음 var found = false; var result = (found && sth); // 에러 없음 ~> found가 false라 sth 평가 X alert(result); // 실행함 -
OR - ||로 표현.
(A) || (B) 둘 중 하나가 true면 true ~~> A가 true면 B 판단 안하고 true 둘 다 False면 False A,B 중에 하나라도 Boolean이 아니라면 A가 객체 ~> A 반환 A가 false ~> B 반환 A,B 모두 객체 ~> A 반환 A,B 모두 null ~> null 반환 A,B 모두 NaN ~> NaN 반환 A,B 모두 undefined ~> undefined var found = true; var result = (found && sth); // 에러X, found가 true라 sth 평가X alert(result); // 동작 var found = false; var result = (found && sth); // 에러 ~> found가 false라 sth를 평가하기 때문에 (sth은 정의된 적 없음) alert(result); // 실행 X 논리 OR 연산자를 이용해서 변수에 null나 undefined가 저장되지 않게 할 수 있음 var myObj = preferredObj || backupObj; preferredObj에는 가능하다면 사용하고 싶은 값 저장, backupObj에는 선호하는 값을 이용할 수 없을 때 대신 쓸 값. preferredObj != null ~> myObj에 preferredObj가 할당 preferredObj == null ~> myObj에 backupObj가 할당 //ECMAScript에서 자주 쓰이는 패턴이라 따로 빼서 강조 var myObj = preferredObj || backupObj; if(preferredObj != null) // ~> myObj에 preferredObj가 할당 if(preferredObj == null) // ~> myObj에 backupObj가 할당
-
-
곱셈 관련 연산자 - 곱셈 (*) , 나눗셈 (/), 나머지 (%)
- 피연산자 중 하나가 숫자가 아니면 Number()를 적용하고 기타 규칙 적용
- 곱셈, 나눗셈 특징
- 결과가 ECMAScript에서 표현할수 없는 범위면 Infinity나 -Infinity를 반환
- 피연산자 중 하나가 NaN ~> 결과도 NaN
- 곱셈 : Infinity0 ~> NaN, InfinityB ~> B의 부호에 따라 Infinity or - Infinity (B는 유한한 숫자), Infinity * Infinity ~> Infinity
- 나눗셈 : Infinity / Infinity ~> NaN, 0 / 0 ~> NaN, A / 0 ~> A의 부호에 따라 Infinity or -Infinity (A는 유한한 숫자)
- 나머지 특징
- Infinity%B ~> NaN (B는 유한한 숫자)
- A % 0~> NaN (A는 유한한 숫자)
- Infinity % Infinity ~> NaN
- A % Infinity ~> A (A는 유한한 숫자)
- 0 % B ~> 0 (B는 0이 아닌 수)
-
덧셈 관련 연산자 - 덧셈(+), 뺄셈(-)
- 피연산자 중 하나가 NaN이라면 결과도 NaN
- 둘 다 0일 경우
- 덧셈
- +0 + +0 = +0
- -0 + +0 = +0
- -0 + -0 = -0
- 뺄셈
- +0 - +0 = +0
- -0 - +0 = -0
- -0 - -0 = +0
- 덧셈
- Infinity + -Infinity = NaN, -Infinity + Infinity = Infinity
-
관계 연산자 ( < , > , <= , >=)
-
동일 연산자 (== , !=)
표현식 값
null == undefined true
"NaN" == NaN false
5 == NaN false
NaN == NaN false
NaN != NaN true
false == 0 true
true == 1 true
true == 2 false
undefined == 0 false
null == 0 false
"5" == 5 true -
3항 연산자
- variable = booleanExpression ? A : B ~> booleanExpression가 true면 A, false면 B
-
할당 연산자 (=, *=, /=, <<=, >>>= 등등)
- var a = 10;
-
쉼표 연산자
- var a =1, b=2, c=3;
-
-
문장
-
if 문
if(booleanExpression) { // true일 때 내용 } else { // false 일 때 내용 } -
do-while 문
do { //최소 한 번은 do 안의 statement를 사용, 이후 expression이 참일 때만 사용 statement } while(booleanExpression) -
while 문
while(booleanExpression) { statement // booleanExpression이 참일 때만 실행 } -
for 문
var count =10; for(var i=0; i<count; i++) { //i가 0 부터 <10 일 때 까지, 즉 9 까지 반복 } -
for-in 문
for(var propName in window) { //window 객체의 모든 프로퍼티 propName의 개수를 n이라고 하면 // 0~n-1 까지의 프로퍼티들을 모두 나열해줌 // 단 프로퍼티를 나열할 객체를 가리키는 변수가 null or undefined면 에러 } -
문장 레이블과 break, continue
// label : statement, break와 continue는 loop문 안에서 이용 var num =0; outermost: for(var i=0; i<10; i++) { for(var j=0; j<10; j++) { if(i ==5 && j == 5) { break outermost; //continue outermost; // 둘 중 하나 } num++; } } -
with 문
//with (expression) statement; var qs = location.search.substring(1); var hostName = location.hostname; var url = location.href; with(location) { // location 객체의 프로퍼티 중 해당 이름이 있으면 그 변수는 location 객체의 프로퍼티로 평가 var qs = search.substring(1); var hostName = hostname; var url = href; }▲ 스트릭트 모드에서는 with 문을 금지하며 문법 에러로 간주한다. 또한, 성능에 좋지 않고 디버깅이 힘드므로 가급적 with문은 쓰지 않는 것이 좋음.
-
switch문
switch (expression) { case value: statement break; case value: statement break; default: statement // 여기에 break가 없는거는 색다르네.. }
-
-
함수 - ECMAScript에서 함수는 function 키워드로 정의
function sayHi(name, msg) { alert("Hello " + name + ", " + msg); } sayHi("Zin0", "My lord");-
스트릭트 모드에서의 제한
- 함수 이름에 eval , arguments는 사용할 수 없음
- 매개변수 이름에도 사용할 수 없음
- 서로 다른 매개변수에 같은 이름을 쓸 수 없음
- 위의 세 가지 제한을 어기면 에러
-
매개변수의 이해
-
ECMAScript 함수는 매개변수 숫자를 따지지 않으며, 데이터 타입도 체크 X
-
함수의 매개변수는 내부적으로 배열로 표현됨.
function sayHi() {alert("Hello " + arguments[0] + ", " + arguments[1]);}
▲ 이렇게 표현도 가능하다는 뜻
function doAdd() {if(arguments.length ==1) { alert(arguments[0] + 10); } else if (arguments.length ==2) { alert(arguments[0] + arguments[1]); } else { alert(-1); }}
doAdd(10); //20
doAdd(30,20); //50
doAdd(10,1,1) //-1
▲ 위의 특성을 활용해서 이렇게도 만들 수 있다.
function doAdd(num1, num2) {arguments[1] = 10; alert(arguments[0] + num2);}
▲ 이렇게도 표현 가능, arguments[n]과 매개변수 num1,num2는 다른 메모리 공간을 씀.
따라서, 함수 내에서 값이 반영이 되더라도 arguments의 해당 프로퍼티는 바뀌지 않음.
또한 매개변수를 하나만 넘기면, arguments[1]의 값을 바꿔도 매개변수에 영향 X
function doAdd(num1, num2) {"use strict" arguments[1] = 10; console.log(num1, num2); console.log(arguments); //arguments = {100, 10}; // 에러}
doAdd(10);
//1) 10, undefined
//2)[10]
doAdd(20, 30);
//1) 20,30
//2)[20,10]
▲ 매개변수가 없는 argument를 아무리 바꿔도 undefined
-
-
오버로딩 없음 - ECMAScript 함수에는 시그너처(매개변수의 타입과 개수)가 없음.
매개변수는 그저 배열일 뿐이며, 값에 제한이 없음
같은 이름으로 함수를 여러 번 정의하면 마지막에 정의한 함수가 이름을 소유(동작)function addNum(num) { return num+100; } function addNum(num) { return num+200; } var result = addNum(100); // 300
-
요약
- ECMAScript의 기본 데이터 타입은 Undefined, Null, Boolean, Number, String
- ECMAScript는 정수와 부동소수정 숫자를 구분 X ( 숫자 데이터 타입이 두 가지를 모두 나타냄)
- Object 타입은 JS의 모든 객체의 기반
- 스트릭트 모드는 JS에서 에러가 자주 발생하는 부분에 몇 가지 제약을 가함
- ECMAScript의 함수는 다른 언어의 함수와 다름
- 함수는 언제든, 무슨 값이든 반환할 수 있음. ~> 함수의 반환 값을 미리 명시할 필요 X
- 값을 반환하지 않는 함수는 undefined를 반환
- ECMAScript의 함수에는 시그너처(매개변수의 타입과 개수)가 없음. ~> 매개변수가 배열이며 어떤 값이든 가질 수 있기 때문
- 함수 시그너처가 없기 때문에 ECMAScript의 함수는 오버로딩이 불가능하다.
매개변수의 종류와 타입에 따라 달리 동작하도록 정의해서 흉내낼 수는 있음.
성동 ->
데이터 타입 6가지 -> 7가지 (symbol 추가)
typeof null === 'object'
typeof null은 "object"를 반환하는데 null은 빈 객체를 참조하는 특별한 값이므로 이는 올바른 것이다. 함수도 객체다(특별한 프로퍼티가 존재)
암시적 변환
피연산자 중 하나가 객체나 숫자, 불리언이라면 toString()메서드를 호출해 문자열 값을 얻고 덧셈 규칙을 적용한다.
==와 === 는 값 검사, 타입 검사가 아니라 암시적 변환 여부의 차이다.
반응형'Java Script > 프론트앤드 개발자를 위한 자바스크립트' 카테고리의 다른 글
4장) 변수와 스코프, 메모리 (0) 2020.06.26 프론트엔드 개발자를 위한 JS - 2장 (2) 2020.04.24 프론트엔드 개발자를 위한 JS - 1장 (1) 2020.04.22 -