자바스크립트 개념 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로 할당을하면 이전에 참조한 값을 더이상 참조하지 않겠다는 말이므로 메로리 공간에 가비지 콜렉션을 수행한다.

좋은 웹페이지 즐겨찾기