주절주절 기록장

일급객체와 함수 

일급객체는 리터럴로 생성할 수 있다. 런타임 시 생성된다.

변수나 자료구조에 저장가능하다.

매개변수로 사용 가능하다

메서드로 사용 가능하다.

함수객체의 프로퍼티는 argument, length, __proto__, prototype, caller?, name 등이 있다.

argument는 함수 호출 시 받은 인수를 알 수 있다. 전달 받은 인수를 저장하며, 매개변수를 초과해서 받더라도 초과한 인수 역시 저장한다. argument의 length는 받은 인수의 숫자를 나타낸다. 그러므로 인수의 개수에 따라 행동이 달라지는 구조를 만들 때 유용하다.유사 배열 객체로 배열이 아니므로 배열 메서드를 바로 사용하면 에러가 발생한다. 사용하기 위해선 간접호출을 해야한다.

length 매개변수의 숫자를 알려준다. argument의 length는 인수의 숫자이므로 주의를 해야한다.

__proto__ [[prototype]]라는 내부슬롯이 가리키는  프로토타입 객체에 접근할 수 있다.

prototype 생성자 함수에만 존재한다. 생성자 함수 호출 시 인스턴스의 프로토타입을 가리킨다.

caller? 함수 자신을 호출한 함수를 가리킨다. 호출이 없다면 null이다. 

적지 못한 내용 

-> name 함수이름을 나타낸다. ES5에서는 함수 이름이 없다면 빈 문자열을 가졌지만 ES6 부터는 식별자를 값으로 갖는다.

프로퍼티 어트리뷰트

내부로직인 내부슬롯, 내부메서드는 직접접근은 안되고 일부에 한해서 간접접근이 가능하다.

[[Prototype]]은 __proto__로 접근이 가능하고, 프로퍼티 속성인 어트리뷰트는 Object.getOwnPropertyDescript ?

로 접근이 가능하다. 둘다 내부슬롯에 해당한다.

프로퍼티 속성은 일반적으로 값, 값변경가능 여부, 열거가능 여부, 재정의가능 여부로 구성되어있다.

프로퍼티의 종류는 두가지로 일반적인 우리가 아는 키와 값으로 구성된 데이터 프로퍼티와 프로퍼티에 접근해서 데이터를 읽거나 쓸수 있는 접근자 프로퍼티가 있다.

접근자 프로퍼티는 구성이 조금 다르다. 값이 없기 때문에 값변경 여부 속성이 빠지고 get, set이라는 속성을 가지고 있다.

get은 데이터프로퍼티에 접근하여 getter 함수를 호출하여 프로퍼티 값을 반환한다. set은 프로퍼티를 저장할 때 setter 함수를 호출하여 프로퍼티를 저장한다. 나머지 열거가능 여부와 재정의가능 여부는 공통적으로 가지고 있다.

Object.defineProperty 였나?? 프로퍼티 속성을 정의, 재정의할 수 있다. 인수로 객체, 프로퍼티, 프로퍼티 속성을 받는다.

정의할 때 속성을 생략한다면 가능여부 속성은 false로 값, set, get은  undefined가 된다. 

속성 제어

확장금지 - 객체.preventExpansion ? 모두 다 가능하지만 프로퍼티 추가가 금지된다.

동봉? - 객체.seal 삭제, 추가, 재정의가 금지 된다.

? - 객체.frozen ? 읽기 외에 모든 것을 금지한다. 

생성자 함수

new Object, new 연산자와 Object 생산자 함수를 통해 빈 객체를 만들 수 있다.

Object 말고도 Number, String, Boolean ?? 등등 빌트인 함수로도 가능하다. 

 생성자 함수를 쓰는 이유는 동일한 구조의 객체가 많이 필요할 때 객체를 수없이 많이 만들기에는 낭비가 크다.

생성자 함수를 통해 그 낭비를 줄일 수 있다. 

