https://padlet.com/kzh4295/Bookmarks 동반 성장해요 en-us 2021-12-31 20:10:26 UTC 2025-10-17 03:19:38 UTC hello@padlet.com https://padlet.net/icons/png/1f9d0.png https://padlet.com/kzh4295/Bookmarks/wish/1970697038 코딩을 이롭게]]> 2022-01-02 13:03:03 UTC https://padlet.com/kzh4295/Bookmarks/wish/1970697038 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1970719371 2022-01-02 13:25:18 UTC https://padlet.com/kzh4295/Bookmarks/wish/1970719371 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1971407936 6. 데이터 타입
6.1 숫자타입
6.2 문자열타입
... 혹은 

69p 자바스크립트 엔진의 변수할당시,
타입해석 >> 메모리 공간 확보 >> 저장

이런식으로 남겨주세요~]]> 2022-01-03 02:14:21 UTC https://padlet.com/kzh4295/Bookmarks/wish/1971407936 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1971466970 * 69p 데이터 타임에 의한 메모리 공간 확보와 참조
 JS 엔진이 값을 해석 >> 메모리 공간 확보 >> 2진수로 저장
* 77~78p 단항 연산자 +는 피연산자가 2개일때만, 문자열 연결 연산자로 동작하고 피연산자가 1개일때는 숫자타입으로 변환하여 반환
* 81p 예제 07-13 표시한 부분 반복 읽기
* 83p object.is는 ===일치 연산자와 동일하다고 봐야겠구나(-0. NaN제외)
* 86p 
false1 || false // false1(논리합연산자)
true && true2 // true2(논리곱연산자)
* 87p 쉼표연산자
왼쪽 연산자부터 차례로 피연산자 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가결과를 반환한다.
var x, y, z
x=1, y=2, z=3; //3

]]> 2022-01-03 03:07:40 UTC https://padlet.com/kzh4295/Bookmarks/wish/1971466970 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1973312579 * if...else문과 삼항연산자가 동일하다고 생각했는데 아니었구나..
if...else는 조건에 따라 실행 내용이 복잡해서 여러줄이 필요할 경우 사용하고
삼항연산자는 조건에 따라 값(키워드)을 정해 변수에 할당하는 경우에 사용이구나

*폴스루 : switch case문에서 break문이 없을때, case문을 이동하다가 default까지 가는 구나.
default를 생략해도 되는구나..(99p 08-09)

* do...while문은 코드블록을 무조건 한 번 이상은 실행하고 조건식을 평가하는구나.

* 이랬구나.
-0 + ' ' //0
-Infinity + ' ' // "-Infinity"
(Symbol())+ ' '// TypeError
({}) + ' ' // "[object Object]
[]+ ' ' // " "
[10, 20] + ' ' // "10, 20"
(function(){})+ ' ' // "function(){}"
Array+ ' ' // "function Array(){}

* Falsy값
영,란, 언, 누, 포, 싱 >> false

* var elem= null;
var value = elem.value //TypeError
var value = elem && elem.value // null

]]> 2022-01-04 02:16:42 UTC https://padlet.com/kzh4295/Bookmarks/wish/1973312579 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1975479249 2022-01-05 02:05:52 UTC https://padlet.com/kzh4295/Bookmarks/wish/1975479249 https://padlet.com/kzh4295/Bookmarks/wish/1975500815 var score = 80;
var copy = score;
위의 코드에서 copy와 score가 갖는 값은 80으로 동일하지만 score와 copy가 기억하는 주소값은 다를 수도, 같을 수도 있다고 나오는데요. (145p 예제 11-10 아래 두 가지 평가 방식 설명)

142p 마지막 문단, "score 변수와 copy 변수의 값 80은 다른 메모리 공간에 저장된 별개의 값이다."
146p 첫 번째 문단 "결국은 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 ~ ..." 

위와 같은 내용들처럼, 책에서는 두 평가 방식 중 1번 방식 (할당 시점에 두 변수가 기억하는 메모리 주소가 다른 경우)를 토대로 설명을 해주시는데

144p 첫 번째 문단을 보면 그림 11-4를 가리키며, "사실 위 그림은 실제 자바스크립트 엔진의 내부 동작과 정확히 일치하지 않을 수 있다. ECMAScript 사양에는 변수를 통해 메모리를 어떻게 관리해야 하는지 명확하게 정의되어 있지 않다." 고 나옵니다.

