unit9[javascript]JavaScriptkonans 10문제

블로그 하면서 회고를 쓰고 왔다..달라진 블로그 start

* 알게 된점

? 회고

 

코드 스테이츠 페어분들과 koanRunner.html 문제를 풀기

• 01_Introduction.js

먼저 테스트를 하기 위해서는 expect 함수가 필요하다.

expect함수는 테스트하는 값과 기대값을 비교하기 위해 사용한다.

expect().to.be.true -> true가 되도록 한다.

expect().to.be.false -> false가 되도록 한다.

expect().to.equal()  -> 테스트 하는 값과 기대하는 값이 같도록 한다.

• 02_Types-part1.js

느스한 동치 연산(==)은 프로그램 작동 예측에 어렵다.

엄격한 동치 연산(===)을 이용하도록 한다.

1+'1' = "11" 문자열이 된다.

*더하기 연산자는 문자의 연결, 숫자를 더하는 기능을 한다.

123-'1' number 122 가 된다.

*뺄셈 연산자는 문자열 연결 기능이 없어서 자료형을 변환할 필요가 없다.

1+true는 1+1로 2다.

'1'+true 1true이다.

*true는 1로 false는 0으로 값이 변환한다.

• 03_LetConst.js

const 변수는 재할당이 금지다.

하지만 , 배열, 객체 속성추가 삭제 가능하다.

재할당이 필요하지 않으면 let이 아닌 const를 쓴다.

• 04_Scope.js

함수 선언식과 함수 표현식 차이 

함수 선언식은 function으로 나오지만 . 

함수 표현식은 할당해주지 않으면 에러가 나온다.

 

 funcExpressed= function () {

      return 'this is a function expression';

    };

string으로 왜 나오지 했는데 위에 let funcExpressed = 'to be a function';를 발견 못했다.

typeof funcExpressed는 string으로 나옴을 알수 있다.

 

*호이스팅이란 ? 

특정 스코프 안에서 선언된 변수는 코드에 적힌 순서 상관 없이 변수선언/함수 선언이

해당 스코프의 최상단으로 끌어올려진 것같은 현상을 말한다.

 

변수 생성 단계

1. 선언 단계 : 변수를 실행 컨텍스트의 변수 객체에 등록
2. 초기화 단계 : 등록된 변수의 메모리 확보(undefined으로 초기화)
3. 할당 단계 : 초기화된 변수에 실제 값 할당 

var선언문과 함수 선언문만 호이스팅이 일어남

 

var는 선언과 함께 undefined 초기화되어 메모리에 저장된다.(선언과 초기화 단계 동시 진행)

 

let과 const는 초기화되지 않은 상태로 선언만 메모리에 저장된다.(선언과 초기화 단계 분리되어 진행)

초기화 되지 않으면 참조 에러가 일어남 

*TDZ(Temporal Dead Zone): 스코프 시작 시점에서 초기화 시작 지점까지

 

 

함수 선언식 

함수 선언, 초기화 , 할당이 한번에 이루어진다.

함수 전체를 호이스팅함

 

함수 표현식

별도의 변수에 할당되는데 변수는 선언부와 할당부를 나누어 호이스팅

선언부만 호이스팅함

 

add가 TypeError

이걸 보면 어떤식으로 돌아가는지 알수 있음

 ? 따라서 함수 선언식은 함수 전체가 호이스팅 되므로 정상으로 해당 값이 출력이 되고

               함수  표현식은 선언부만 호이스팅되므로 에러가 나옴을 알수 있다.

찾다가 *파라미터(인자) vs argument(인수)의 차이점을 다뤄야겠다.

defaultParameter :전달인자가 없을 때 기본 값으로 할당하는 매개변수

 

클로저 : 함수와 함수가 선언된 어휘적 환경의 조합

이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 지역변수로 구성

외부함수의 변수에 접근할 수 있는 내부함수

 

