1. 기본 문법
1-1. 문
•
JS 코드 최소 실행 단위
•
문은 여러 개의 토큰으로 구성된다.
•
토큰이란 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소
const sum = 1 + 2;
// 토큰으로 나누면 "const", "sum", "=", "1", "+", "2"
JavaScript
복사
1-2. 표현식
•
값으로 평가될 수 있는 문.
•
문과 개념이 헷갈릴 수 있는데, 표현식이 아닌 문은 값으로 할당할 수 없다.
var x; // 값을 반환하지 않으므로 문이다.
1 + 2 // 숫자 리터럴이 값으로 평가되는 표현식
x = 1 + 2; // 값을 반환하므로 표현식이자 문이다.
var foo = var x; // 표현식이 아닌 문은 값처럼 사용할 수 없다.
JavaScript
복사
1-3. 변수
•
하나의 값을 저장하기 위해 확보한 메모리 공간 또는 메모리 공간을 식별하기 위해 붙인 이름
•
변수 이름을 식별자라고도 한다.
1-4. 정수, 실수, 숫자처리
•
자바스크립트에서는 정수, 실수 구분이 없다.(ES6부터 정수, 실수 구분 추가)
•
1, 1., 1.0 모두 1.0으로 간주한다. 단 표시는 1로 됨
•
64bit 부동 소수점 처리
◦
WikipediaIEEE 754 표준을 따른다•
부동 소수점은 정확도에서 문제가 발생한다.
console.log(0.1 + 0.3) // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // false
JavaScript
복사
•
0.1, 0.2는 10진수로는 유한소수이지만 컴퓨터는 2진법을 사용하기 때문에,
부동 소수점 방식으로 2진수 변환하면 무한소수가 된다.
따라서 오차가 발생한다.
0.1 ≈ 0.1000000000000000055511151231257827021181583404541015625
0.2 ≈ 0.200000000000000011102230246251565404236316680908203125
Plain Text
복사
그래서 다음과 같은 방법으로 소수점 정확도 문제를 처리한다.
1.
정수로 변환 후 계산
2.
반올림
1-5. 데이터 타입
•
데이터는 타입을 가진다.
•
JS는 데이터를 기준으로 타입을 결정한다.
•
Primitive 타입: Number, String, Undefined, Null, Boolean, Symbol(ES6)
•
Object 타입: Object
Number
•
8바이트(64bit) 크기를 가진다.
•
NaN, Infinity, -Infinity의 특수 값을 가진다.
String
•
변수의 최대 문자열 길이는
•
하지만 일반적인 검색 엔진에서는 개로 약 10억개이다.
자바스크립트의 문자열은 string.length를 통해 길이를 반환하는데,
number 타입의 정수로 관리되기 때문.
•
이론적인 한계와 실제 실행 가능한 한계가 다르다.
Undefined
•
변수는 이름과 값이 둘 다 있어야 한다.
•
변수에 값을 할당하지 않은 것을 나타내는 시멘틱
Null
•
의도적으로 값을 할당한 것으로 코드는 수행했다는 것을 의미한다.
•
typeof 연산자를 사용하면 object 가 나온다.
설계미스로 ES6에서 Object.is() 로 보완.
Boolean
•
그냥 true, false
Object
•
{ key : value } 이 구조를 하나의 프로퍼티라고 한다.
•
Object는 프로퍼티의 집합
2. 연산자
2-1. 숫자 변환
•
연산하기 전에 우선 숫자로 변환한다.
값 타입 | 변환 값 |
undefined | NaN |
null | +0 |
boolean | true:1, false: 0 |
number | 변환 전/후 같음 |
string | 값이 숫자이면 숫자로 연산
단, 더하기(+)는 연결 |
2-2. 산술 연산자
+, -, /, %, * 에서 string이 숫자로 변환될 수 있는지 없는지를 생각하면 쉽다.
•
양쪽의 평가 결과가 하나라도 숫자가 아닐 때 → NaN
•
분모, 분자가 모두 0일 때 → NaN
•
분모가 0인 경우 → Infinity
•
분자가 0이면 → 0
2-3. 유니코드, UTF
유니코드
•
세계의 모든 문자를 통합하여 코드화
•
언어, 이모지 
등등
등등•
0000 ~ FFFF, 10000 ~ 1FFFF 값에 문자 매핑
•
유니코드 관련 함수들
함수 | 설명 |
charCodeAt(index) | 해당 인덱스의 UTF-16 코드 유닛을 반환 (서로게이트 페어 문제 있음) |
codePointAt(index) | 온전한 유니코드 코드 포인트 반환 (서로게이트 페어도 정상 지원) |
String.fromCharCode(...) | 주어진 UTF-16 코드 유닛을 문자로 변환 (서로게이트 페어 문제 있음) |
String.fromCodePoint(...) | 주어진 유니코드 코드 포인트를 문자로 변환 (서로게이트 페어 지원) |
자바스크립트는 내부적으로 UTF-16을 사용
•
따라서 이모지 같은 경우, 아래와 같이 길이가 2가 출력이 되는 문제가 있다.
console.log("💖".length); // 2 (UTF-16 코드 유닛 개수)
console.log("💖".codePointAt(0).toString(16)); // '1f496' (정상 유니코드 코드 포인트)
JavaScript
복사
이슈 | 원인 | 해결 방법 |
length가 실제 문자 개수와 다름 | UTF-16은 서로게이트 페어 사용 | Array.from() 또는 [...str] 사용 |
charAt()로 이모지 등의 문자 인덱싱 문제 발생 | 서로게이트 페어 앞부분만 반환 | codePointAt()과 fromCodePoint() 사용 |
JSON 데이터 변환 시 깨짐 | UTF-8과 UTF-16 간 변환 문제 | TextDecoder("utf-8") 사용 |
btoa() 사용 시 에러 발생 | btoa()는 UTF-16 처리 | TextEncoder().encode() 후 btoa() 사용 |
•
유니코드 관련 함수들
2-4. 동등, 부등, 일치, 불일치
•
== 연산자
◦
값만 보고 타입은 보지 않는다.
◦
undefined == null → true
•
=== 연산자
◦
값과 타입을 다 비교한다.
•
!=,!== 도 마찬가지
3. 오브젝트(Object)
•
프로퍼티
◦
{ name : value } 형태.
▪
ES6에서는 Symbol로 name이 아닌 key로 생각해야 한다.
•
대문자 오브젝트(Object)는 { key: value }를 의미한다. 데이터 저장이 중점이다.
3-1. 프로퍼티 값 추출 (for-in)
•
오브젝트에서 프로퍼티를 열거
•
ES5부터는 프로퍼티가 작성된 순서대로 나열되는 것이 보장이 됨.
var foods = {
pizza:'피자',
burger:'버거',
taco:'타코',
sushi:'스시'
}
for (var food in foods){
console.log(food)
}
JavaScript
복사
4. 빌트인 오브젝트(object)
•
값, 타입, 연산자, 오브젝트를 사전에 만들어 놓은 것
•
사전 처리를 하지 않고 즉시 사용할 수 있다.
•
소문자 오브젝트(object)는 데이터를 처리하는데 중점. 따라서 함수가 있다.
•
[(인스턴스 object) (빌트인 오브젝트 Object)]를 의미
빌트인 오브젝트 구조
오브젝트.prototype
•
인스턴스 생성 가능 여부
•
프로퍼티를 연결하는 오브젝트
오브젝트.prototype.constructor
•
오브젝트의 생성자
오브젝트.prototype.method
•
메소드 이름과 함수 작성
•
빌트인 오브젝트 형태
◦
Number 오브젝트(object)
◦
String 오브젝트(object)
•
다른 타입들도 빌트인 오브젝트가 존재하지만 생략.
4-1. Number 오브젝트
4-1-1. Number 인스턴스 생성, 프리미티브 값 구하기
•
인스턴스 생성
◦
new 키워드는 인스턴스를 생성(원본을 복사한다는 개념으로 이해하자)
◦
인스턴스를 생성하면 빌트인 오브젝트에서 prototype만 전달 받는다.
◦
인스턴스에서는 __proto__로 원본 오브젝트에 접근.
var obj = new Number("123");
JavaScript
복사
•
프리미티브 값 구하기
◦
프리미티브 값을 가지는 빌트인 오브젝트
▪
Boolean, Date, Number, String
// 인스턴스를 생성하면 파라미터 값을 인스턴스의 프리미티브 값으로 설정.
var obj = new Number("123");
// obj는 인스턴스의 프리미티브 값으로 평가된다.
console.log(obj + 300); // 423
JavaScript
복사
4-1-3. Number 프로토타입 메소드
•
valueOf(): 인스턴스의 프리미티브 값을 반환
var obj = new Number("123");
console.log(obj + 300); // 423
// 인스턴스의 프리미티브 값 반환
obj.valueOf() // 423
JavaScript
복사
•
toString()
◦
data를 String으로 변환. 파라미터 값은 변환할 진수(2~36)
◦
20.. 을 입력해야 되는 이유는 부동소수점만 인식하기 때문에
var value = 20;
console.log(20.toString()); // 오류
console.log(20..toString()); // '20'
console.log(value.toString()); // '20' (디폴트는 10진수)
console.log(value.toString(16)); // '14'
JavaScript
복사
•
toLocaleString()
◦
숫자를 브라우저가 지원하는 지역화 문자로 변환.
◦
ES6부터 파라미터에 언어 타입 사용이 가능하다.
var cost = 12345.78;
console.log(12345.78.toLocaleString()); // '12,345.78'
console.log(cost.toLocaleString()); // '12,345.78'
JavaScript
복사
•
toExponential()
◦
숫자를 지수 표기로 변환하여 문자열로 반환
◦
파라미터에 소수 이하 자릿수 작성(0~20)
var cost = 12345;
// 지수(e+) 다음에 정수에서 소수로 변환된 자릿수 표시
console.log(cost.toExponential()); // '1.2345e+4'
console.log(cost.toExponential(1)); // '1.2e+4'
console.log(cost.toExponential(2)); // '1.23e+4'
console.log(cost.toExponential(3)); // '1.235e+4'
JavaScript
복사
•
toFixed()
◦
고정 소숫점 표기로 변환하여 문자열로 반환
◦
파라미터에 소수 이하 자릿수 작성(0~20)
var cost = 1234.567;
// 파라미터 값보다 소수 자릿수가 길면 작성한 자리수에 1을
// 더한 위치에서 반올림
console.log(cost.toFixed()); // '1235'
console.log(cost.toFixed(1)); // '1234.6'
console.log(cost.toFixed(2)); // '1234.57'
console.log(cost.toFixed(3)); // '1234.567'
// 반환 대상 자릿수보다 파라미터 값이 크면 나머지를 0으로 채워 반환
console.log(cost.toFixed(6)); // '1234.567000'
JavaScript
복사
4-2. String 오브젝트
이름 | 설명 |
new String() | 인스턴스 생성 |
String 함수 | 설명 |
String() | 문자열로 변환하여 반환 |
length | 문자열의 문자 수 반환 |
fromCharCode() | 유니코드를 문자열로 변환하여 반환 |
String.prototype | 설명 |
valueOf() | 문자열로 변환하여 반환 |
toString() | 문자열로 변환 |
charAt() | 인덱스 번째 문자 반환 |
indexOf() | 일치하는 문자열 중에서 가장 작은 인덱스 반환 |
lastIndexOf() | 일치하는 문자열 중에서 가장 큰 인덱스 반환 |
concat() | 문자열 연결 |
toLowerCase() | 영문 소문자 변환 |
toUpperCase() | 영문 대문자 변환 |
trim() | 문자열 앞 뒤 공백 제거 |
substring() | |
정규표현식 사용 String.prototype | - match()
- replace()
- search()
- split() |
… 등등 |
var value = "ABC";
console.log(value.length); // 3
console.log(value.valueOf()); // 'ABC'
JavaScript
복사
4-2-1. length 프로퍼티가 없다
위의 value에는 length 프로퍼티가 존재하지 않는다. 어떻게 length 값을 불러오는걸까?
→ 자바스크립트 엔진이 value의 타입을 확인하고, 내부적으로 인스턴스를 생성하고 프로퍼티 값을 읽어온다.
•
내부 슬롯 [[PrimitveValue]] 값을 보고 length 프로퍼티를 생성한다.
•
내부 슬롯 [[PrimitveValue]] 값의 접근은 valueOf() 로 가능하다.
•
length는 외부에서 사용할 수 있지만, [[PrimitveValue]] 값은 valueOf()를 사용해야 함.
var value = "ABC";
var obj = new String("ABC");
debugger;
JavaScript
복사
4-2-2. String 함수
•
formCharCode()
◦
charCodeAt()과 형태가 왜 다를까?
자바스크립트 구조에 따른 문제로 [].formCharCode() 와 같이 작성하게 되면,
빌트인 Array 오브젝트로 불러오게 된다.
◦
[109, 105, 110, 115, 111, 102, 116, 107] 형태를 함수 앞으로 보낼 수 없다
이는 빌트인 Array 오브젝트가 필요하기 때문이다.
따라서 빌트인 String 오브젝트 원본(인스턴스, prototype이 아닌)에 들어가게 되었다.
이는 빌트인 Array 오브젝트가 필요하기 때문이다.
따라서 빌트인 String 오브젝트 원본(인스턴스, prototype이 아닌)에 들어가게 되었다.
var author = 'minsoftk'
var unicode = [];
for (var i = 0; i < author.length; i+=1){
unicode.push(author[i].charCodeAt())
}
console.log(unicode); // [109, 105, 110, 115, 111, 102, 116, 107]
// ES5에 스프레드 연산자가 없지만 편의상
console.log(String.fromCharCode(...unicode)) // minsoftk
JavaScript
복사
4-2-3. String 프로토타입 메소드
•
trim()
◦
문자열 앞뒤의 화이트 스페이스 삭제
•
toString()
◦
data 위치의 값을 String 타입으로 변환.
◦
그런데 String 오브젝트에서 toString()이 왜 필요할까? 굳이 문자열을 문자열로 변환..?
String 오브젝트의 toString()이 없다면 프로토타입 체인으로, Object 오브젝트의 toString()을 호출. 그러면 데이터 타입이 Object이기 때문에 프로퍼티 형태로 출력을 한다. 문자열을 Object 형태로 출력하는 것을 막아주기 위해서이다. → String, Number 오브젝트에서 toString()의 오버라이딩 수행
var obj = String;
var instance = new String("minsoftk");
var oneProto = instance.__proto__;
var oneString = oneProto.toString;
var twoProto = instance.__proto__.__proto__;
var twoString = oneProto.toString;
JavaScript
복사
•
charAt()
◦
인덱스의 문자를 반환
◦
문자열 길이보다 인덱스가 크면 빈 문자열을 반환
◦
존재하지 않으면 undefined를 반환
var blog = 'blog.minsoftk.com';
console.log(blog.charAt(0)); // 'b'
console.log(blog.charAt(2)); // 'o'
console.log(blog.charAt(4)); // '.'
console.log(blog.charAt(6)); // 'i'
console.log(blog.charAt(100)); // ''
JavaScript
복사
•
indexOf()
◦
data 위치의 문자열에서 파라미터의 문자와 같은 첫 번째 인덱스를 반환
◦
왼쪽에서 오른쪽으로 검색
◦
두 번째 파라미터를 작성하면 작성한 인덱스부터 검색
▪
두 번째 파라미터가 NaN면 처음부터 검색
◦
같은 문자가 없으면 -1 반환
var blog = 'blog2.minsoftk.com';
console.log(blog.indexOf('b')); // 0
console.log(blog.indexOf('o')); // 2
console.log(blog.indexOf('o', 4)); // 9
console.log(blog.indexOf('o', 20)); // -1
console.log(blog.indexOf('z')); // -1
console.log(blog.indexOf(2)); // 4
JavaScript
복사
•
lastIndexOf()
◦
뒤에서 앞으로 검색
◦
두 번째 파라미터가 0보다 작으면 -1 반환
var blog = 'blog2.minsoftk.com';
console.log(blog.lastIndexOf('b')); // 0
console.log(blog.lastIndexOf('o')); // 16
console.log(blog.lastIndexOf('o', 4)); // 2
console.log(blog.lastIndexOf('o', 20)); // 16
console.log(blog.lastIndexOf('z')); // -1
console.log(blog.lastIndexOf(2)); // 4
// 두번째 파라미터가 0보다 작음
console.log(blog.lastIndexOf('o', -1)); // -1
JavaScript
복사
4-2-4. 문자열 연결, 대소문자 변환
•
concat()
◦
data 위치의 값에 파라미터 값을 작성 순서로 연결하여 문자열로 반환
◦
String 인스턴스를 작성하면 프리미티브 값을 연결
var domain = 'minsoftk.com';
var subPrefix = 'blog';
console.log('blog.'.concat(domain)); // blog.minsoftk.com
console.log(subPrefix.concat('.', domain)); // blog.minsoftk.com
JavaScript
복사
4-2-5. 문자열 추출 관련
•
substring()
◦
파라미터의 시작 인덱스부터 끝 인덱스 직전까지 반환
◦
두 번째 파라미터를 작성하지 않으면 반환 대상의 끝까지 반환
var blog = 'blog.minsoftk.com';
console.log(blog.substring(5)); // minsoftk.com
console.log(blog.substring(0, 4)); // blog
console.log(blog.substring(5, 13)); // minsoftk
JavaScript
복사
•
slice()
◦
파라미터의 시작 인덱스부터 끝 인덱스 직전까지 반환
◦
첫 번째 파라미터 값을 작성하지 않거나 NaN이면 0으로 간주
◦
두 번째 파라미터 작성하지 않으면 length 사용.
▪
값이 음수면 length에 더해서 사용
4-3. Object 오브젝트
이름 | 설명 |
new Object() | 파라미터 데이터 타입의 인스턴스 생성 |
Object() | Object 인스턴스 생성 |
Object.prototype | 설명 |
constructor | 생성자 |
valueOf() | 프리미티브 값 반환 |
hasOwnProperty() | 프로퍼티 소유 여부 반환 |
propertyIsEnumerable() | 프로퍼티 열거 여부 반환 |
isPrototypeOf() | prototype 존재 여부 반환 |
toString() | 문자열 반환 |
toLocaleString() | 지역화 문자열로 변환 |
4-3-1. 오브젝트와 인스턴스
•
오브젝트: new 연산자를 사용하지 않고 빌트인 오브젝트로 만든 오브젝트를 지칭.
var abc = new Object(); // 인스턴스
var obj = {}; // 오브젝트
JavaScript
복사
4-3-2. Object 인스턴스 생성, 프리미티브 값 구하기
•
인스턴스 생성
◦
파라미터의 데이터 타입에 따라 생성할 인스턴스 결정
◦
Object 오브젝트는 프리미티브 값을 가지지 않는다. 따라서 인스턴스를 생성한다.
◦
반면에 String은 new 키워드 여부에 따라 각각 인스턴스, 값으로 생성이 된다.
const newObj1 = new Object(100)
const newObj2 = new Object('100')
const newObj3 = new Object(null)
const newObj4 = new Object(undefined)
const newObj5 = new Object({ blog:'blog.minsoftk.com'})
console.log(newObj1) // [Number: 100]
console.log(newObj2) // [String: 100]
console.log(newObj3) // {}
console.log(newObj4) // {}
console.log(newObj5) // { blog: 'blog.minsoftk.com' }
JavaScript
복사
const newObj5 = Object({ blog:'blog.minsoftk.com'})
const newObj6 = new Object({ blog:'blog.minsoftk.com'})
const newObj7 = String("minsoftk");
const newObj8 = new String("minsoftk");
console.log(newObj5 instanceof Object) // true
console.log(newObj6 instanceof Object) // true
// new 키워드에 따라서 인스턴스 여부가 결정된다.
console.log(newObj7 instanceof String) // false
console.log(newObj8 instanceof String) // true
JavaScript
복사
// 오브젝트는 모두 인스턴스로 생성이 된다.
var obj1 = { blog: 'blog.minsoftk.com' };
var obj2 = Object({ blog: 'blog.minsoftk.com' });
var obj3 = new Object({ blog: 'blog.minsoftk.com' });
console.log(obj1 instanceof Object); // true
console.log(obj2 instanceof Object); // true
console.log(obj3 instanceof Object); // true
JavaScript
복사
•
프리미티브 값 구하기
var obj1 = { blog: 'blog.minsoftk.com' };
console.log(obj); // { blog: 'blog.minsoftk.com' }
JavaScript
복사
4-3-3. 함수와 메소드 연결
ES6에서는 스태틱 메소드가 나왔다.
ES5에서는 함수와 메소드 2가지로만 구분.(ES6에서는 3가지로 구분)
•
함수
오브젝트에 연결한다
◦
Object.create()
•
메소드
오브젝트의 prototype에 연결
◦
Object.prototype.toString()
4-3-4. 프로퍼티 처리 메소드
•
hasOwnProperty()
◦
인스턴스에 파라미터 이름이 존재하면 true 반환.
◦
인스턴스에 파라미터 이름이 존재하지 않으면 false.
◦
자신이 만든 것이 아니라 상속 받은 프로퍼티면 false 반환.
→ 빌트인 Object 오브젝트의 프로퍼티는 체크할 수 없다.
var obj = { blog: 'blog.minsoftk.com'}
console.log(obj.hasOwnProperty('blog')) // true
JavaScript
복사
•
propertyIsEnumerable()
◦
오브젝트에서 프로퍼티를 열거할 수 있으면 true.
◦
오브젝트에서 프로퍼티를 열거할 수 없으면 false.
var food = { country: { korea:'한국', japan:'일본', china:'중국' }};
console.log(food.propertyIsEnumerable('country')) // true
Object.defineProperty(food, 'country', {
enumerable: false,
})
console.log(food.propertyIsEnumerable('country')) // false
JavaScript
복사
var food = {
country:{ korea:'한국', japan:'일본', china:'중국' },
food: { pizza:'피자', hotdog: '핫도그', ramen:'라멘' }
};
console.log(food.propertyIsEnumerable('country')) // true
console.log(food.propertyIsEnumerable('food')) // true
Object.defineProperties(food, {
country: {
enumerable: false,
},
})
console.log(food.propertyIsEnumerable('country')) // false
console.log(food.propertyIsEnumerable('food')) // true
JavaScript
복사
•
isPrototypeOf
◦
파라미터에 작성한 오브젝트의 prototype이 존재하면 true
◦
파라미터에 작성한 오브젝트의 prototype이 존재하면 false
var numObj = new Number(123);
// Object.prototype이 numObj에 존재하는가?
console.log(Object.prototype.isPrototypeOf(numObj));
JavaScript
복사
4-4. Function 오브젝트
4-4-1. 함수 선언문, 함수 표현식
•
함수 선언문: 함수 이름을 생성한 function 오브젝트의 이름으로 사용.
•
함수 표현식: function 오브젝트를 생성하여 변수에 할당. 변수 이름이 function 오브젝트 이름이 됨.
4-4-2. 함수 호출
•
call()
var value = { one: 10, two: 20 };
function getTotal(){
return this.one + this.two;
}
var result = getTotal.call(value);
console.log(result) // 30
JavaScript
복사
var value = { one: 10, two: 20 };
function getTotal(one, two){
return one + two;
}
var result2 = getTotal.call(this, 10, 20);
console.log(result) // 30
JavaScript
복사
•
apply()
◦
파라미터 수가 유동적일 때 사용
◦
두 번째 파라미터에 배열 사용
var value = { one: 10, two: 20 };
function getTotal(){
return this.one + this.two;
}
var result = getTotal.apply(value);
console.log(result) // 30
JavaScript
복사
var value = { one: 10, two: 20 };
function getTotal2(one, two){
return one + two;
}
var result2 = getTotal2.apply(this, [10, 20, 40]);
console.log(result2); // 30
JavaScript
복사
4-4-3. Argument
•
Function 오브젝트는 아니지만 함수가 호출되어 JS 엔진이 함수 안으로 이동했을 때,
arguments 이름으로 생성되는 오브젝트
function getTotal(){
var sum = 0;
for (let i = 0; i < arguments.length; i+=1) {
sum += arguments[i];
}
return sum;
}
// 유동적으로 값을 입력받는 경우
var result = getTotal.apply(this, [10, 20, 40]);
console.log(result); // 70
JavaScript
복사
4-5. Global 오브젝트
•
모든 <script>를 통해 하나만 존재한다.
◦
new 연산자로 인스턴스 생성 불가
◦
모든 코드에서 공유
•
이름은 있지만 오브젝트 실체가 없다. 오브젝트를 작성할 수 없다.
•
전역 객체라고 부르기도 하지만 Global은 오브젝트의 이름이다.
값 | 설명 |
NaN | Not a Number |
Infinity | 무한대 값 |
undefined | undefined |
함수 | 설명 |
isNaN() | NaN 여부 |
parseInt() | 무한대 값 |
parseFloat() | undefined |
eval() | 문자열을 JS 코드로 간주하여 실행
(보안성 문제로 사용하지 않는다.) |
encodeURI() | URI 인코딩 |
encodeURICompoent() | URI 확장 인코딩 |
decodeURI() | encodeURI 함수의 인코딩 값을 디코딩 |
decodeURIComponent() | encodeURIComponent 함수의 인코딩 값을 디코딩 |
•
undefined는 값이지만 나머지는 값이 아니다.
그럼 undefined가 프로퍼티 key라는 이야기인데 오브젝트 이름이 없다. (Global.undefined)
이처럼 글로벌 오브젝트는 실체가 없다.
•
JS 엔진이 프로퍼티가 없으면 글로벌 프로퍼티로 간주한다.
console.log(NaN);
console.log(Infinity);
console.log(undefined);
JavaScript
복사
4-5-1. 자바스크립트의 오브젝트
•
빌트인 오브젝트
◦
사전에 만들어 놓은 오브젝트
•
네이티브 오브젝트
◦
자바스크립트 스펙에 정의한 오브젝트(빌트인 오브젝트 포함)
◦
JS 코드를 실행할 때 만드는 오브젝트
▪
Argument 오브젝트
•
호스트 오브젝트
◦
빌트인, 네이티브 오브젝트를 제외한 오브젝트
▪
Window, DOM 오브젝트
◦
JS는 호스트 환경에서 브라우저의 모든 요소 기술을 연결하고 융합하여 이를 제어한다.
▪
ex)DOM 이벤트 핸들러 등록 등등
4-5-2. Global과 Window 관계
•
글로벌 오브젝트는 JS가 주체
•
Window 오브젝트는 Window가 주체
→ 주체는 다르지만 글로벌 오브젝트의 프로퍼티와 함수가 window 오브젝트에 설정된다.
•
ES2020 이후로는 globalThis 가 표준 글로벌 오브젝트를 가르킨다.
console.log(globalThis); // 브라우저: window, Node.js: global
Scss
복사
•
브라우저 환경의 호스트 오브젝트: window, document, console, XMLHttpRequest 등
•
Node.js 환경의 호스트 오브젝트: process, require, fs, Buffer 등
즉, 브라우저에서는 window가 호스트 오브젝트 역할을 하며, 동시에 글로벌 오브젝트로 동작.
4-5-3. 정수, 실수 변환 함수
•
◦
값을 정수로 변환하여 반환
◦
값이 ‘123AB’ 일 경우 123 반환
console.log(Number('1A')) // NaN
console.log(parseInt('1A')) // 1
console.log(Number('0012')) // 12
console.log(parseInt('0012')) // 12
console.log(Number(' 12')) // 12
console.log(parseInt(' 12')) // 12
// 진수 변환: 왼쪽의 값을 오른쪽의 진수로 10진수로 계산한 값
console.log(parseInt("1111", 2)); // 15
console.log(parseInt("11", 8)); // 9
console.log(parseInt(' 15', 10)) // 15
console.log(parseInt(' F', 16)) // 15
JavaScript
복사
4-5-4. NaN, 유한대 체크 함수
•
isNaN()
◦
NaN끼리 비교할 때는 Object.is(NaN, NaN)을 사용
•
isFinite()
◦
값이 Infinity, NaN이면 false 반환
4-5-5. 인코딩, 디코딩
•
encodeURI()
◦
인코딩 제외 문자를 제외하고 %16진수%16진수 형태로 변환
◦
제외 문자: 영문자, 숫자, #, ;, ?, :, @ 등등 특수기호들
◦
AJAX가 없기 전에 사용된 방법
◦
encodeURIComponent()는 제외 문자가 endcodeURI()보다 적다.
const uri = 'https://blog.minsoftk.com/?post=한글123abc';
const encoded = encodeURI(uri);
console.log(encoded); // "https://blog.minsoftk.com/?post=%ED%95%9C%EA%B8%80123abc"
try {
console.log(decodeURI(encoded)); // "https://blog.minsoftk.com/?post=한글123abc"
} catch (e) {
// Catches a malformed URI
console.error(e);
}
JavaScript
복사
4-6. Array 오브젝트(ES3)
•
Array도 object이므로 Array(), new Array() 둘 다 인스턴스를 생성한다.
Array.prototype | 설명 | |
constructor | 생성자 | |
unshift() | 배열 처음에 엘리먼트 삽입 | |
push() | 배열 끝에 엘리먼트 삽입 | |
concat() | 배열 끝에 값을 연결 | |
slice() | 인덱스 범위의 엘리먼트 복사 | |
join() | 엘리먼트들과 분리자를 결합하여 반환 | |
toString() | 엘리먼트를 문자열로 연결하여 반환 | |
toLocaleString() | 엘리먼트를 지역화 문자로 변환하고 문자열로 연결하여 반환 | |
shift() | 첫 번째 엘리먼트를 삭제하고 삭제한 엘리먼트 반환 | |
pop() | 마지막 엘리먼트 삭게 후, 삭제한 엘리먼트 반환 | |
splice() | 엘리먼트 삭제하고 새로운 엘리먼트 삽입, 삭제한 엘리먼트 반환 | |
sort() | 엘리먼트 값을 Unicode 순서로 분류하여 반환 | |
reverse() | 엘리먼트 위치를 역순으로 바꾸어 반환 |
얕은 복사 깊은 복사
•
slice()는 얇은 복사
•
4-7. Array 오브젝트(ES5)
•
isArray()는 typeof를 사용했을 때 object로 밖에 확인이 되지 않기 때문에 나왔다.
Array 함수 | 설명 |
isArray() | 배열 여부 반환 |
Array.prototype | 설명 |
indexOf() | 지정한 값에 일치하는 엘리먼트 첫 번째 인덱스 반환 |
lastIndexOf() | indexOf()와 같으며, 마지막 인덱스 반환 |
forEach() | 배열을 반복하면서 콜백 함수 실행 |
every() | 반환 값이 false일 때까지 콜백 함수 실행 |
some() | 반환 값이 true일 때까지 콜백 함수 실행 |
filter() | 콜백 함수에서 true를 반환한 엘리먼트 반환 |
map() | 콜백 함수에서 반환한 값을 새로운 배열로 반환 |
reduce() | 콜백 함수의 반환 값을 파라미터 값으로 사용 |
reduceRight() | reduce()와 같음. 단, 배열의 끝에서 앞으로 진행 |
•
forEach()
◦
콜백의 3번째 인자는 모든 배열 전체가 전달된다.
◦
forEach의 3번째 인자로 this로 참조할 오브젝트 전달이 가능
var list = ['a','b','c','d','e','f','g','h','i'];
list.forEach(function (el, index, all){
console.log("🚀 ~ el, index, all:", el, index, all)
});
JavaScript
복사
var list = ['some','obj','some obj'];
var fn = function (el, index, all){
if (el === this.obj) console.log(el, "matched!")
else console.log(el, ' not matched')
}
list.forEach(fn, { obj:"some obj"});
JavaScript
복사
•
함수 호출 시간 측정
◦
console.time(label), console.timeEnd(label)로 측정
•
reduce()
◦
두 번째 파라미터로 초기값 설정
◦
reduceRight()는 마지막 인덱스부터
var value = [1, 2, 3, 4, 5, 6];
var fn = function (prev, cur, index, all) {
console.log(prev, ',', cur);
return prev + cur;
};
var result = value.reduce(fn);
console.log(result);
// 초기값 설정
var result = value.reduce(fn, 10);
console.log(result);
JavaScript
복사
5. 자바스크립트 특징
•
스크립팅 언어(인터프리터)
•
사용하는 시점에 컴파일하고 실행한다.
5-1. 객체 지향
•
자바스크립트는 객체 지향 언어
•
자바스크립트의 OOP(Object Oriented Programming)는 다른 언어의 OOP랑은 차이가 있다.
따라서 비교하는 것은 의미가 없다.
•
객체란? 속성과 동작을 묶은 논리적 단위를 의미한다.
5-1-1. OOP의 객체
객체는 개념적 접근으로 실체가 없다.
Java, C++에서는 개념적인 설계도(클래스)를 기반으로 만들어진 인스턴스가 객체이다.
하지만 자바스크립트에서는 객체가 클래스 없이도 직접 존재할 수 있다.
•
Object: 자바스크립트에서 이름(키)과 값을 구성된 프로퍼티의 집합.
5-1-2. JS 객체 형태
•
Object 오브젝트 형태
◦
인스턴스를 생성할 수 없음.
위에서 new 키워드나 Object 함수를 쓰면 인스턴스가 생성이 된다고 했다.
이미 인스턴스가 생성이 된 상태라 인스턴스를 생성할 수 없다.
var blog = {
post: "Javascript"
}
JavaScript
복사
•
Function 오브젝트 형태
◦
객체지만, OOP의 객체라고 하기에는 부족하다.
객체에 오직 하나의 메소드가 하나 있는 모습이기 때문이다.
function readBlogPost(post){ ... return ... };
JavaScript
복사
5-1-3. prototype
•
JS의 OOP 구현 방법이다.
•
prototype에 메소드 연결을 한다.
•
다른 언어는 class 안에 메소드와 프로퍼티를 작성하지만,
자바스크립트는 prototype에 메소드를 연결하여 작성한다.
•
ES6에서 class로 메소드를 작성하지만, 내부에서 prototype에 연결한다.
5-1-4. 자바스크립트 인스턴스
•
Instance
◦
Class를 new 연산자로 생성한 것.
프로토타입으로 연결된 것이 있으면 클래스로 볼 수 있다.
•
인스턴스 목적
◦
Class에 작성된 메소드 사용.
◦
인스턴스마다 프로퍼티 값을 유지
◦
축구 경기에서 각 팀에 적용되는 규칙은 같지만 팀마다 점수는 다르다.
6. Object 오브젝트(ES5)
6-1. ES5 Object 특징
•
ES5 Object에 함수가 추가됨.
◦
추가된 메소드(Object.prototype)는 하나도 없다.
•
빌트인 Object 모든 메소드(6개)는 대부분의 빌트인 오브젝트(Number, String 등등 오브젝트)에 첨부.
빌트인으로 오브젝트를 생성하므로 연결이 많이 발생하는 문제 때문에 메소드가 아닌 함수로 추가된 것 같다.
Object 함수(ES5) | 설명 |
defineProperty() | 프로퍼티 추가, 프로퍼티 속성 변경 |
다수의 프로퍼티 추가, 속성 변경 | |
getPrototypeOf() | prototype에 연결된 프로퍼티 변환 |
getOwnPropertyName() | 프로퍼티 이름을 배열로 반환 |
keys() | 열거 가능 프로퍼티 이름 반환 |
getOwnPropertyDescriptor() | 디스크립터 속성 반환 |
preventExtensions() | 프로퍼티 추가 금지 설정 |
isExtensible() | 프로퍼티 추가 금지 여부 반환 |
seal() | 프로퍼티 추가, 삭제 금지 설정 |
isSeal() | 프로퍼티 추가, 삭제 금지 여부 반환 |
freeze() | 프로퍼티 추가, 삭제/변경 금지 설정 |
isFrozen() | 프로퍼티 추가, 삭제/변경 금지 여부 반환 |
6-2. 프로퍼티 디스크립터
•
데이터 : value, writable
•
액세스: get, set
•
데이터와 액세스는 같이 작성을 할 수 없다.
•
데이터와 액세스는 같이 작성을 할 수 없다. 먼저 value, writeable 체크
◦
작성되어 있으면 데이터 프로퍼티 디스크립터
◦
작성되어 있지 않으면 액세스 프로퍼티 디스크립터
프로퍼티 디스크립터 | 설명 |
value | [[Value]], 설정할 값 |
writable | [[Writable]], 값 변경 가능 여부 |
get | [[Get]], 값 반환 프로퍼티 함수 |
set | [[Set]], 값 설정 프로퍼티 함수 |
enumerable | [[Enumerable]], 프로퍼티 열거 가능 여부 |
configurable | [[Configurable]], 프로퍼티 삭제 가능 여부 |
•
defineProperty()
◦
프로퍼티마다 상태를 갖고 있음
◦
상태란? 변경/삭제/열거 가능 여부.
▪
상태가 가능일 때만 처리할 수 있음.
6-3. get 속성
•
obj.food에서 값을 호출하는데 오브젝트의 프로퍼티 중 food에 해당하는 값이 없다.
이 경우에는 get 함수가 호출된다.(set 함수도 마찬가지)
•
ES6에는 더 편하게 작성할 수 있도록 만들어짐.
var obj = {};
Object.defineProperty(obj, 'food', {
get: function () {
return 'Pizza';
},
});
var result = obj.food;
console.log(result); // 'Pizza'
JavaScript
복사
6-4. 프로퍼티 추출
•
getPrototypeOf()
•
setPrototypeOf() → ES6에 있음
•
getOwnPropertyNames()
◦
열거 가능 여부를 체크하지 않음.
•
keys()
◦
열거 가능 여부를 체크
6-5. JSON 오브젝트
•
JSON 주요기능
◦
데이터 송수신의 변환 기준
◦
텍스트이므로 전송 속도가 빠름
▪
기존에 쓰던 XML은 오브젝트라 무겁다.
◦
파일 확장자: json, txt도 사용 가능
◦
특정 조건 처리가 가능
var data = {
food: {
pizza: 300,
burger: 12000,
ice_cream: 1500,
},
music: {
country: 'USA',
genre: 'pop',
album: 'Thriller',
},
};
function replace(key, value) {
if (key === 'pizza' && value < 1000) {
return 34000;
}
return value;
}
// replace로
var result = JSON.stringify(data, replace);
console.log(result);
JavaScript
복사
•
var result = JSON.stringify(data, ['food']);
◦
프로퍼티 이름이 food인 것만 직렬화를 한다.
◦
세번째 프로퍼티에 넣는 문자 값에 따라서 들여쓰기, 줄바꿈도 가능하다.
7. Date 오브젝트
Date 함수 | 설명 |
Date() | 현재 시각 반환 |
Date.parse() | 문자열 값을 밀리초로 변환 |
Date.UTC() | UTC 기준 밀리초로 변환 |
Date.now() | 현재 시각을 밀리초로 반환 |
Date.prototype | 설명 |
constructor | 생성자 |
toString() | 일자와 시간을 변환해서 문자열로 반환 |
Fri Feb 07 2025 23:45:24 GMT+0900 (대한민국 표준시) | |
toUTCString() | UTC 일자와 시간 반환 |
Fri, 07 Feb 2025 14:45:56 GMT | |
toISOString() | ISO 8601 확장 형식의 간소화 버전 |
2025-02-07T14:46:22.945Z | |
toDateString() | 연월일과 요일을 사람이 읽기 쉬운 형태로 반환 |
Fri Feb 07 2025 | |
toTimeString() | 시분초와 타임존을 사람이 읽기 쉬운 형태로 반환 |
23:46:49 GMT+0900 (대한민국 표준시) | |
toLocaleString() | 일자와 시간을 지역 언어로 반환 |
2025. 2. 7. 오후 11:48:10 | |
toLocaleDateString() | 연월일을 지역 언어로 반환 |
2025. 2. 7. | |
toLocaleTimeString() | 시분초와 오전/오후를 지역 언어로 반환 |
toJSON() | JSON.stringify()와 연동하여 JSON 형태의 일자, 시간 설정 |
2025-02-07T14:48:57.586Z |