JavaScript Koans:
Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미.
JavaScript Koans는 부트캠프에서 하게 된 자바스크립트를 전체적으로 공부하고 되돌아보며 문제를 푸는 시스템.
expect 함수
expect(테스트하는값).기대하는조건
expect('1' + '2').to.equal('12')
expect('a' === 'a')to.be.true
// 기대하는 조건 = matcher
// 다양한 matcher가 존재함.deep.equal 과 .equal
.deep.equal은 배열의 요소나 객체의 속성이 서로 같은지 확인하는 matcher.
암묵적 타입 변환
자바스크립트는 '+'나 '-' 연산자 사이에 타입이 다른 값들을 넣으면 암묵적으로 타입을 변환.
숫자 + 문자열 = 문자열
console.log(1 + "5"); // "15"(숫자가 문자열로 변해 뒤의 문자열이 concat된다.)
숫자 - 문자열 = 숫자
console.log(141 - "1"); // 140숫자 + 불리언 = 숫자
console.log(0 + true); // 1
console.log(0 + false); // 0(true는 숫자의 맥락에서 1, false는 0으로 평가)
문자열 + 불리언 = 문자열
console.log("0" + true); // "0true"
console.log("1" + false); // "1false"(불리언값이 문자열로 concat된다.)
호이스팅
변수 호이스팅
console.log(score); // undefined
var score호이스팅의 대상:
var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
간단한 예시 (var 변수 vs let/const 변수)
console.log("hello");
var myname = "HEEE"; // var 변수
let myname2 = "HEEE2"; // let 변수 /** --- JS Parser 내부의 호이스팅(Hoisting)의 결과 - 위와 동일 --- */
var myname; // [Hoisting] "선언"
console.log("hello");
myname = "HEEE"; // "할당"
let myname2 = "HEEE2"; // [Hoisting] 발생 X간단한 예시 (함수선언문 vs 함수표현식)
foo();
foo2();
function foo() { // 함수선언문
console.log("hello");
}
var foo2 = function() { // 함수표현식
console.log("hello2");
}/** --- JS Parser 내부의 호이스팅(Hoisting)의 결과 - 위와 동일 --- */
var foo2; // [Hoisting] 함수표현식의 변수값 "선언"
function foo() { // [Hoisting] 함수선언문
console.log("hello");
}
foo();
foo2(); // ERROR!!
foo2 = function() {
console.log("hello2");
}호이스팅은 함수선언문과 함수표현식에서 서로 다르게 동작하기 때문에 주의해야 한다.
변수에 할당된 함수표현식은 끌어 올려지지 않기 때문에 이때는 변수의 스코프 규칙을 그대로 따른다.
함수선언문과 함수표현식에서의 호이스팅
함수선언문에서의 호이스팅
함수선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.
/* 정상 출력 */
function printName(firstname) { // 함수선언문
var result = inner(); // "선언 및 할당"
console.log(typeof inner); // > "function"
console.log("name is " + result); // > "name is inner value"
function inner() { // 함수선언문
return "inner value";
}
}
printName(); // 함수 호출 /** --- JS Parser 내부의 호이스팅(Hoisting)의 결과 - 위와 동일 --- */
/* 정상 출력 */
function printName(firstname) {
var result; // [Hoisting] var 변수 "선언"
function inner() { // [Hoisting] 함수선언문
return "inner value";
}
result = inner(); // "할당"
console.log(typeof inner); // > "function"
console.log("name is " + result); // > "name is inner value"
}
printName(); 해당 예제에서는 함수선언문이 아래에 있어도 printName 함수 내에서 inner를 function으로 인식하기 때문에 오류가 발생하지 않는다.
화살표 함수 사용법:
화살표 함수는 ES6에서 새롭게 도입된 방법이다. 화살표 함수는 항상 익명 함수로 정의.
// function 키워드 생략하고 화살표 붙이기
const add = (x, y) => {
return x + y;
};
// 리턴 생략 가능
const sub = (x, y) => x - y;
// 매개변수가 하나일 경우 소괄호 생략 가능
const add10 = x => x + 10;화살표 함수로 클로저 표현
// 클로저 표현 1
const adder = (x) => {
return (y) => {
return x + y;
};
};
console.log(adder(10)(20)); // 30
// 클로저 표현 2
const subtractor = (x) => (y) => {
return x - y;
};
console.log(subtractor(25)(15)); // 10Array의 slice 메소드
slice 메소드의 시작점과 끝에 같은 인덱스를 넣으면 빈 배열이 리턴.
const hamburger = ["bread", "patty", "lettuce", "tomato", "bacon"];
hamburger.slice(2, 2); // []끝 인덱스가 배열의 길이를 초과하면 배열의 끝까지만 출력.
hamburger.slice(3, 20); // ["tomato", "bacon"]시작 인덱스가 끝 인덱스보다 크면 빈 배열이 리턴.
hamburger.slice(2, 1); // []slice에 아무 인자도 넣지 않거나 0을 전달인자로 넣으면 배열 전체를 복사한 새로운 배열을 리턴. (주소값이 다름)
const hamburger2 = hamburger.slice();
console.log(hamburger2); // ["bread", "patty", "lettuce", "tomato", "bacon"]함수 호출 방식
call by value:
인자로 받은 값 그 자체를 복사하여 처리,
원시 자료형이 전달인자로 전달될 때 call by value로 처리.
call by reference:
인자로 받은 값의 주소를 참조,
참조 자료형이 전달인자로 전달될 때 call by reference로 처리.