this 생선된 빈 객체는 this를 통해 바인딩 된다. 생성자 함수 내에서 this는 생성자 함수를 가리키며 프로퍼티나 메서드를 만들 수도 있다. 만약 생성자 함수가 아니라 일반 함수에서 사용했다면 일반함수를 무시하고 window를 가리켜 전역상태가 된다.  this를 사용한 바인딩시 주의점은 함수가 끝나면 this를 반환한다. 그런데 return을 정의 했다면(원시값 제외) return이 this 대신 반환된다. 

 함수 역시 객체이므로 객체의 속성을 다 가진다. 이런 함수와 객체의 큰 차이점은 호출이 가능하다는 점이다. 그러므로 함수는 다른 내부슬롯이 더 있고 내부메서드 역시 [[Call]], [[Construct]]등이 추가되어 있다. [[Call]]은 함수를 호출할 때 호출되며 함수는 호출이 가능하므로 callable은 당연하다. 이런 함수 중 생성자함수 생성 가능 여부를 나태내는 것이 [[Construct]]이다. 생성자 함수를 만들 때는 Call 대신 Constuct가 호출된다. Construct 가능한 것은 함수 정의식, 함수표현식, 클레스 등은 가능하고 non-construct 는 화살표 함수, 축약 메서드가 해당된다. 

new.target 생성자 함수인지 아닌지 알려준다. 아니라면 undefined를 반환한다. 

!! 다시보자

!!함수란? 입력을 받으면 출력을 하는 과정?  

함수를 쓰는 이유 - 재사용 하기 매우 좋다. 함수를 재사용함으로써 코드의 신뢰도가 올라간다.

함수의 구성 - 함수 이름, 매개변수, 함수몸체, 인수 등이 있다.

함수이름 - 함수이름은 함수내에서만 동작한다. 식별자 명명법에 따른다. 생략가능하다(선언문 제외)

매개변수 - 함수 내에서만 작동 기존 변수의 특징을 가지고 있따. 초기화 시에 undefined, 값에의한 전달

참조에 의한 전달 등, 없어도 됨, 식별자 명명법 따라야함  

return - 함수를 끝내고 값을 반환한다. 생략가능 대신 undefined 출력

인수 - 순차적으로 매개변수에 할당된다.  매개변수가 2개인데 3개를 넣으면 마지막 것 무시, 하나가 들어간다면?

인수, undefined가 매개변수에 들어가 있을 것이다. JS 변수선언 키워는 타입을 가리지 않고 받기에 원하는 타입을 받기 위한 조치가 필요하다. 인수의 숫자 역시 다르게 들어 갈 수 있으므로 주의 필요

함수 정의 4가지 방법 

함수 선언문 - 함수이름이 생략 불가능하다. 함수이름으로 언어차원에서 암묵적으로 식별자를 만들기 때문이다. 

함수 표현식과 변수 대입 빼곤 차이가 없어보여 왜 생략불가능인가 의문이 들 수 있다. JS는 문맥으로 판단한다.

{}도 코드블록인지 아닌지 문맥으로 판단하고 이것 역시 마찬가지 

함수 표현식 - 일급 객체이다. 일급객체는 값이자 객체인 것. 선언문과 표현식은 호이스팅 차이가 있다. 선언문은

스코프 최상단에 객체가 들어가 초기화 된다. 표현식은 var 키워드에 할당하면 undefined로 초기화 되고 선언문에서 객체가 들어간다.

화살표 함수, 생성자 함수 이건 나중에 배운다고 함

함수의 종류 

즉시 실행 함수 - 보통 함수 이름이 없다. 있어도 상관은 없음. 그룹연산자로 감싸서 선언문 형식을 함수리터럴로 만든다.

선언문 형식이지만 선언이 되지 않고 식별자가 만들어지지 않기에 호출은 처음 한번 빼곤 불가능하다.

중첩함수 - 내부함수라고도 한다. 함수 안의 함수를 말하며, 외부함수를 돕는 헬퍼 함수이다.

재귀함수 - 함수 몸체에서 자신을 다시 호출하는 함수 함수를 반복해서 호출해서 특정한 값을 만들 때 쓴다.

