자바스크립트 개념 2

ES6의 주요 변화점

ES6 이전에는 전역범위와 함수 범위만 존재했다. var 키워드를 위주로 사용했다. 하지만 ES6 이후에는 let 과 const라는 키워드가 등장했고 함수 범위말고도 블록 범위 라는것이 생겼다. 기본적으로 var는 함수위주의 스코프를 가져 전역 범위가 많았는데 let 또는 const는 블록범위 (if,for,while,함수) 에서 변수를 선언할 수있다. 재선언x
ES6에서 class 를 도입하였다.

class vs prototype

prototype 은 객체간 상속을 구현하기위해 사용된다.각 인스턴스 객체는 하나의 프로토타입을 가지고있고 모든 프로토타입은 생성자 함수와 연결되어있다. prototype은 constructor 가 가지고 있고 모든 객체에는 prototype을 가지고있다. prototype은 자신의 프로토타입에 접근 또는 교체하기 위해 사용함.

let, const vs var

자바스크립트에서의 변수 키워드는 var,let,const 가 있다. 키워드마다 스코프가 다르게 작동한다.
var 은 중복 선언이 가능하지만 let 과 const는 중복선언이 불가능하다. var 은 중복 선언이 가능함으로 의도치않게 값이 변경이 될어질 수 있다.
var은 선언 단계와 초기화 단계가 한번에 진행됨. let은 선언단계와 초기화 단계가 분리되어 진행됨.
const 는 선언과 동시에 초기화를 해 줘야한다. 그렇지 않을 경우 syntacxError 가 발생함.

• ES6 에서는 var 키워드는 사용하지 않는 것이 좋음. var 는 재할당과 재선언이 가능하므로 오류가 많이 발생 할 수 있음.
• let 은 재 선언은 불가능하지만 재 할당은 가능함.
• const 는 재선언 재할당 둘다 불가능.
  일반적으로 const 위주로 사용하는 것이 좋음. 그 이유는 재할당 할 경우는 그리 많지 않기 때문..

tamplate literal

템플릿 리터럴. 자바스크립트에서 문자열을 입력하는 방식
ES6에서부터 백틱을 사용하여 문자열을 나타낼수있다.
백틱을 사용하기전에는 줄바꿈을 할때 \n 을 사용해야하는 번거러움이있지만 백틱을 사용하면 그럴 필요가 없다.
또한 ${}를 사용하여 변수를 문자열에 바로 대입할 수 있다.

화살표 함수

화살표 함수는 기본적인 함수를 좀더 간결하게 사용 할 수 있다.
한줄을 사용할때는 중괄호나 return 을 작성하지 않아도 되지만
여러줄을 사용하기 위해서는 중괄호 {}를 사용해야하고 return도 명시해줘 결과값을 반환해줘야함.

비구조화 할당

비 구조화 할당... 코드를 더욱 짧고 가독성이 좋아진다.
매개변수로 받아온 객체를 .(dot)을 사용하지않고 미리 구조분해 해준다.

default parameter, rest parameter, spread syntax, spread operator

• default parameter 은 함수에 전달된 파라미터값이 없거나 undefined일때 초기화를 설정된 값을 말한다. 파라메터에 직접 값을 입력해서 초기화 해줄수 있다. ex) function practice(a=1,b=2)...
• rest parameter 은 ...을 사용한다. 매개변수를 몇개받을지 모를때 사용하고 배열형태로 변환한다.

functon parameter(...items){
  console.log(items)
}

 === ['a','b','c']; 혀애로 배열 출력

rest 는 마지막에 사용하여 남은 매개변수를 한번에 다 받는다.
하나만사용가능 매개변수 두개 사용 못함.

• spread syntax 은 함수호출, 배열 또는 객체에서 사용될수있다.
• 함수호출 = 함수의 인자로 나눠져서 들어갈수 있다. 배열의 크기와 인자수가 일치해야함.
• 배열 = 기존에는 concat을 사용해서 배열끼리의 값을 더해줬지만 spread를 사용해서 간단하게 할수이음. 배열의 값만 복사하여 나타내고싶을때 (주소값 복사 x).
• 객체 = 객체를 복사하거나 병합할때 배열과 동일하게 사용됨.

병합할떄 뒤에있는 프로퍼티로 바뀌어짐.
const merged = {...{x:1,y:1}, ...{y:10, z:3}};

console.log(merged) = {x:1,y:10,z:3};

특정 프로퍼티 변경
const merged = {...{x:1,y:1}, y:100};

특정 프로퍼티 추가
const merged = {...{x:1,y:1}, z:100};

• spread operator

for ... of

• for ...in 객체의 key 값에 접근할 수 있지만 value 갑에 접근하는 방법은 없다.

• for ...of es6 에 추가된 반복구문이다.iterator 속성을 가지고 있어야함. (배열에서사용)

for ...in 은 객체의 키값을 이용하며 탐색할때, for ...of 는 배열을 탐색할때 사용한다고 보면됨.

원시 자료형과 참조 자료형의 차이