실제로 인프런 강의에서는 2번 방식(할당 시점에 두 변수가 기억하는 메모리 주소가 같은 경우)가 맞다고 설명하는 강의내용도 있습니다. (정재남님 코어js 강의)

그럼 1번 방식이나 2번 방식 중 정답은 없는걸까요? 본인에게 더 와닿는 방법을 개념으로 익히고 있으면 될까요?

다른 분들은 어떻게 생각하시나요?]]> 2022-01-05 02:19:52 UTC https://padlet.com/kzh4295/Bookmarks/wish/1975500815 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1975504764 * 옵셔널 체이닝연산자(?.) vs null병합 연산자(??)
공통: 좌항의 피연산자가 null 또는 undefined경우,
- ?. : undefined반환하고 그렇지 않으면 우항의 프로퍼티 참조 , &&와 비교
- ?? : 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환, 변수의 기본값 설정에 유용, ||와 비교

* 객체 생성방법
- 객체리터럴: {...}; ,  코드 블록과 같지 않다.
- Object 생성자 함수
- 생성자 함수
- Object.create메서드
- 클래스

*128p 프로퍼티 키 동적 생성은 다시보자 

* 134p 
10.9 ES6에서 추가된 객체 리터럴의 확장 기능
10.9.1 프로퍼티 축약 표현
- 프로퍼티의 값은 변수에 할당된 값, 즉 식별자 표현식일 수 있다.
- 프로퍼티값으로 변수를 사용하는 경우, 변수이름과 프로퍼티 키가 동일한 이름일때, 프로퍼티를 생략할 수 있다. 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.

*135p 예제 다시

* 150p 얕은 복사 깊은 복사 예제 반복해서 보기


]]> 2022-01-05 02:22:39 UTC https://padlet.com/kzh4295/Bookmarks/wish/1975504764 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1977731905 https://courses.wesbos.com/account]]> 2022-01-06 02:03:09 UTC https://padlet.com/kzh4295/Bookmarks/wish/1977731905 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1977745357 * 160~162p
- 표현식x > 리터럴x > 값x > 문
- 표현식이 함수선언문은 피연산자로 사용불가
- 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자 >> 함수 호출 불가 >> 생성된 함수 객체를 가리키는 식별자 필요

* 167p
- Function 생성자 함수로 생성한 함수는 클로저를 생성하지 않는등, 선언문, 표현식으로 생성한 함수와 다르게 동작

* 171p 인수개수 확인
- arguments 객체
- 인수가 전달되지 않는 경우, 단축평가를 이용 매개변수 기본값 할당 가능
- ES6 매개변수 기본값 사용하면, 함수내 인수 체크 및 초기화 간소화 가능(26.5절 매개변수 기본값 보고 다시 봐야지)

*175p, 176p 다시

* 178p
즉시실행함수와 그룹연산자

]]> 2022-01-06 02:13:45 UTC https://padlet.com/kzh4295/Bookmarks/wish/1977745357 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1977747002 2022-01-06 02:15:03 UTC https://padlet.com/kzh4295/Bookmarks/wish/1977747002 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1979836700 * 184p 콜백함수
- 반복하는 일은 변하지 않고 공통으로 수행하지만, 반복하면서 하는 일의 내용은 다르다
- 함수의 일부만이 다르기에 매번 함수를 새롭게 정의해야한다.
- 함수를 합성하는 것으로 해결한다.
- 함수의 변하지 않는 공통로직은 미리 정의해두고, 경우에 따라 변경 되는 로직은 추상화해서 함수 외부에서 함수 내부로 전달하는 것이다.
- 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수 

* 198p
var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역스코프로 인정

*203p 전역객체
- 코드 실행 전 단계에서 JS엔진에 의해 어떤 객체보다 먼저 생성되는 특수 객체
- 클라이언드 사이드: window, 서버사이드: global
- 프로퍼티: 표준 빌트인 객체, 호스트객체, var키워드 선언한 전역변수와 전역함수

*206p 모듈패턴 다시 

*210p 
- 변수 호이스팅에 의해 var키워드로 선언된 변수는 변수 선언문 이전에 참조가능(단, 할당문 이전에 변수를 참조하면 언제나 undefined반환)]]> 2022-01-07 02:14:54 UTC https://padlet.com/kzh4295/Bookmarks/wish/1979836700 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1982900324 *213p
일시적 사각지대(TDZ): 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간
선언단계/TDZ/초기화단계/할당단계

*214p 
- 모든 선언은 호이스팅한다.
단, class, let, const를 사용한 선언문은 호이시팅이 발생하지 않는 것처럼 동작한다.

