property

property: {name(이름/키) : value(값)} 의 형태로 이루어져 있으며, object의 속성

var object = {abc: 123}
console.log(object.abc)
*결과: 123

property 값 추출은 . 말고도 [] 을 사용할 수도 있다.
object.abc == object[abc] == object["abc"]

for ~ in
오브젝트 안에서 property 열거

for (변수) in (object)
ex>

var Desert = {
    name: "cake"
    favor: "strawberry"
}
for var item in Desert {
    console.log(item)
    console.log(Desert[item])
}

// 결과: name cake favor strawberry

Built in

빌트인(Built-in): 값 타입, 연산자, 오브젝트를 사전에 js 영역에 만들어 놓은것

type
undefined, null, boolean, number, string, object
operator
+, - *, etc...
object
ex> number, string...etc 등등의 object 존재
-number
-string
-boolean
-object
{key:value} 형태, 프로퍼티 지원
-array
-function
함수 지원
-math
수학 계산
-date
-json
서버와 통신하는 데이터 형태를 지원하는 오브젝트
프로퍼티 형태 -> [{"name":"value"}]
-global
소스 파일 전체에서 하나만 존재
모든 코드에서 공유, 접근 가능
-RegExp
.... 총 11개 존재

Number 오브젝트

숫자 처리를 위한 함수와 프로퍼티가 포함됨
프로퍼티: key value

toString() -> 숫자를 문자열로 변환

newNumber() : 인스턴스를 생성하기 위해 사용됨
Number(): 숫자값으로 변환하여 반환하기 위해 사용
valueOf() : 프리미티브(=인스턴스) 값 반환하기 위해 사용

to로 시작하는 함수: 변환을 하기 위함

Number 타입으로 변환

Number()

파라미터: 변환할 값
반환: 반환한 값

ex Number("123") = 123 (숫자 타입으로 변환)
Number("ABC") = NaN (Not a Number)
변환할 수 없는 값 = NaN으로 반환
16진수 -> 10진수로 바꿀때 사용하기도 함
Number(undefined) = NaN

상수: 값 변경, 삭제 x
Number.MAX_VALUE 형태로 값 사용
ex> Number.NaN = Not a Number (NaN도 일종의 값이다.)

new 연산자

오브젝트로 인스턴스를 생성하여 반환
원본 = 오브젝트
원본을 복사하는 개념으로 생각하면 됨
ex>

var obj = new Number();
log(typeof obj);

result: object

constructor : 생성자
파라미터 : 값 옵션
반환 : 생성한 인스턴스

인스턴스 생성 목적: 인스턴스마다 서로 다른 값을 갖기 위한 것

Number 인스턴스 생성

new Number()
빌트인 Number 오브젝트 -> 새로운 Number 인스턴스 생성

var obj = new Number("123");
log(obj.valueOf);

결과: 123

프리미티브

primitive Value
: 언어에 있어 가장 낮은 단계의 값
{{PrimitiveValue}} : 자바스크립트 엔진이 이름 없는 값에 부여한 이름

프리미티브 값을 갖는 오브젝트 : boolean, date, number, string

var obj = new Number(123);
log(obj + 200);

결과: 323

valueOf()

toString()

var value = 20;
log(20 === value.toString());
log(value.toString(16));

결과: false 14(16진수 변환)

log(20..toString());

20.toString()으로 작성하면 에러발생
20.. -> 실수로 처리해서 에러발생 x
결과: 20

toLocaleString()
파라미터: 변환 x (es6에서는 언어타입 사용가능)
숫자를 브라우저가 지원하는 지역화 문자로 변환

지수 표기

toExponential()

var value = 1234;
log(value.toExponential())

결과: 1.234e + 3

toFixed()
: 고정 소숫점 표기로 변환하여 문자열로 반환

val value = 1234.567;
log(value.toFixed(2));
log(value.toFixed());

result: 1234.57
1235 (기본적으로 첫째자리에서 반올림)

String 오브젝트

문자 처리를 위한 함수, 프로퍼티 포함

프로퍼티 리스트

• new String()
• String()
• fromCharCode() 유니코드를 문자열로 변환
• constructor 생성자
• valueOf() 프리미티브 값 반환
• toString() 문자열로 변환
• indexOf() 가장 작은 인덱스
• lastIndexOf() 가장 큰 인덱스
• toLowerCase()
• toUpperCase()