자바스크립트는 크게 원시타입과 객체타입으로 나뉜다.

• 원시타입 = number,string,boolean,undefined,null,symbol
• 객체타입 = function, object, array

원시타입 (primitive type)

원시타입은 한번 생성되면 변경이 불가능한 값이다. 읽기 전용 값이다.
변수가 변하는게아니고 값이 변하게된다.

let a =1; //  변수 a 값을 1로 할당하면 주소값이랑 변수랑 연ㄱ결이됨.
a=2; // a 의 값을 2로 바뀌면 같은 메모리주소에 있는 값 1이 2로 바뀌는게 아니라
//주소값이 변경되고 값도 변경이된다. (값을 변경하기위해서 주소값도 변경되어야함)

이를 Immutability 불변성 이라고 하며 원시 값을 변경하기 위해서는 재할당(주소값 변경) 하는 방법 밖에없음.
값

참조 자료형 타입 (reference type)

원시타입과는 다르게 프로퍼티의 개수는 정해져있지않고, 값이 동적으로 추가되거나 삭제되어질 수 있다.
이를 mutable 변경 가능한 값이라고 한다.
원시값이 할당된 변수의 주소를 통해 메모리에 접근하면 원시 값만을 얻을 수 있지만, 객체를 할당한 변수는 주소를 통해 참조값으로 접근 할 수 있다.
참조값은 생성된 객체가 저장된 메모리 공간의 주소 그 자체이다.
만약 객체 타입이 원시타입처럼 값이 변경할때마다 재할당을 해준다면 메모리관리에 엄청 비효율적일 것이다.
성능향상을 위해서 객체타입은 변경 가능한 값으로 설계되어있다.

참조 자료형 타입을 선언할경우 변수와 식별자의 주소와 그에 해당하는 값의 주소가 주어진다.
let a ={x:1} 을 할당할경우 a의 주소와 {x:1} 의 주소가 다르고 {x:1}는 참조 값이라고 할 수 있다.
a의 주소는 {x:1}인 참조 값을 참조한다.
let copy = a 를 하면 copy는 a의 참조값을 참조한다. a와 copy, 두개의 식별자는 하나의 참조값을 공유한다.

원시타입과 참조타입 비교

let person1 ={
 name:'kim'
}


let person2 ={
 name:'kim'
}

console.log(person1 === person2)
객체를 할당한 변수 식별자 person1 과 person2 는 참조타입이므로 서로 다른 주소 값을 가지고있다.
따라서 결론은 false 이다.

console.log(person1.name === person2.name)
person1.name 과 person2.name 은 원시값을 할당한 변수이므로 원시값 인 'kim'을 비교한다.
따라서 결론은 true 이다.

얕은 복사와 깊은 복사

얕은 복사는 한단계까지만 복사하는 것을 말하고 깊은 복사는 객체에 중첩되어있는 객체까지 모두 복사하는 것을 말한다.
예시)

const origin ={x:{y:1}};

const shallowCopy = {...origin} === 중첩되어있는 객체의 경우 참조값 복사

const deepCopy = _.cloneDeep(origin); === 원시값처럼 완전하게 복사본을 만듬.

==과 ===은 어떤 차이가 있나요?

==은 동등비교 이다. x == y 는 x와 y의 '값'이 같은지를 비교
=== 은 일치를 비교한다. x === y 는 x와 y의 '값과 타입'이 같은지를 비교한다.

ex)
5 == 5; 값이 같으므로 true
5 == '5'; 암묵적으로 타입을 변형시켜 타입일 같을떄의 값을 비교한다.
비교값은 같으므로 true
암묵적 타입변형시키고 값을 비교하기때문에 결과값을 예측하기 어려움.

이와 다르게 === 은 암묵적 타입 변형없이 좌항과 우항의 타입이 같은지와 값이 같은지를 비교한다.

자바스크립트 배열의 타입은 왜 object인가요?

원시값(number,stirng,boolean...등) 을 제외한 모든 타입은 객체이다.
원시값은 변경 불가능한 값이지만, 객체 타입의값은 변경이 가능하다. 배열또한 reference type 이고
값을 동적으로 변경할 수있기때문에 object 타입이라고 볼 수 있다.

null과 undefined의 차이에 대해서 설명하세요.

• undefined Type 는 개발자가 의도적으로 할당하기 위한 값이아니고 자바스크립트 엔진이 변수를 초기화 할때 사용하는 값이다.
  변수를 참초할때 undefiend가 나오면 변수가 선언된이후 값이 할당이 된적이없는 === 초기화 되지 않은 변수이다.
  자바스크립트 엔진이 초기화를 사용할때 undefined를 사용하는데 개발자가 의도적으로 변수에 undefined를 할당한다면 혼란을 줄수있다.
• null Type 은 변수에 값이 없다는 것으로 명시한다. null로 할당을하면 이전에 참조한 값을 더이상 참조하지 않겠다는 말이므로 메로리 공간에 가비지 콜렉션을 수행한다.