[Javascript] study 2주차 (1) - JS review (var vs let vs const, lexical scope, Object.entries, computed property name)
react-study
2주차 과제는 Javascript 심화 복습
ES6에서 핵심적인 내용들을 다시 훑어볼 수 있었다.
var vs let vs const
var: 재할당, 중복 선언 가능. scope의 영향을 받지 않음.let: 재할당 가능, 중복 선언 불가능. scope의 영향을 받음.const: 재할당, 중복 선언 불가능. scope의 영향을 받음.
var의 문제점
- 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.
- 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
- 변수 선언문 이전에 변수를 참조하면 언제나
undefined를 반환한다.
자바스크립트의 모든 코드 블록(if, for, while, try/catch 등)을 지역 스코프로 인정하는 const,let과 달리 var는 오로지 함수 코드 블록만을 지역 스코프로 인정한다.
전역 변수로 인해 재할당이 발생하거나, 전역 스코프를 공유하기 때문에 어딘가에 동일한 이름이 있다면 예상치 못한 결과를 가져올 수 있는 위험이 있기 때문에 var 대신 const와 let을 사용하는 것을 권장한다.
let, const
const로 선언한 변수는 반드시 선언과 초기화가 동시에 진행되어야 한다.
const name;
// Uncaught SyntaxError: Missing initializer in const declarationlet로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.
let name = "newsilver";
console.log(name);
// newsilver
let name = "mino";
// Uncaught SyntaxError: Identifier 'name' has already been declared
name = "Jay park";
console.log(name);
// Jay park
Lexical scope, 자바스크립트에서의 Closure 알아보기
Lexical scope
JavaScript는 Lexical Scope를 사용하며 이는, runtime에 동적으로 Scope를 정하지 않고 Compile 시점에 변수나 함수가 선언된 위치를 기준으로 Scope를 정한다.
함수와 변수의 Scope를 선언된 위치를 기준으로 정한다.
자신의 scope -> 자신을 포함하는 외부 함수 scope -> 전역 scope 순으로 변수를 찾게된다.
함수 내부에 선언된 함수는, 자신을 포함하는 외부 함수와 전역 Scope에 대한 Scope Chain을 가지고 있다.
scope chain
- 지역 범위 (Local Scope, Own scope)
- 외부 함수 범위 (Outer Functions Scope)
- 전역 범위 (Global Scope)
Closure
자신이 생성된 시점의 환경을 기억하는 함수
외부 함수 호출이 종료되었음에도 외부함수의 변수 or 인자에 접근 할 수 있는 함수
클로저를 사용하면 객체지향 프로그래밍의 정보 은닉과 캡슐화 같은 이점들을 얻을 수 있다.
✏️ 참고 링크
var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프
Method
(이미 velog에 정리했던 내용이기 때문에 다루지 않았던 메소드만 정리했다.)
Object.entries
Object.entries() 메서드는 객체의 [key, value] 쌍을 담은 배열을 반환한다.
let obj = {
name: "newsilver",
birthday: 1028
};
// [["name", "newsilver"], ["birthday", 1028]]🚨 객체는 배열과 달리 순회할 때 정의된 순서를 보장하지 않음.
순서대로 순회하고 싶다면 정렬을 한 후 순회해야 함.
Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));.
객체에 Object.entries와 Object.fromEntries를 순차적으로 적용하여 map, filter 같은 배열 전용 메서드를 사용할 수 있다.
Object.entries(obj)를 사용해 객체를 배열로 반환- 배열에 map 등의 배열 전용 메서드를 적용
Object.fromEntries(array)를 적용해 배열을 다시 객체로 반환
let obj = {
banana: 1,
orange: 2,
meat: 4,
};
let doublePrices = Object.fromEntries(
Object.entries(obj).map(([key, value]) => [key, value * 2])
);
console.log(doublePrices.meat); // 8computed property name
객체의 key값을 표현식(변수, 함수 등)을 통해 지정하는 문법이다.
프로퍼티 키로 사용할 표현식을 대괄호([ ])로 묶어준다.
프로퍼티 키를 동적으로 생성 가능하다.
ES6에서는 객체 리터럴 내부에서도 프로퍼티 키를 동적으로 생성 가능하다.
// ES6
let num = 0;
const obj = {
[`num${++num}`]: num,
[`num${++num}`]: num,
[`num${++num}`]: num
};
console.log(obj);
// {num1: 1, num2: 2, num3: 3}// 변수
let key = "name";
let obj = {
[key] : "newsilver"
}
console.log(obj);
// {name: 'newsilver'}// 함수에서도 사용 가능
function add(a, b) {
return a + b;
}
function name() {
return 'my name is';
}
let obj = {
[`key${add(5,8)}`] : 'result is 13',
[name()] : "newsilver"
}
console.log(obj);
// {key13: 'result is 13', my name is: 'newsilver'}