티스토리 뷰
1) 자바스크립트 기초
- 자바스크립트 버전은 ECMAScript (이크마스크립트라고 읽음) 버전에 따라 결정되며 2018년 기준 표준은 ES6
- 변수 선언: var, let, const (let랑 const는 ES6에 와서 추가됐다)
> const는 한번 할당한 값에 재할당할 수 없음
- 연산자: if문 사용을 줄일 수 있는 테크닉들
const name = "aaa";
const myname = name || "default"; // 참고: JS에서 false인 것 = null, undefined, 공백문자 등
const data = 123;
const result = (data > 100) ? "ok" : "fail";
> JS에서는 비교연산자 == 대신 ===를 많이 사용함.
그냥 ==는 타입을 지멋대로 바꿔버리기 때문에... ===는 타입까지 같아야 같다고 판정함.
ex) 0 == "0"; -> true가 나옴. 타입은 다르지만 둘다 0이니 같다고 본다...
- JS에서 타입은 선언할 때가 아니라 실행타임에 결정됨
typeof(), toString.call() 을 이용해 타입을 확인할 수 있다.
2) 비교, 반복, 문자열
if-else, for, switch 등은 다른 프로그래밍 언어들이랑 유사
for (var i=0; i<arr.length; i++) // 흔히 이렇게 코딩 많이 하는데 for문 돌때마다 length를 체크하게 됨
for (var i=0, len=arr.length; i<len; i++) // 이게 더 빠르다고 한다.
forEach, for-of 같은 것도 있다.
- JS에서 문자랑 문자열은 구분하지 않음. 한글자라도 문자열로 취급.
- 문자열 메서드들: split(), replace(), trim() 등...
3) 함수
- JS 함수는 function으로 선언
- JS에서 함수는 파라미터 수랑 인자 수가 일치하지 않아도 오류가 나지 않고, 파라미터 수만큼 인자가 충분히 들어오지 않으면 나머지에는 undefined가 들어감. 인자 수가 더 많을 경우엔 앞에서부터 넣고 나머진 무시.
- 함수 표현식
function test(){
var printName = function(){ // 변수에 넣는 함수? 이렇게 만드는걸 함수 표현식이라 함.
return 'inner_function';
}
console.log(printName()); // 변수 이름으로 호출하면 됨.
}
> 함수 표현식은 함수 정의가 먼저 나오고 뒤에 호출을 해야 하지만, 함수 선언문 (일반적인 함수 정의 방식) 으로 만들면 정의가 뒤에 있어도 됨.
> 함수 선언문도 함수 안에 (inner function) 넣을 수 있다
- 호이스팅 (hoisting)
JS에서 함수는 실행되기 전에 함수 안에 필요한 변수값들을 미리 다 모아서 선언하는데 이를 hoisting이라 함.
function test(){
console.log(printName());
var printName = function(){
return 'inner_function';
}
}
아까 그 코드에서 자리를 바꾼건데, printName도 변수이므로 test() 가 시작될 때 미리 선언은 됨.
근데 아직 값이 할당되지 않았기 때문에 undefined가 뜸. JS에서 선언은 됐는데 값이 할당되지 않은 경우 뜨는게 undefined이다.
- 함수의 리턴값
JS에서 함수는 무조건 값을 리턴해야 하며, 리턴값을 정의해주지 않았을 경우 undefined가 리턴됨.
void 타입은 JS에 없음.
- 특별한 지역변수 arguments
함수가 실행되면 그 안에 arguments라는 특별한 지역변수가 생성됨.
말 그대로 받은 인자들의 리스트를 가지고 있다. (파라미터 수를 초과하는 경우에도 온전히 받음)
Array-like지만 실제로 Array는 아니기 때문에 Array 함수를 사용할 수는 없음. 그래도 .length나 []를 사용한 접근은 가능하다.
function test(){
if (arguments.length<3) return;
console.log(arguments[1]); // 2 출력
test(1, 2, "abc");
- Arrow Function
파이썬의 lambda 함수랑 비슷한 느낌으로 간단하게 한줄로 함수를 표현할 수 있음.
function getName(name){
return "Park " + name;
}
var getName = (name) => "Park " + name; // 위의 함수 선언문과 같은 것임
4) 함수 호출스택
함수의 실행이 끝나고 return이 실행되면 메모리 공간에서 사라진다. 딱히 JS라고 특별한건 없고 아는 내용.
> breakpoint, debugger 기능 이용하여 호출스택 확인해보기
> 브라우저마다 Maximum call stack size가 설정되어 있음