3장. 언어의 기초
< 프론트엔드 개발자를 위한 자바스크립트>(2013 인사이트, 한선용 옮김) 의 책을 요약한 내용으로 자바스크립트 제대로 배우기 스터디 그룹(페이스북) 의 글입니다.
3.1 문법
3.1.1 대소문자 구분
자바 스크립트는 대소문자를 구분합니다.
3.1.2 식별자
식별자란 변수나 함수, 프로퍼티, 함수 매개변수의 이름입니다.
- 첫번째 문자는 반드시 글자나 밑줄(_), 달러 기호($) 중 하나여야 합니다.
- 다른 문자에는 글자나 밑줄, 달러기호, 숫자를 자유롭게 쓸 수 있습니다.
변수명은 관습적으로 카멜케이스로 씁니다.
ex) firstSecond
3.1.3 주석
// 한줄주석
/*
* 여러줄 주석
*/
3.1.4 스트릭트 모드
ECMAScript 5 에서 도입, 안전하지 않은 동작에는 에러를 반환하도록 한다. 전체 스크립트에 적용하려면 문자 맨위에 아래와 같이 입력한다. 특정 함수위에서만 적용하려면 함수 시작 부분에 입력.
"use strict";
3.1.5 문장
문장의 끝에 세미콜론(;)을 쓰지 않아도 에러는 나지 않지만 문장의 끝에는 꼭 세미콜론(;)을 입력해주도록 합니다.
그리고 if 문에서 블럭( { .. } ) 으로 감싸주지 않아도 C언어 처럼 다음행만 처리가 되지만 에러의 원인이 될수 있으므로 한문장이라도 꼭 블럭으로 감싸주는 걸 추천 한다.
3.2 키워드와 예약어
키워드나 예약어는 상세하게 요약하지 않겠다. 예약어는 식별자나 프로퍼티 이름을 쓸수 없습니다. 상세한 내용은 프론트엔트 개발자를 위한 자바스크립트 프로그래밍/인사이트 3장을 참고 바란다.
3.3 변수
변수의 식별자는 var 이며, 특정 데이터 타입을 한정하지 않는다.
var temp = 3;
temp = "abc"; // 이처럼 여러타입을 동시에 담을수 있지만 추천하지 않음.
var 를 통해선언하면 로컬스코프로 정의 되면 함수가 끝나거나 {} 끝날경우 해당 변수는 즉시 파괴됩니다.
여려개의 변수를 동시에 선언가능합니다. var a=10,b=2,c="a"
3.4 데이터 타입
ECMAScript에는 다섯가지 데이터 타입이 있다. 이를 '원시데이터 타입'이라 부름
- Undefined
- Null
- 불리언(Boolean)
- 숫자
- 문자열
객체도 있다. 이는 이름-값 상의 순서 없는 목록이다.
3.4.1 typeof 연산자
느슨한 데이터 타입이라 typeof를 이용하여 데이터 타입을 알아내야 할 경우가 있다. 다음과 같은 리턴값을 가진다.
- "undefined" : 정의되지 않은 변수
- "boolean" : 불리언
- "String" : 문자열
- "number" : 숫자
- "object" : 함수를 제외한 객체 도는 null
- "function" : 함수
사용법 typeof 변수명 or typeof( 변수명 )
3.4.2 undefined 타입
변수를 선언하고 값을 할당 하지 않았을때 undefined라는 값이 할당 되어진다.
var aTemp;
console.log( aTemp ); // undefined 출력
console.log( aTemp == undefined ); // true
console.log( bTemp ); // error 발생
console.log( typeof aTemp ) // undefined 출력
console.log( typeof bTemp ) // undefined 출력
3.4.3 Null 타입
null 은 빈객체를 가르키는 포인터입니다. typeof를 호출하면 Object 를 반환함.
var aTemp = null;
console.log( typeof aTemp ); // object 출력
해당 변수가 특정 객체를 가르키기 위함이라면 null 객체를 명시적으로 초기화하는 것을 추천합니다.
3.4.4 불리언 타입
true, false 두가지 리터럴 값만 가집니다. Boolean( 변수 ) 함수를 이용할 수 있다. 각 변수가 가진 데이터에 따라서 true/false를 반환하게 된다. 아래 표를 참고하자.
| 데이터타입 |
true 리턴 |
false 리턴 |
| 불리언 |
true |
flase |
| 문자열 |
비어있지 않은 문자열 모두 |
""(빈문자열) |
| 숫자 |
0 이 아닌 모든 숫자, 무한대포함 |
0, Nan(Not a Number) |
| 객체 |
모든 객체 |
null |
| Undefined |
해당없음 |
undifined |
주의 // if 문에 변수명을 썻을 경우에 위 표에 의해 변환 되므로 꼭 숙지하고 넘어가도록 하자.
3.4.5 숫자 타입
가장 기본적인 리터럴은 10진수이다. ( 8진수는 0으로 시작, 16진수는 0x 로 시작, 지수 표기법도 가능 )
자바스크립트는 부동소수점이 정수로 표현이 가능하다면 정수르 저장을 한다. ( 부동소수점이 메모리를 2배 차지하기 때문)
숫자범위는 Number.MAX_VALUE, Number.MIN_VALUE 를 출력해보면 알 수 있다.
isFinite() 함수로 변수가 범위를 넘어서는지 확인 가능
var result = Number.MAX_VALUE + Number.MAX_VALUE;
console.log( ifFinite(result) ); // false 반환
NaN
Not a Number 의 약자이며, 일반 프로그래밍 언어에서 산식에서 에러나는 부분을 JavaScript에서는 NaN을 리턴한다. NaN은 어떤값과도 일치 하지 않으며 NaN 끼리도 일치하지 않는다. 따라서 isNaN() 함수를 제공함.
숫자변환
Number() 모든타입을 숫자로 변환
parseInt() 문자열을 정수로 변환
parseDouble() 문자열을 부동소수점으로 변환
3.4.6 문자열 타입
작은따옴표(')나 큰따옴표(")로 표현한다. 문자열 데이터중 유용한 문자열 리터럴은 교재 55p를 참고 바란다. (타 언어와 유사하여 생략한 이유이기도 함)
- toString() 변수의 데이터 값을 문자열로 변환해줌, 하지만 null, undefined에는 이메소드가 존재하지 않아 에러가 남.
진법 변환도 가능 toString(진법)
- String() 형변환 함수, null과 undefined 도 String으로 변경할 수 있음.
3.4.7 객체 타입
ECMAScript 에서 객체는 데이터와 기능의 집합임. new 연산자를 이용해서 생성할 수 있다.
var obj = new Object();
다음과 같은 함수 들이 있고 상세한 설명은 5장,6장에서 자세히 설명할 것입니다.
Object는 Java와 동일학 최 상위 객체이며 아래와 같음 함수 들이 존재함.
constructor, hasOwnProperty(), isPrototypeOf(), propertyIsEnumerable(), toLocaleString(), toString(), valueOf()
3.5 연산자
3.5.1 단항연산자
증감 연산자
++, -- 가 있다. 앞의 증감 연산자를 앞에 쓰는것과 뒤에 쓰는것은 큰차이가 있다. 앞에 쓸 경우(++a) 단항연산자를 먼저 수행하고 다음 수식을 실행하며, 뒤에 쓸경우(a--) 수식을 모두 수행하고 나서 단항연사자를 수행한다.
특이하게 일반적인 데이터 타입에서도 증감연산자를 사용 할 수 있다.
- 유효한 숫자의 문자열이면, 숫자로 변환후 증감수행
- 유효한 문자열이 아니라면 NaN 저장
- false 값은 0으로 변환후 증감, true는 1로 변환후 증감
- 부동소수점은 그대로 증감
- 객체에 적용하면 valueOf() 호출후 증감, 만약 결과가 NaN이라면 toString()을 호출후 문자열 규칙 다시 적용함.
단항 플러스/마이너스
증감연산자와 동일하게 적용되며, 숫자형 값의 부호를 바꾸는 용도로 사용됨. 숫자형 변환용도로 사용되기도 함.
3.5.2 비트연산자
비트연산자는 거의 사용될 일이 없으니 과감하게 생략
3.5.3 불리언 연산자
NOT, AND, OR 세가지가 존재함.
논리NOT
느낌표(!)로 표시하며 데이터 타입에 관계 없이 항상 불리언 값을 반환함
- 객체이면 false
- 빈문자열이면 true, 비어있지 않는 문자열이면 true
- 숫자 0 이라면 true, 0 이 아니라면 false
- null, NaN, undefined 라면 true
!! 두개를 연달아 쓴다면 Boolean()함수를 사용한 것과 같은 동일한 효과
논리AND
앰퍼샌드 2개(&&)로 나타낸다. 다른언어와 동일하니 연산결과는 생략하며 불리언 값이 아닐경우는 다음과 같이 반환한다.
- 첫번째 피연산자가 객체라면 항상 두번째 피연자를 반환
- 두번째 피연산자가 객체라면 첫번째 피연자를 true로 평가할 수 있을 때만 두번째 피연산자를 반환
- 두 피연산자가 모두 객체라면 두번째 피연산자를 반환
- 피연산자 둘 중 하나라도 null/NaN/undefined 이라면 null/NaN/undefined 반환
또한, 여타 다른언어들과 동일하게 첫번째 피 연산자가 false 라면 두번째 피연산자는 수행하지 않는다.
논리OR
파이프 2개(||)로 표현한다.
- 첫번째 피연산자가 객체라면 항상 첫번째 피연자를 반환
- 두번째 피연산자가 객체라면 첫번째 피연자를 false로 평가할 수 있을 때만 두번째 피연산자를 반환
- 두 피연산자가 모두 객체라면 첫번째 피연산자를 반환
- 피연산자 둘 중 하나라도 null/NaN/undefined 이라면 null/NaN/undefined 반환
논리AND아 반대로 || 연산자도 첫번째 피연산자가 true 라면 두번째 피연산자는 수행되지 않는다.
3.5.4 곱셈 관련 연산자
곱셈(*), 나눗셈(/), 나머지(%) 모두 다른 여타 언어와 동일하며 숫자형이 아닐때는 책을 참고하도록 하자.
3.5.5 덧셈 관련 연산자
덧셈(+), 뺄셈(-) 다른 언어들가 동일 하며, 예상할 수 있는 범위에서 동작함.
3.5.6 관계 연산자
- 피연산자가 숫자이며 숫자형 비교
- 모두 문자열이면 문자열에 해당하는 문자코드로 변환후 비교
- 피연산자 하나가 숫자라면 숫자로 변환후 비교
- 객체라면 valueOf() -> toString() 차례로 변환하여 성공한 값에 의해 비교
- 불리언값은 숫자로 변환 후 비교
- NaN 비교는 항상 false
3.5.7 동일연산자
값의 동일/비동일 연산자 ==,!= 와 데이터형과 값의 일치/불일치 연산자가 있다. 동일/비동일 연산자에서의 변환규칙은 다음과 같다.
변환규칙
- 불리언 값일 경우 숫자형으로 변환
- 문자열과 숫자일 경우 문자열을 숫자로 변환을 시도
- 하나가 객체이고 다른하나가 객체가 아니라면 valueOf() -> toString() 으로 변환 시도후 비교
비교규칙
- null 과 undefined는 동일하다. 둘은 결코 다른값으로 변환하지 않음
- 피연산자중 하나가 NaN이라면 false, 둘다 NaN이라도 false
- 두 피연산자 모두 객체라면 둘이 같은 객체를 가리키는지 비교함.
===, !==
다음 예제로 설명하겠다.
console.log( "55" == 55 ); // true
console.log( "55" === 55 ); // false
3.5.8 3항 연산자
var a = flag ? aType : bType; 다른 언어들과 동일하게 동작한다. true일경우 aTeyp, false 이면 bType
3.5.9 할당 연산자
변수에 값을 할당하는 연산자
3.5.10 쉼표 연산자
변수 선언과 할당을 여러문장에 사용할 때 씁니다.
var num1=2, num2=3;
3.6 문장
3.6.1 if문
단한줄의 문자이 들어가더라도 코드블럭({})을 꼭 사용하는 것을 권장합니다.
if ( a > 10 ) {
console.log( "AA" );
} else {
console.log( "BB" );
}
3.6.2 do-while 문
평가전루프문, 루프문은 최소한 1번은 실행되어집니다.
var a = 1;
do {
a++;
} while( a < 10 );
3.6.3 while 문
평가 후 루프, 조건이 false 라면 한번도 실행되지 않을 수 있음
var a = 1;
while( a < 10 ) {
a++;
}
3.6.4 for문
다른 언어들과 동일하며 예시는 다음과 같다. 가장 많이 쓰이는 제어문 중 하나
for( var i=0; i<10; ++i ) {
console.log(i);
}
3.6.5 for-in 문
엄격한 반복문이다. 객체의 프로퍼티를 나열하는데 사용함
for( var propName in window ) {
document.write( propName );
}
for-in 루프를 실행하기전 null 이나 undefined는 아닌지 확인하는 것이 안전한 코딩이 되겠다.
3.6.6 문장 레이블
lable: statement
3.6.7 break 문과 contine 문
- break 즉시 루프에서 빠져나가 루프 다음 문장을 실행
- contine 루프를 빠져나가긴 하지만 루프 실행은 계속됨
3.6.8 with 문
사용하지 않는게 좋다고 하여 생략.
3.6.9 switch 문
특징적인 것은 어떤 데이터 타입도 switch문에 사용가능 하며, 스위치 문 밖의 변수로도 판단이 가능하다. 그리고 일치연산자(===)로 값을 비교하므로 타입변환은 일어나지 않는다.
switch(i) {
case 1:
console.log("1");
break;
case 2:
console.log("2");
break;
default:
console.log("default");
}
3.7 함수
문장을 캡슐화 하여 어디서든 사용할 수 있도록 하는 문법, function 키워드를 사용한다.
function test( aParam ) {
console.log( aParam );
}
- 함수 이름에 eval이나 arguments는 사용 할 수 없습니다.
- 매개변수 이름에도 eval이나 arguments 를 쓸 수 없습니다.
- 서로 다른 매개변수에 결코 같은 이름을 쓸 수 없습니다.
3.7.1 매개변수의 이해
다른 언어의 매개변수와 사뭇다르게 동작 합니다. 매개변수의 갯수와 타입도 전혀 체크를 하지 않습니다. 이런게 가능한것은 ECMAScript의 매개변수가 내부적으로는 배열로 표현되기 때문입니다. arguments라는 객체로 매개변수 값에 접근을 할 수 있다.
arguments.length 값 으로 매개변수가 몇개가 전달되었는지 확인가능
function test(num1, num2) {
console.log( arguments.length + "개의 매개변수가 전달됨");
}
여기서 중요한점!! arguments 배열의 값을 바꾸면 매개변수명으로 접근한 값도 동일하게 바뀌게 됩니다. 이는 동일한 메모리를 참조하는 건 아니지만 단반향 반영이 되기 때문입니다.
단방향 반영이란, arguments를 통한 변경은 매개변수명(num1,num2)의 변수에도 반영이 되지만 매개변수 명을통한 변경은 arguments 배열의 값에는 반영이 되지 않습니다.
또한, 매개변수를 하나만 넘긴다면 arguments[1]의 값을 변경 하더라도 num2의 값에는 아무영향이 없습니다.
3.7.2 오버로딩 없음
arguments 배열을 이용하여 매개변수 갯수를 체크해서 구현이 가능은 함
