Achievement Goals
- 변수, 조건문, 타입, 함수에 대한 개념을 이해할 수 있다.
- truthy, falsy의 개념을 이해할 수 있다.
- == 및 != 를 사용하지 말아야하는 이유에 대해 이해할 수 있다.
- 타입을 섞지 말아야 하는 이유에 대해 알 수 있다.
- 논리 연산에 대해 이해할 수 있다.
- function을 통해 값이 어떠한 형태로 전달되는 지 이해할 수 있다.(arguments와 parameter의 차이)
- Dev Tools를 이용해 JavaScript의 입/출력을 확인할 수 있다.
- 문법 에러를 최소화하고 에러가 났을 때 발견할 수 있다.
- 알고리즘을 일반적인 언어로 표현하고, 그것을 코드로 옮길 수 있다.
- 모르는 것이 나왔을 때 어떻게 검색하고, 어떻게 질문해야 하는지 알 수 있다.
개발자 도구
Firefox 창 내부에서 우클릭, 요소 검사를 클릭하면 html source, console, debugger 등을 확인할 수 있다. debugger에 .js source 파일을 열고 중단점을 찍어 새로고침을 해 디버깅을 할 수 있고 조사식을 통해 내부 변수가 어떻게 변화하는지 확인할 수 있다.
변수
let var1; // var1 === undefined
let var2 = 10;
let var3;
var3 = 15;
// let var1; // ERROR!
const var4 = 5;
// var4 = 10; //ERROR!
var3 = var3 + var4 // var3 === 20- 변수를 선언할 때는
=연산자를 사용하는데 이는 '같다'의 의미가 아니라 '할당'의 의미이다. - 할당이 없다면 변수는
undefined의 값을 가진다. - 이미 선언한 변수의 이름으로 다시 선언할 수 없다.
const로 선언한 변수는 초기 할당 후 값을 다시 할당할 수 없다.- 변수에 값을 할당할 때
expression을 이용할 수 있다.
타입
| name | type | value |
|---|---|---|
| pi | 숫자 'number' | 3.141592 |
| name | 문자열 'string' | Steve |
| isAdult | 불리언 'boolean' | true/false |
| fruits | 배열 'object' | ['banana', 'apple', 'pineapple'] |
| steve | 객체 'object' | {name: 'Steve', age: 30, isAdult: true} |
| var | undefined | undefined |
| var | null | null |
| var | NaN | NaN |
| func | 함수 'function' | function(param) {return 0;} |
- 배열은 객체 타입이다. 배열인지 확인하기 위해선
Array.isArray(arr)함수를 사용해야 한다. undefined도 타입이다.- 함수도 타입이다.
조건문
조건문은 어떠한 조건을 판별하고 그 결과에 따라 실행 여부를 결정한다.
if (boolean) {
statement
}| Operator | Types |
|---|---|
| 비교 연산자 | ===, !==, <, <=, >, >= |
| 논리 연산자 | &&, ||, ! |
💡 ==, != 연산자는 사용하면 안된다! 참고자료
boolean이 아닌 값이 들어가면 true/false로 변환한다. 이 때 true로 판별하는 값은 truthy 하다고 보고 false로 판별하는 값은 falsy 하다고 본다.
| Evaluation | Description |
|---|---|
| truthy | 0을 제외한 모든 숫자, '0', 'false', 'undefined', [], {}, function(){} |
| falsy | 0, "", null, undefined, NaN |
truthy/falsy는 if문의 조건이 되거나 그 외에 boolean 값으로 변환되어야할 필요가 있을 때만 true와 false로 변환된다. true와 false 값이 아니다.
💡 NaN은 자신하고도 같지 않다. isNaN() 함수를 이용해 비교할 수 있다.
let n = NaN; NaN === NaN; // false isNaN(n); // true
함수
함수를 선언하기 위해선 다음 세 가지를 정의해야 한다.
- 함수 이름
- 함수의 매개변수 목록
- 중괄호 안에 위치하는 자바스크립트 표현 집합
function foo(param) {
console.log('Hello, world!');
// return param * param;
}자바스크립트 표현에서 return의 여부에 따라 반환값이 결정된다. return이 없으면 void 연산자를 통해 undefined가 반환된다. 함수의 반환값은 함수가 호출된 장소로 전달된다.
함수를 호출하기 위해선 다음 두 가지가 필요하다.
- 함수 이름
- 함수에 전달할 인자
foo(10)함수를 선언할 때는 매개변수(parameter), 호출할 때는 인자(argument)라고 부른다.
알고리즘
알고리즘은 문제를 해결하기 위한 절차를 만들어 내는 과정 혹은 형태이다.
알고리즘 문제를 풀면서 큰 문제는 작게 분할하고, 절차를 추론하며, 반복되는 패턴을 찾는 일련의 과정을 학습할 수 있다. 문제를 풀기 전 프로그램의 절차를 일반적인 언어로 작성하는 의사코드(pseudocode)를 작성할 수 있다. 실행할 수 있는 코드는 아니지만, 코드를 작성하기 전에 어떻게 프로그램이 작동하는지 흐름을 파악할 수 있다.
디버깅
코드를 작성하고 나서 결과를 분석할 때 의도하지 않은 결과가 나왔을 경우, 단서 확보와 단서에 대한 분석이 필요하다. 문법 에러의 경우 편집기가 알려주거나 에러 메시지에서 확인 가능하지만, 로직 에러일 경우 문제가 발생했을 것이라고 의심되는 부분을 선정하고 가설이 맞는지 틀린지 실험을 해야 한다. 이 때, 가설은 겹치면 안 되고 독립적이어야 한다.
유용한 테스트 방법은 경우의 수를 정리하고, 경우의 수에 대해 기대값과 실제값을 비교하는 것이다. 이러한 방법을 유닛 테스트라고 부르고, 이러한 개발 방법론을 테스트 주도 개발이라고 부른다.