문자열로 변환

String()
값 작성 x -> 빈 문자열 반환
문자열 + number 타입의 결과값 = string 타입

new String()
String 인스턴스 생성하여 반환

var obj = new String(123);
log(typeof obj);

결과값: object
(new 연산자 사용)

valueOf()

var obj = new String(123);
log(obj.valueOf());

결과: 123 (String 인스턴스의 프리미티브 값 반환)
프리미티브 값 : 쉽게 말해 인자로 들어가는 값

length 프로퍼티

문자 수 반환

var value = "AB"
log(value.length)

result: 2
프로퍼티 :
key : value 구조
name : value 구조

화이트 스페이스 삭제

trim()

var value = "  abcd  "
log(value.length);
log(value.trim().length);

result : 8
4

함수 호출 구조

toString()

var value = 123;
var result = value.toString();
log(typeof result);

결과: string

toString()이 필요한 이유: key : value 형태로 변환하지 않기 위해

charAt()
: 인덱스의 문자 반환

var value = "sports";
log(value.charAt(1);

결과: p

존재하지 않을 경우: undefined
빈문자열: 일종의 값

indexOf()
: 문자열 검색
왼쪽에서 오른쪽으로 검색

var value = "123123";
log(value.indexOf(2);

결과 : 1
(2의 위치를 찾아줌: 1번째 위치에 존재하므로 1 반환)

var value = "123123";
log(value.indexOf(2, 3));

result : 4
3번째부터 시작할 때, 2의 위치값을 반환
같은 문자열이 없을때 : -1 반환

두번째 파라미터 값이 0보다 작으면 or NaN이면 : 처음부터 검색

lastIndexOf() : 뒤에서 앞으로 검색

var value ="123123"
log(value.lastIndexOf(2));

result: 4 (뒤에서, 즉 5번째부터 계산하므로 4번째가 가장 먼저 튀어나온 2이기 때문에)

얘도 같은 문자열이 없을때 -1 반환

문자열 연결

concat()
문자열 연결 함수

var result = "sports".concat("축구", 11);
log(result);
var obj = new String(123);
log(obj.concat("ABC"));

sports축구11
123ABC

toLowerCase()
: 소문자로
toUpperCase()
: 대문자로

문자열 추출

substring()
파라미터 시작 인덱스부터 끝 인덱스 직전(끝 인덱스는 들어가지 않음!)까지 반환

var value = "01234567"
log(value.substring(2, 5));

234

var value = "01234567"
log(value.substring(5));
log(value.substring());

첫번째: 5번부터 끝까지 (끝 인덱스를 지정 안했으므로, 처음부터 끝까지)
두번째: 전체 반환

첫번째 파라미터 값이 두번째 파라미터 값보다 작을 경우 -> 알아서 파라미터 값을 바꿔서 처리
파라미터 값이 음수일 경우 -> 0으로 간주하고 처리

substr()
: 파라미터 시작 인덱스부터 지정한 문자 수를 반환함

var value = "01234567";
log(value.substr(0,3));

012 (0번째부터 3개의 문자열 반환)
두번째 파라미터 작성 x -> 처음 지정한 인덱스부터 전체 인덱스 문자열 반환

slice() :
파라미터 시작 인덱스부터 끝 인덱스 직전까지 반환

NaN, 작성 x -> 0으로 간주

replace()
: 매치한 결과를 파라미터에 작성한 값으로 대체하여 반환

var value = "abcabc";
function change() {
return "함수";
}
log(value.replace(/a/, change());

/a/ -> 첫번째로 나온 a값만 replace
함수 먼저 실행후 replace 실행
result: 함수bcabc

search()
: 검색된 첫번째 인덱스 반환

var value = "cbacba";
log(value.search(/a/));
log(value.search("K"));

2
-1 (값이 없으면 = -1)

split()
: 분리 대상을 분리자로 분리하여 배열로 반환

log("12_34_56", split("_")

result: [12, 34, 56]

분리자가 없을 경우-> 분리대상 전체를 하나의 배열로 반환

charCodeAt()
: 인덱스 n번째 문자를 유니코드의 코드 포인트 값으로 반환

fromCharCode()
: 파라미터의 유니코드를 문자열로 변환하고 문자열로 연결하여 반환

localeCompare()
: 파라미터의 유니코드와 대상 유니코드를 비교하고, 더 크면 1, 같으면 0, 더 작으면 -1 반환

Object 오브젝트

js 오브젝트 구분

• 빌트인 오브젝트
• 네이티브 오브젝트
• 호스트 오브젝트

var abc = new Object();
var obj = {};

abc는 인스턴스
obj는 오브젝트

오브젝트 -> 프로퍼티 (객체, 실체 x)

빌트인 object property

new Object()
인스턴스 생성하여 반환

• new String()
• new Number()
  와 달리 Object()는 파라미터의 데이터(프리미티브의 타입) 타입에 따라 생성할 인스턴스 타입 결정
  undefined, null의 경우 -> 빈 object 인스턴스 반환

Object 인스턴스 생성
파라미터는 {name:value} 형태

var obj = Object({name: "js"});
log(obj);

{name: "js"}
파라미터 작성 안할 경우, new Object()와 같다

new Object() 생성 및 호출 -> {} 출력

var abc = Object();
var abc2 = {};

둘다 Object 인스턴스 생성
{} <- 오브젝트 리터럴이라고 함

둘다 인스턴스 생성
그래서 간단하게 {} 사용해서 object 인스턴스 생성

valueOf()
: 인스턴스의 프리미티브 값 반환

빌트인 오브젝트 구조

• 오브젝트 이름
• 오브젝트.prototype
  인스턴스 생성 가능 여부 기준
• 오브젝트.prototype.constructor
  오브젝트 생성자
• 오브젝트.prototype.method
  메소드 이름과 함수 작성

함수와 메소드 연결

함수

• 오브젝트에 연결
• Object.create()

메소드

• 오브젝트의 prototype에 연결
• Object.prototype.toString()

log(Object.prototype.toString);

var obj = {};
log(obj.toString);

function toString() {[native code]}
function toString( {[native code]}

프로퍼티 처리 메소드

hasOwnProperty()
: 인스턴스에 파라미터 이름이 존재하면 true, 아니면 false 반환

상속받은 프로퍼티이면 false 반환(다른 오브젝트에서 만든 프로퍼티일 경우)

var obj = {};
var own = obj.hasOwnPropert("hasOwnPropety");
log(own);

false
내가 만든게 아니라, 빌트인 오브젝트에서 만든 것이므로

Object와 property

var numberInstance = new Number(123);
var numberProto = numberInstance.__proto__;

인스턴스 생성 -> 첫번째 'proto'에 만듦

• 인스턴스를 만들 수 있는 모든 빌트인 오브젝트의 proto에 Object.prototype의 6개 메소드 설정됨

isPrototypeOf()
파라미터ㅔ 작성한 오브젝트에 object위치에 작성한 prototype이 존재하면 true, 아니면 false

var point = {book: "책"}
log(point.toString());

var obj = new Number(123);
log(Object.prototype.toString.call(obj));

[object Object][object Number]

Function 오브젝트

new Function()

• Function 인스턴스 생성
  파라미터에 문자열로 함수의 파라미터와 함수 코드 작성

var obj = new Function("book", "return book;"
obj("JS 책");

파라미터 2개 이상 작성 -> 마지막 파라미터에 함수에서 실행할 함수 코드 작성

Function()

• Function 인스턴스 생성

함수 생명 주기

함수 분류

• function 분류
  빌트인 function 오브젝트
  function 오브젝트
  function 인스턴스 (new연산자 사용)

• function 오브젝트 생성 방법
  function 키워드 사용
  function getBook(title) {return title};

• JS 엔진이 function인 키워드를 만나면
  이름이 getBook인 function 오브젝트 생성

함수 생명 주기

• 함수 호출
• 함수 코드 실행

length 프로퍼티

• 함수의 파라미터 수가
  생성되는 function 오브젝트에 설정됨

function add(one, two) {
return one + two;
}
log(add.length);  // length는 length 프로퍼티에 저장된 값을 출력함

2

함수 형태

• 함수 선언문
• 함수 표현식

함수 표현식

var getBook = function(title) { return title; }

함수 선언문 -> 먼저 function object를 만듦

함수 호출

call()
호출할 함수 이름.call()
첫번째 파라미터: 호출된 함수에서 this로 참조할 오브젝트
일반적으로 this 사용, 다른 오브젝트 작성 가능

function getTotal(one, two) {~}

var result = getTotal.call(this, 10, 20);

apply()
파라미터 수가 유동적일 때 사용
두번째 파라미터에 배열 사용

function getTotal(one, two) {
return one + two; }
var result = getTotal.apply(this, [10, 20]);
log(result);

결과: 30

toString() 함수는 모든 빌트인 오브젝트에 존재
오브젝트마다 반환되는 형태가 다름
function 오브젝트의 toString()은 함수 코드를 문자열로 반환

Argument 오브젝트

함수가 호출되어 함수 안으로 이동했을 때 arguments 이름으로 생성되는 오브젝트
함수를 호출한 곳에서 넘겨준 값을 순서대로 저장

function getTotal(one) {
return one + arguments[1] + arguments[2];}
var result = getTotal(10, 20, 30);
log(result)

60

function getTotal(one) {
return one + arguments[1] + arguments[2];};

var result = getTotal.apply(this, [10, 20, 30]);
log(result);

60
apply()함수를 통해 배열을 넣어 파라미터 수를 유동적으로 조절 가능

• arguments 메소드를 통해 추가적으로 받아오는 파라미터를 받을 수 있다

Global 오브젝트

모든 스크립트에서 하나만 존재

• new 연산자로 인스턴스 생성 불가
• 모든 코드에서 공유

이름은 있지만, 오브젝트 실체가 없고, 오브젝트를 사용할 수 없음

global 오브젝트를 전역 객체라고 부르기도 하나.... 조금 뉘앙스가 다름

• 함수 안에 작성한 것 : 지역함수, 로컬함수라고 부름

Global 프로퍼티

• NaN
• Ininity
• undefined
  상수 개념으로 사용, 외부에서 프로퍼티 값 변경 불가

global과 window 관계

글로벌 오브젝트 : JS 주체
윈도우 오브젝트: window 주체

글로벌 오브젝트의 프로퍼티와 함수가 window 오브젝트에 설정됨
(글로벌 오브젝트는 실체가 없으므로 window 오브젝트에 저장됨)

정수, 실수 변환

parseInt()
: 값을 정수로 변환하여 반환
(반올림 x, 소수점 뒤에 있는 값들을 잘라버림)

log(parseInt("-123.45"));

답: -123

• 0또는 빈 문자열 제외시킴
• 진수를 이용하여 값 변환
• 값을 입력하지 않을 경우, NaN 출력

log(parseInt(13, 16));

19

parseFloat()
: 값을 실수로 변환하여 반환
문자열의 실수변환

log(parseFloat("-123.45") + 6);
log(parseFloat("12.34AB"))

-117.45
12.34 (AB 제외)

NaN, 유한대 체크 함수

isNaN()
: 값의 NaN 여부 반환

log(isNaN("ABC"));

true (ABC는 숫자가 아니므로....)
숫자값일 경우, false 로 출력

문자열 "123"도 값이 숫자로 변환되서 인식되므로 false로 출력된다.

ifFinite()
: infinity, NaN일 경우, false 반환, finite(유한)일 경우 true 반환
이또한 값이 숫자로 변환되면 숫자로 인식

log(isFinite("123"));

true

인코딩, 디코딩

encodeURI()
: uri를 인코딩하여 반환
인코딩 제외 문자를 제외하고 %16진수%16진수 형태로 변환

var uri = "data?a=변&b=호";
log(encodeURI(uri));

실행 결과 : data?a = %EB%B2%88&b = %ED%98%B8

인코딩 제외 문자

• 영문자, 숫자

• ; / ? : @ & = + $ - , _ . ! ~ * () 등등...

동기 : 한번에 하나씩, 그 외의 동작 수행 x
비동기: 한번에 여러개 처리 가능
인코딩 제외 문자만 신경 써도 된다.

encodeURIComponent()

• URI 를 인코딩하여 반환
  인코딩 제외 문자가 좀 적다는게 위의 함수와 차이점

decodeURI()

• 인코딩을 디코딩하여 반환
• 파라미터에 encodeURI()로 인코딩한 문자열 작성

decodeURIcomponent()
인코딩을 디코딩하여 반환
: 파라미터에 encodeURIComponent()로 인코디한 문자열 작성

eval()

파라미터의 문자열을 JS 코드로 간주하여 실행

• 실행 결과를 반환 값으로 사용
• 값을 반환하지 않으면 undefined 반환

보안 문제 때문에 사용권장 x

var result = eval("parseInt('-123.45')");
log(result);

실행 결과: -123