고차함수, 콜백함수 - 인수로 함수를 받는 것이 고차함수, 인수로 들어가는 함수를 콜백함수로 칭한다. 

콜백함수가 고차함수 제외하고 호출이 되지 않는다면 즉시실행함수로 표현하는 것이 일반적이다. 

순수함수, 비순수함수 - 순수함수는 함수 외부의 변화에 영향을 받지 않으며 주지 않는 함수이다.

비순수함수는 함수 오부의 변화에 영향을 받거나 주는 함수이다.

var은 함수레벨스코프다. 함수만 지역함수로 인정하기에 for, if, while 등 다른 블록은 전역함수로 인식하는

문제가 생긴다. 

스코프 - 활동영역을 말한다.

스코프 체인 - 전역 <- 외부함수 <- 내부함수  내부함수에서 전역 방향으로 식별자를 검색한다. 내부함수에 찾는 식별자가 있다면 전역에 같은 식별자가 있더라도 내부함수의 식별자가 출력된다. 전역레벨에서 식별자를 찾는다면 외부함수나 내부함수 레벨같은 하위레벨로는 내려가서 찾지 않는다. 위로는 올라가도 아래로는 내려가지 않음

!! 분명 추가로 더 있는데 기억이 안난다. 다시 찾아 보자 

제어문

코드블록 {}은 세미콜론 안 붙힘

if(조건){

}

삼항 비교 연산자?

조건 ? 참일 때 출력 값 : 겆시일 때 출력 값

활용

num = 0;

num ? : (num > 0 ? '양수' : '음수';) : '영';

switch case

num = 3;

switch(num){

case 1:  내용

break;

case 2:  내용

break;

case 3:  내용

break;

default: 내용

break;

}

break 없으면 참이 나왔을 때 부터 아래 case 다 참으로 만족해서 실행함

for(var i=0; i < 5; i++){

}

while(조건){

}

do{

}while(조건)

무조건 한번은 실행

break는 반복문이나 이름붙히는 거...있었는데 뭐였더라  아무튼 이 두곳에서 사용 가능

이름 붙히면 좋은점 이중 삼중 반복문일 때 하나하나 break; 안걸고 이름 붙힌 곳으로 바로 이동해서 빠져나갈 수 있음

명시적 타입변환과 암묵적 타입변환

명시적 타입변환 문자열 String(), ().toString 

숫자열 Num(), parseInt(), parseFloat()   

불리언 Bolean()    

암묵적 타입변환 

1 + '' = '1'

1 + '20' = '120'

1 * '20' = 20

1 - '20' = -19

1 / '1'  = 1

불리언 

0 false

1  true

'0' true

'' false

'-0' true

NaN false

undefined false

null false

단축평가

'Dog' && 'Cat'   -> 'Cat' 출력

'Dog' || 'Cat'   -> 'Dog' 출력

논리곱에서 좌항이 참이면 우항까지 참이여야 참이다. 이걸 출력하면 결과를 결정하는 우항이 출력된다.

논리합에서 좌항이 참이면 우항까지 볼 필요 없이 참이다. 이걸 출력하면 결과를 결정하는 좌항이 출력된다.

null && 'Cat' -> null 출력

null || 'Cat'  -> Cat 출력

논리곱에서 좌항이 거짓이면 우항까지 볼 필요 없이 거짓이다. 이걸 출력하면 결과를 결정하는 좌항이 출력된다.

논리합에서 좌항이 거짓이더라도 우항이 참이여야 참이다. 이걸 출력하면 결과를 결정하는 우항이 출력된다.

falsy값 검사할 때 유용

이름 기억 안남

사용법 ?. 

좌항이 falsy값이면 undefine 출력 아니면 우항 출력이었나?

이름 기억 안남

사용법 ??

undefine, null  구별가능, 맞으면 우항 출력이었나? 찾아봐야겠다.

undefine, null 아닌 falsy값은 그대로 좌항이 나온다 

객체 