* 215p
- let 키워드로 선언한 전역변수는 전역객체의 프로퍼티가 아니다. 
- let x =1 ;
console.log(window.x); //undefined

* 220~227p
- JS는 내부슬롯과 내부메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는다.
- 모든 객체는 [[Prototype]]이라는 내부 슬롯dms __proto__를 통해 간접적으로 접근 할 수 있다.
- [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]
-Object.getOwnPropertyDescriptor, 
- 데이터 프로퍼티와 접근자 프로퍼티([[Get]], [[Set]]), [[Value]]x
- 일반 객체의 __proto__는 접근자 프로퍼티
- 함수 객체의 __proto__는 데이터 프로퍼티
-Object.defineProperty vs Object.defineProperties

*229p 객체 변경방지 표 다시

*237p this
객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조변수

*238p 생성자 함수의 인스턴스 생성과정
- 암묵적으로 빈 객체 생성 및 this에 바인딩 
- 인스턴스 초기화
- this 암묵적 반환 / 
예외 - 명시적으로 객체를 반환하면 암묵적인 this반환 무시
- 명시적으로 원시값을 반환하면 원시값 반환무시되고 암묵적 this 반환]]> 2022-01-10 02:21:26 UTC https://padlet.com/kzh4295/Bookmarks/wish/1982900324 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1985100355 *243p
- 함수객체는 callable이면서 constructor(함수선언문, 함수표현식, 클래스) 혹은 non-constructor(메서드, 화살표함수)이다.
- 모든 함수 객체는 호출 할 수 있지만, 모든 함수 객체를 생성자 함수로서 호출할 수 있는 것은 아니다.

*246~247p 다시

* 250~258p 함수 객체의 프로퍼티
- arguments 프로퍼티
- caller 프로퍼티
- length 프로퍼티
- name 프로퍼티
- __proto__접근자 프로퍼티
- prototype 프로퍼티

*267p 
- __proto__접근자 프로퍼티는 객체가 직접 소유하는 프로퍼티가 아니라, object.prototype의 프로퍼티이다.
- 모든 객체는 상속을 통해 Object.prototype.__proto__ 사용 가능
const person={name:'lee'};
console.log(person.hasOwnProperty('__proto__')) //false
console.log(Object.getOwnPropertyDescriptor(Object.prototype,'__proto__'));
- Object.prototype : 모든 객체는 프로토타입의 계층구조인 프로토타입 체인에 묶여있다. 프로토타입 체인의 최상위객체는 object.prototype이며, 이 객체의 프로퍼티와 메서드는 모든 객체에 상속된다.

*270p 
__proto__접근자프로퍼티(모든객체) vs prototype프로퍼티(생성자함수)]]> 2022-01-11 02:25:48 UTC https://padlet.com/kzh4295/Bookmarks/wish/1985100355 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1987441917 * 272~275
- console.log(me.constructor === Person) //true
- console.log(obj.constructor === Object) //true
- console.log(foo.constructor === Function) //true

* 276
- 프로토타입은 생성자함수가 생성되는 시점에 더불어 생성
- 프로토타입과 생성자 함수는 쌍으로 존재

* 280~288
소제목만 다시

*288 오버로딩vs 오버라이딩 vs 프로퍼티 섀도잉 

*296 instanceof 연산자
- 객체 instanceof 생성자 함수
 - prototype에 바인딩 된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하면 true, 그렇지 않으면 false


]]> 2022-01-12 04:05:37 UTC https://padlet.com/kzh4295/Bookmarks/wish/1987441917 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1989442336 *303p 정적 프로퍼티/메서드
- 생성자 함수로 인스턴스를 생성하지 않아도 참조/호출 할 수 있는 프로퍼티/메서드
- 생성자 함수 객체가 소유한 프로퍼티/메서드
- 생성자 함수가 생성한 인스턴스로 참조/호출 불가
- 프로토타입 메서드 vs  정적 메서드

*306~312p
- in == Reflect.has(ES6) ==hasOwnProperty(고유)
- for ... in > Object.keys(키)/values(값)/entries(키, 값의 쌍)
 > (배열)for, for...of, forEach

