JavaScript Koans (1) : 연산자와 변수, 호이스팅

---

Part 2 : Types

 

✅ 강한 연산자 === 과 느슨한 연산자 ==

==는 실행 중 타입 변환(type coercion)이 일어나기 때문에 2 == ’2’가 ture라는 결과를 내놓는다. 다소 복잡하고 명확한 규칙이 존재하지 않아 프로그램의 작동을 예측하기 어렵게 만드는 것. 때문에 앞으로 엄격한 동치 연산(strict equality)인 === 사용을 권고한다.

 

 

✅ Addition (+) 더하기 연산자 참고

숫자 피연산자의 합을 구하거나, 문자열을 서로 연결한다.

// number + number -> 덧셈
1 + 1 // 2

// string + string -> 문자열 연결
'1' + '1' // 11, string

// number + string -> string으로 타입 변환
1 + '1' // 11, string

// number + boolean -> 덧셈
1 + true // 2, true는 1로 변환
1 + false // 1, false는 0으로 변환

// string + boolean -> string으로 타입 변환
'1' + true // 1true, string
'0' + false // false. string

// boolean + boolean -> number로 타입 변환
true + false // 1, true는 1, false는 0

 

✅ Subtraction (-) 빼기 연산자 참고

두 연산자의 차이를 구한다.

// number - number -> 뺄셈
10 - 1 // 9

// boolean - boolean -> number로 타입 변환
true - false // 0, true는 1, false는 0

단, 더하기 연산자와 다르게 string의 타입 변환이 일어나지 않는다. 즉, string type으로 숫자가 들어가면 숫자 빼기를, 문자가 들어가면 연산이 되지 않음(NaN).

// number가 들어간 string type
'10' - 1 // 9
10 - '1' // 9
'10' - '1' // 9

// string이 들어간 string type
'string' - 1 // NaN
10 - 'string' // NaN
'string' - 'string2' // NaN

 

✅ JS의 별난(quirky) 부분들 참고

 

 

---

Part 3. LetConst

💟 JS에서 사용하는 변수 키워드

var v = 'variable'
let l = 'letKeyword'
const i = 3.14

// 이 중 let과 const는 ES6에서 추가된 키워드이다.

 

💟 var

• 변수 중복 선언이 가능하여, 예기치 못한 값을 반환할 수 있다.
• 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
• 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

 

💟 let

• 변수의 중복 선언이 불가능하다.
• 하지만 변수의 재할당은 가능하다.

let myName = 'Alex';
// let myName = 'James' -> 불가
myName = 'James' // -> 가능

console.log(myName) // 'James'

 

💟 const

• 변수의 중복 선언이 불가능하다.
• 변수의 재할당도 불가능하다.

const constNum = 0;
// const constNum = 1; -> 불가능
// constNum = 'impossible' ; -> 불가능

console.log(constNum) // 0

하지만 const로 선언된 배열에 새로운 요소를 추가/삭제할 수는 있다.

const arr = [];
const toBePushed = 42;
arr.push(toBePushed);
expect(arr[0]).to.equal(42);

// 여전히 재할당은 금지됩니다.
// arr = [1, 2, 3];

또한 const로 선언된 객체에 속성을 추가/삭제할 수는 있다.

const obj = { x: 1 };
obj.x // {1};

delete obj.x;
obj.x // undefined

// 여전히 재할당은 금지됩니다.
// obj = { x: 123 };

obj.occupation = 'SW Engineer';
obj['occupation'] // 'SW Engineer'

 

💟 더 자세히 알아보기

• 구글 스타일 가이드
• var, let, const의 차이와 호이스팅 설명

 

 

---

Part 4. Scope

✅ 호이스팅(Hoistiong)

변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징을 호이스팅(hoisting)이라 한다.

let funcExpressed = 'to be a function';

console.log(typeof funcDeclared) // function
console.log(typeof funcExpressed) // string

function funcDeclared() { // 함수 선언식
	return 'this is a function declaration';
};
funcExpressed = function () { // 함수 표현식
return 'this is a function expression';
};

console.log(typeof funcDeclared) // function
console.log(typeof funcExpressed) // function

위에서 console.log(typeof)는 왜 다른 결과가 나올까?

함수 선언식은 런타임 이전 JS 엔진에서 먼저 실행이 되어, 함수 자체를 호이스팅 시킬 수 있다. 하지만 함수 표현식은 해당 함수가 실행될 때 선언되기 때문에, 실행 전 확인한 typeof는 전역변수 funcExpressed의 값이 나오는 것.