객체이름 {

키: 키값 

};

객체 {}는 코드블록아님 ; 붙여야함

키랑 키값을 합쳐 프로퍼티라 한다.

객체이름이나 키 값도 식별자 명명법에 따라야함

함수도 키값으로 받을 수 있다.

값은 다 프로퍼티에 들어 갈 수 있다.

키값은 명명법 안따르면 객체접근방식이 객체이름.키 방식과 객체이름.['키'] 방식 중

두번째 방식으로만 접근가능

수정과 동적생성

추가방식과 수정은 코드에 객체이름.키 = 키값 쓰면 된다.

안에 키값이 있으면 키값을 수정할 것이고 없으면 새로 생성된다.

축약방식

var x  =  1;

var y  =  2;

temp{

x : x  // 1

y : y  //  2

};

var x  =  1;

var y  =  2;

temp{

x   // 1

y   //  2

};

 var i = 0;

temp{

class + '-' + i++ : i;

class + '-' + i++ : i;

class + '-' + i++ : i;  

};

이런 방식도 가능 

temp{

 pluse : function(x, y){

return = x + y 

};

temp{

plus(x, y){

return = x + y 

};

이건 좀 헷갈리네 함수 줄여서 프로퍼티 만들 수 있음

원시값과 객체

원시값은 불변임 변수에 넣은 값이 달라진다 할 수 있는데 그건 변수가 새로운 메모리에 다시 값을 담은 거임

메모리에 들어간 원시값은 변하지 않는다. 

상수와 문자열이 있다.

문자열이 배열을 닮아서 상수같은 원시값이랑 차이가 있었는데 기억이 안난다 

일단 배열처럼 인덱스로 접근가능한데 수정은 불가능임

객체는 수정가능하다.  원시값은 변수에 담으면 임의의 메모리에 값을 담지만 

객체는 임의의 메모리에 메모리주소를 담는다. 

그 주소를  따라가면 객체가 나옴

이 차이는 원시값은  var y =1; var x = y;  y= 50; 을 해도 x값은 변하지 않는다.

y = 1; x = 1; y = 50; 다 다른 메모리에 담긴다. 하나를 수정해도 다른 값에 영향이 없음

객체는 값 대신 메모리 주소를 담기 때문에  객체 y선언 x = y; 상태일 때 둘다 다른 메모리주소에 담기지만

추적해보면 둘다 같은 객체가 담긴 메모리주소에 접근하게 된다. 그래서 하나를 수정하면 다른 하나 역시 변한다.

원시값이 확실히 안정성이 높지만 객체는 워낙 자원을 많이 차지하기에 새로 담기엔 부담스럽다 그래서 이런 방식을 씀

자바스크립트 7가지 데이터 타입

1. 숫자형 - c처럼 정수,실수형 이런 거 없음 하나로 통합 숫자는 전부 실수로 표현됨

2진수, 8진수를 출력하면 10진수로 나온다.

2. 문자형 - '', "",``으로 표현된다.

3.불리언 - True, False로 나뉨 

4. undefined - 개발자가 아닌 언어 차원에서 자동으로 변수에 할당함, 아직 값을 넣지 않은 상태

5.Null - 개발자가 의도적으로 넣은 값, 값이 없음을 알림

6. 객체 타입 - 코드는 원시값과 객체로 나뉜다, 자바스크립트는 객체언어이고 대부분 객체로 구성되어있다.

원시값과 달리 값을 바꿔버릴 수 있음

7.심볼 타입- 변경 불가능 유이무이한 값을 표현할 때 쓴다.

탬플릿 리터럴 - ``으로 표현 문자형에서 /n/t등으로 표현했던 공백과 줄바꿈을 글쓰듯이 스페이스바 엔터로 표현가능하게 한다. 문자형에 다른 타입 삽입까지 가능캐 한다. 매우 편리한 기능

데이터타입이 필요한 이유 - 값을 할당하거나 꺼낼 때 데이터 타입을 알아야 작업하기 좋다. 

c언어는 정적이다. 데이터 타입이 변수선언 때 부터 정해진다. 안정성 높고 가독성 좋음

자바는 동적이다. 데이터를 할당해야 데이터 타입이 정해진다. 쓰기엔 편하나 표시를 제대로 안해두면

데이터가 무슨타입인지 알기 힘들다는 단점도 있다.

변수란 값을 저장하는 할당받은 메모리 공간 또는 그 공간을 식별하는 이름을 뜻한다. 

변수란 왜 중요한가? 예를 들어 10 + 20 을 계산해보자 10, 20, +는 임의의 메모리에 저장되고 연산은 cpu에서 수행한다 

결과값 30은 어디로 갈까? 30 역시 임의의 메모리에 저장된다.  연산을 수행했다는 말은 보통 그 값을 활용하기 위해서이다. 그런데 저 30이라는 값을 어떻게 다시 쓸까 30이 저장된 임의의 메모리에 직접 접근해야할까?

답은 접근 불가이다. 메모리에는 30이라는 값 말고도 운영체제의 중요한 값이 저장되어 있다. 혹여나 실수로 값을 잘못 바꾸게 된다면 치명적인 에러가 발생한다. 그렇기 때문에 자바스크립트는 개발자의 메모리 직접 접근을 허용하지 않는다.

그리고 허용해도 문제는 남아있다. 같은 코드라도 매 실행마다 메모리 상황에 따라 매번 임의의 메모리에 접근한다. 아무리 임의의 메모리를 써먹으려 해도 쓸수가 없다. 

이제 값의 할당을 해보자. var score = 80; score = 90; 이라는 코드는 호스팅 효과로 임의의 메모리 3곳에 undefined, 80, 90이라는 값이 담긴다. 메모리가 3군데 값이 담겼지만 최종적으로 변수가 가르키는 주소는 90이 들어있는 주소다.

나머지 값들은 쓰지 않는 값이 되어 자바스크립의 내장 기능으로 인해 자동으로 비워진다. 다만 언제 비워질지는 정확히 알수 없다. 

매니지드 언어, 비매니지드 언어 

매니지드 언어는 개발자가 메모리를 제어하지 않고 자바스크립트처럼 언어 차원에서 관리하는 것이다.

장점으로는 편이성과 일정이상의 성능을 제공하지만 최적화 효율을 따지자면 손색이 있다.

반대로 비매니지드 언어가 있다 c가 대표적인 예로 malloc(), free()등으로 개발자가 제어를 한다. 개발자 역량에 따라 좋은 효율을 보여주지만 역으로 치명적인 문제를 일으킬 수도 있다.

식별자- 식별자는 값이 저장된 주소를 식별하는 존재를 다 식별자라 부른다. 변수,클레스, 함수등이 전부 식별자다.

식별자의 명명 규칙

1. 특수문자를 제외한 문자, 숫자, $, _ 를 사용할 수 있다.  

2. 특수문자를 제와한 문자,$,_ 를 식별자 맨 처음에 쓸 수 있다. 숫자는 안됨

3. 예약어는 안된다. 예약어는 코드를 쓸때 쓰는 키워드들이다. switch, if, this, for 등등 

자주쓰는 명명 방식 - 두 단어 이상이 결합된 길이가 긴 식별자를 적을 때 쓰는 규칙

카멜 케이스 classScore 

앞단어의 첫글자는 소문자 뒷단어의 첫글자는 대문자로 쓰는 방식, 함수나 변수를 정의할 때 많이 쓴다.

스네이크 케이스 class_score

첫글자는 앞뒤 소문자로 쓰고 단어 사이에 _를 추가한 케이스

파스칼 케이스 ClassScore 

앞뒤 첫글자를 대문자로 쓰는 방식, 생성자 함수, 클레스에서 많이 쓴다.

변수 선언 

변수 선언은 메모리를 할당받아 임의의 주소에 값을 저장하는 준비 단계이다. 

변수 선언 키워드는 var, let, const 등이 있다. 

var은 let, const 보다 먼저 나온 키워드로 유일한 키워드였다. let, const는 var의 단점을 해결하기 위해 나온 키워드다.

var의 단점은 3가지로

1.중복 선언이 가능하다. 변수가 중복되어도 에러가 나오지 않는다. 대형 프로젝트에서 변수가 중복이 되었을 때 알기 어려울 것이다. 그 상태에서 실행된다면 어떻게 될까? 에러가 당연히 나올 것이다.

2. 호스팅 문제, 호스팅은 변수 선언을 코드 실행 런타임 전에 스코프 최상단에 올려서 먼저 처리하는 방식이다. 

이것의 문제는 가독성이다. 변수 선언이 코드 최하단에 있고 변수 참조는 최상단에 뜬금없이 나와도 에러가 나오지 않는다.

스코프는 변수가 사용되는 영역을 말한다.  

3. 전역변수 문제 앞의 호스팅 문제와 연결된다. var은 함수스코프로 함수 {}를 지역변수로 인식한다. 

그 밖의 영역의 var은 전역변수로 인식해버린다.

let,const는?

1.중복이 불가능하다. 중복은 에러 표시가 뜬다.

2.호스팅 문제도 해결했다. 호스팅은 하지만 undefined를 넣어 초기화를 하지 않는다. 선언보다 먼저 참조가 나와도

참조에러가 뜨면서 에러가 뜬다.

 3. 함수 스코프가 아닌 블록스코프로 범위가 훨씬 넓어져 전역변수의 문제를 해결했다.

let의 특징 재할당 가능, const 재할당 불가능(원시값 말고 객체는 변경 가능)

메모리는 메모리 셀로 구성되어있다. 메모리셀은 1바이트 크기로 메모리가 읽고 쓰는 단위 역시 1바이트다.

값 - 값은 코드실행시 평가되어 값을 생성하거나 참조하는 것을 말한다. 

리터럴 - 문자 혹은 약속된 기호들로 값에 해당된다.

리터럴의 종류 - 간단하다 리터를은 값이므로 변수에 들어가는 모든것은 리터럴이다. 

표현식 - 평가되어 값을 만드는 식

문- 명령문이라고도 한다. 문이 모여 코드가 만들어진다. 토큰으로 나눌 수 있다. 토큰은 더 이상 나눌 수 없는 의미를 가진 최소 문자, 문은 표현식과 표현식이 아닌 것으로 나뉨, 표현식인지 알 수 있는 방법 변수에 할당해보면 됨 변수는 값만 들어가므로 변수에 들어가면 표현식임

적지 못한 것과 그 이유

Jquery, dom, 동기, 비동기 설명이 빠졌다.

Jquery는 짧게 적은 만큼 기억도 그만큼 안났던 것 같고, DOM은 설명을 봐도 이해가 안돼서

기억이 안나는 것 같다. 

동기, 비동기는 적을 수 있었는데 다음것을 생각하다 적는 걸 잊었다. 

다시 적어보기

Jquery - dom을 쉽게 제어하게 한다. 

DOM - XML, HTML에 접근하기 위한 인터페이스다.

이 객체 모델은  문서내 모든 요소를 정의하고, 접근하는 방식을 제공한다. 

동기 - 응답(결과)가 받기 전 까지 다른 동작을 하지 않는다. 과정이 단순하고 처리 속도는 빠르지만

그 일을 처리하기 전 까지는 자원의 낭비가 일어난다.

비동기 - 응답(결과)를 받지 않아도 다른 일을 처리한다. 과정은 복잡해지고 처리속도도 느려지지만

자원의 낭비 없이 효율적인 처리가 가능하다.

돌아보기

동기, 비동기는 알고도 못 적은 만큼 다 적고 나서도 잊은 것이 없는지 충분히 고민하는 시간이 필요해 보인다.

그리고 확실히 펜으로 적으니 기억에 더 각인되는 느낌이지만 시간이 너무 오래 걸린다.

메모장 같은 곳에 적는 것도 생각해 봐야겠다.