팩토리 함수는 새 객체를 반환하는 함수 입니다 

 

• 05_ArrowFunction.js

화살표 함수 사용법 

 

const add = function (x, y) {

      return x + y

    }

const add = (x, y) => {

      return x + y

    }

 

이 둘의 차이점 : function이 사라지고 화살표(=>)가 붙었다.

 

페어들과 이문제를 풀때 어떻게 푸는지는 알겠으나 설명을 제대로 못함..

쉽게 보면

 

const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`을 

 

const htmlMaker = tag => {

       return textContent =>{

              return `<${tag}>${textContent}</${tag}>`

      }

}으로 바꿀수 있을 것이다.

 

htmlMaker('div')('code states')

tag에 div를 담긴채 textcontent에 code states가 들어간다고 생각할수 있다.

const liMaker = htmlMaker('li')

liMaker('1st item')

tag에 li를 담긴채 textContent가 return이 된다. textCotent는 1st item이 담겨 

그에 맞는 문자열이 return이 된다. 설명완료.. 

 

• 06_Types-part2.js

원시 자료형의 데이터 불변,저장공간 :stack

참조 자료형의 데이터 동적으로 변함,저장공간:heap

 

객체에는 length 속성이 없는지 있는지 ?

객체에는 length 속성이 없다(undefined이 나옴)

배열, 문자열에만 length 속성이 있다.

따라서 객체에 길이를 알고 싶다? -> Object.keys(obj).length 로 키값들만 뽑아내서 알수 있다.

 

.equl 과 deep.equal ? 

객체 전체가 아닌 깊은 재귀적으로 키와 값을 확인

참조 확인 대신 엄격한 내용 및 유효성 검사를 수행한다는 의미

• 07_Array.js

array와 객체의 typeof를 확인할 때 object로 나와서

배열인지 아닌지 Array.isArray() 로 통해 확인한다.

 

원본 배열을 변경하는 함수 : push , pop , shift , unshift

원본 배열을 변경하지 않은 함수 slice , concat이 있다. 

*배열 코플릿 문제를 풀다가 return하는 방법이 좀 헷갈려서 이 부분도 다시 다뤄야 될것 같다.

return arr.pop()(마지막 요소가 return됨)이 아니라 return arr로 하고

return arr.slice 그대로 해도 된다.

아니면 새로운 배열 변수 new arr를 선언하고 그대로 복사해서 return new arr;를 해도 된다.

 

 const assignedArr = arr; ///reference가 전달된다. 즉, 주소 전달

const copiedArr = arr.slice(); // arr의 값을 복사하여 새로운 배열을 retrun한다.

assignedArr === arr는 true

copiedArr === arrr는 false

 

• 08_Object.js

*this에 대해 알아봐야될것 같음 

this는 메소드를 호출하는 시점에 결정된다.

 

속성 in 객체 : 객체 안에 속성이 있는지 없는지 확인 (true와 false 반환)

const currentYear = new Date().getFullYear()

                                                   getMonth()

                                                   getDate()

//getFullYear()는 1000에서 9999년까지 반환(웹표준)

 

메소드 : 어떤 객체의 속성으로 정의된 함수

전역변수에 선언한 함수도 웹페이지에서 window 객체의 속성으로 정의된 함수 이다.

호출 방식의 의해 this에 바인딩(프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는 행위)할

어떤 객체가 동적으로 결정된다.

 

함수 호출 :내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관계없이 this는 전역객체를 바인딩

function so(){
    return this;
}
console.log(so()); // window

 

메소드 호출:메소드 내부의 this는 해당 메소드를 소유한 객체, 즉 해당 메소드를 호출한 객체에 바인딩

var ans = {
  first: 's',
  last: 'y',
  full: function () {
    return this.first + ' ' + this.last;
  },
};
 
ans.full(); //sy

생성자 호출:  객체를 생성하는 역할로 생성자 함수가 생성하는 객체로 this가 바인딩 된다.

하지만 new를 안쓰면 일반 함수 호출과 같아져서 this가 window에 바인딩된다.

function Person(name) {
  this.name = name;
}
 
var first = new Person('s');
var last = new Person('y');
 
console.log(first.name); //s
console.log(last.name); //y

이벤트 핸드러 안에서 쓴 this : 이벤트 핸드러에서 this는 이벤트를 받는 html요소를 가르킨다.

var here = document.querySelector('#btn')
here.addEventListener('click', function () {
  console.log(this); //#btn
});

명시적 바인딩을 한 this

apply 와 call는  Function object에 기본적으로 정의된 메서드로 인자를 this로 만들어주는 기능

apply()는 매개변수로 받은 첫번째 값은 함수 내부에서 사용되는 this에 바인딩 두번째 값인 배열은 자신을 호출한 함수의 인자로 사용

function dog(name, age) {
  this.name = name;
  this.age = age;
}
 
function like(name, age, hobby) {
  Character.apply(this, [name,age]);
  this.hobby = hobby;
}
 
var mal = new like('tori', 6, 'eat');
//apply 유무 비교 
function dog(name, age) {
  this.name = name;
  this.age = age;
}
 
function like(name, age, hobby) {
  dog.apply(this, [name,age]);
  this.hobby = hobby;
}
 
var mal = new like('tori', 6, 'eat');

function Character(name, level) {
  this.name = name;
  this.level = level;
}
//apply()와 call() 비교 
function like(name, age, hobby) {
  Character.call(this,name, age);
  this.hobby = hobby;
}
 
var mal = {};
Player.call(mal,'tori', 6, 'eat' );

apply()는 인수 배열로 받고 

call()는 인수 목록으로 받는다.

bind

 

화살표함수는 this가 없다.

화살표 함수에서 this는 자신을 감싼 정적 범위이다. 범위에 존재하지 않는 this를 찾을때 범위 바로 바깥에서 찾는다.

함수 안에서 this가 전역객체가 될때 쓴다.

 

repeat() 함수

 

얕은 복사(shallow copy) : 원본 객체 타입 테이터가 저장된 주소를 공유하는 복사본을 만드는 것

배열, 객체

 

깊은 복사(deep copy):원본 객체 타입 테이터 저장된 주소를 공유하지 않는 복사본을 만드는 것

배열(spread sytax) , array.cocat(),array.sclice()

객체(spread sytax) , object.assign()

 

object.assign을 통한 복사는 reference variable은 주소만 복사한다.

 

const copiedObj = Object.assign({}, obj);

delete obj.twins['Jared Leto'];에서 

copiedObj에 Jared Leto 속성이 남아있을거라고 생각했지만 제거되었다.

 copiedObj에 깊은 복사를 했지만, delete(속성을 제거하는 기능)를 하면 obj나 copiedObj가 똑같이 제거됨을 알수 있었다.

메모리를 직접 비우지 않는 대신 객체에서 속성을 제거된다.

• 09_SpreadSyntax.js

reference type을 복사하는 경우 얕은 복사(주소 공유)가 일어난다.

parameter란?  함수를 구현하는 쪽과 함수를 사용하는 쪽을 매개하는 변수

arguments란 ? 함수의 변수에 집어넣는 값

 

arguments 객체는 함수에 전달하는 인수에 해당하는 Array형태(Array가 아님)의 객체 

비슷하게 함수의 전달인자들을 다루고 모든 함수의 실행 시 자동으로 생성되는 객체

 

rest parameter는 항상 배열이다.

매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미

Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달

먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담겨 할당

 

Array.from() :유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운Array 객체

 

• 10_Destructuring.js

객체의 단축문법

객체분해도 ...b를 하면 {major:'물리학과'}가 나오는데 배열분해는 어떻게 나올지 궁금해서 배열도

출력을 해봤다.