[JavaScript]Koans
코드스테이츠 Js-Koans 정리
💡 동치연산자
- 느슨한비교
==를 알아 보자
==는 비슷한것 같으면 true 값을 줘버린다.
1 == '1' // true
'' == 0 // true
[] == '' // true ·····- 엄격한비교
===는 어떤가
확실하게 비교한다, 이를통해 반드시 엄격한비교를 사용해야 함을 알수있다.
1 === '1' // false
'' === 0 // false
[] === '' // false ·····💡 Const를 쓰자
var vs let vs const
JavaScript 의 변수는 선언 -> 초기화 -> 할당 을거쳐서 변수를 생성한다.
var 는 변수 생성단계를 무시한다.
선언없이도 사용가능, 재선언·재할당 가능, 값이 중복이되도 error가 발생하지 않음, 호이스팅이 발생, 블록스코프를 무시, 등 문제가 많다. 사용하지 않는것을 권장한다. 여러문제로 let 과 const 가 등장했다.
✔ let과 const 차이
let 은 재할당이 가능,선언 먼저하고 나중에 할당해도된다.
let user = 'Park';
user = 'men'; // 재할당 가능
let name; // undefined <- 언제든 할당이 가능한 상태로 초기화 되었다.const는 재선언,할당 불가하고 선언,할당을 동시 설정해야한다.
const num = 3;
num = 5; // TypeError
const age; // Uncaught SyntaxError: Missing initializer in const declaration
// const는 선언 할당을 동시에 하지않으면 에러 발생한다.변수는 재할당 할일이 많이 없기 때문에 안전한 const를 사용하고,
재할당이 필요한경우 한시적으로 let 으로 변경하거나 사용하면된다.
💡 호이스팅
- JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미
- var로 선언한 변수의 경우 undefined로 변수를 초기화한다.
- 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다, 즉 호이스팅이 되지않음 (엄밀히는 발생하지않는것처럼 보인다.)
- var은 선언과 초기화가 동시에 이루어진다. 미리 주소가 생성되어 할당 되기전 접근이 가능하다.
함수에서도 호이스팅이 발생한다.
선언식이 호이스팅이 일어나고, 표현식은 호이스팅 호이스팅이 일어나지 않아(엄밀히는 일어나지 않는것처럼 보인다.) 표현식을 더 선호한다.
함수표현식
const add = function (x, y) {
return x + y
}
add(5,10); // 15💡 객체의 얕은복사,깊은복사
객체의 일반복사
copy 변수에 user 값을 할당하여 같은 주소를 참조하고, 어느한쪽의 값이 변경되면 원본도 변경
const user = {name:'park', age:21, live:'seoul'};
const copy = user;
copy.age = 26;
console.log(copy); // {name: 'park', age: 26, live: 'seoul'}
console.log(user); // {name: 'park', age: 26, live: 'seoul'}깊은복사 다른 데이터 다른주소.
깊은 복사를 하려면 객체 내부에까지 ... 연산자를 활용하여 복사해야한다.
const user = {a:1, b:{c:5,d:8}};
const copy = {...user,b:{...user.b}};
user.b.c = 10;
console.log(user); // {a:1, b:{c:10,d:8}};
console.log(copy); // {a:1, b:{c:5,d:8}};얕은복사 객체내부 값에서부터는 같은주소를 참조한다. Object.assign 메소드사용
객체 안의 첫번째 요소 다음 단계부터는 같은 주소를 참조한다.
const foo = {a:1, b:{a2:1, b2:2}};
const hoo = Object.assign({},foo);
foo.a = 10; // {a:10, b:{a2:1, b2:2}}
hoo // {a:1, b:{a2:1, b2:2}}
//객체안의 a는 다른주소를 사용한다, b는 같은주소를 참조하여 하나만 바꿔도 변경된다.
foo.b.a2 = 100; // {a:10, b:{a2:100, b2:2}}
hoo // {a:1, b:{a2:100, b2:2}}💡 this
console.log(this); // Windowthis는 기본값으로는 window 이다.
💡 lexical scope와 closure
함수의 상위 스코프를 결정할때 함수를 어디서 호출했는가? 동적스코프,
함수를 어디서 선언했는가? 렉시컬 스코프 lexical scope 이다.
let x = 1;
function first() {
let x = 10;
second();
}
function second() {
console.log(x);
}
first(); // 1
second();// 1 closure 는 어휘적(lexical) 환경의 조합으로 내부에서 외부 함수의 변수에게 접근할때 생성된다.
💡 객체의단축 (shorthand)
코드를 보며 이해하자
const name = '김코딩';
const age = 28;
const person = { name, age, level: 'Junior',}
console.log(person); // {name: '김코딩', age: 28, level: 'Junior'}각각 선언을 해줬으나 person에 하나의 객체로 할당하여 출력하였다.
💡 구조분해할당
코드를 보며 이해하자
배열분해
const array = ['code', 'states', 'im', 'course']
const [start, ...rest] = array
console.log(start); // 'code'
console.log(rest); // ['states', 'im', 'course']객체분해
const student = { name: '최초보', major: '물리학과' }
const { name, ...args } = student
console.log(name); // '최초보'
console.log(ars); // {major: '물리학과'}