* JS 객체의 분류
- 표준빌트인 객체 : ECMA, 실행환경무관, 전역변수처럼 사용 가능
- 호스트 객체 : 실행환경(브라우저, 노드)에서 추가 제공
- 사용자 정의 객체 : 사용자가 직접 정의한 객체

]]> 2022-01-13 02:18:17 UTC https://padlet.com/kzh4295/Bookmarks/wish/1989442336 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1991525606 *337p
- 인코딩 : URI의 문자들을 이스케이프 처리하는 것
- 이스케이프 처리 : 네트워크를 통해 정보를 공유할 때, 어떤 시스템에서도 읽을 수 있는 아스키 문자셋으로 변환 하는 것

*339p
- encodeURIComponent(쿼리 스트링 구분자까지 인코딩)
 vs encodeURI함수(쿼리 스트링 구분자까지는 인코딩x)
- 암묵적 전역: 호이스팅x, window프로퍼티로 삭제 가능

*343p 
- this 바인딩(this와 this가 가리킬 객체를 바인딩)은 함수 호출 방식에 의해 동적으로 결정
- 일반함수로 호출:  모든 함수(중첩, 콜백함수 포함) 내부의 this는 전역객체가 바인딩
- 메서드호출 : 메서드를 호출(소유객체x)한 객체에 바인딩
- 생성자 함수호출: 생성자 함수 내부의 this에는 생성자함수가 (미래에) 생성할 인스턴스가 바인딩된다.
new연산자와 함께 호출하지 않으면 일반함수로 동작
- Function.prototype은 메서드에 첫번째 인수로 전달할 객체
- Function.prototype.apply(array) : 호출 요
- Function.prototype.call(list) : 호출 요
- Function.prototype.bind : 호출 불요

*360p
소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르다.
- 전역코드(전역 실행컨텍스트)
: 전역변수, 전역 함수를 전역객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역객체와 연결되어야한다.
- 함수코드(함수 실행컨텍스트)
: 지역변수, 매개변수, arguments 객체를 관리해야함
- eval코드(eval 실행컨텍스트)
: strict mode에서 자신 만의 독자 스코프 생성
- 모듈코드(모듈 실행컨텍스트)
: 모듈별로 독자적인 모듈스코프 생성



]]> 2022-01-14 02:17:57 UTC https://padlet.com/kzh4295/Bookmarks/wish/1991525606 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1994923292 *366p 렉시컬 환경
- 식별자와 식별자에 바인딩된 값, 그리고 상위스코프에 대한 참조를 기록하는 자료구조로 실행컨텍스트를 구성하는 컴포넌트
- 스코프와 식별자를 관리하는 저장소 역할로 렉시컬 스코프의 실체(cf, 실행컨텍스트 스택은 코드의 실행순서를 관리)
-EnvironmentRecord(식별자와 식별자에 바인딩 된 값을 관리하는 저장소)와 OuterLexicalEnvironmentReference(상위스코프를 가리키며, 단방향링크드리스트인 스코프 구성)로 구성

*369p(전역) vs 376p(함수) vs 387p(블록)


]]> 2022-01-17 02:11:31 UTC https://padlet.com/kzh4295/Bookmarks/wish/1994923292 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1996866587 * 클로저
- 외부함수보다 중첩함수가 더 오래 유지되는 경우, 중첩함수는 이미 생명주기가 종료한 외부 함수의 변수를 참조 가능
- JSdml 모든 함수는 상위스코프를 기억하므로 이론적으로 모든 함수는 클로저다. 하지만 모든 함수를 클로저라고 하지 않는다.
- 상태를 안전하게 변경하고 유지하게 하고자 사용
- 특정 함수에게만 상태변경을 허용


]]> 2022-01-18 02:06:21 UTC https://padlet.com/kzh4295/Bookmarks/wish/1996866587 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/1999350239 *420p 클래스와 생성자 함수의 정의방식 비교

*431p 프로토타입 메서드 vs 정적 메서드

*443p 클래스 필드

*447p 다시]]> 2022-01-19 02:14:33 UTC https://padlet.com/kzh4295/Bookmarks/wish/1999350239 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/2007794039 - 511p 스택 vs 514 큐

- 514p shift vs 513p unshift 

- 524 531 532 535 예제 다시]]> 2022-01-24 02:13:30 UTC https://padlet.com/kzh4295/Bookmarks/wish/2007794039 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/2010136722 2022-01-25 02:06:15 UTC https://padlet.com/kzh4295/Bookmarks/wish/2010136722 kzh4295 https://padlet.com/kzh4295/Bookmarks/wish/2010138045 * 배열 고차함수 요소들 공통점 차이점 분류

* Math vs Number 차이 비교하며 보기]]> 2022-01-25 02:07:28 UTC https://padlet.com/kzh4295/Bookmarks/wish/2010138045