개요
이 글은 Javascript에 입문할 때 반드시 알아야 하는 기초 문법들을 간략하게 정리해놨습니다. 하지만 설명이 다소 콤팩트하고 배경 설명이 부족하기 때문에 정말로 아무것도 모르는 상태에서 처음 보시는 분들은 이 글이 아닌 더 잘 만들어진 메이저 자료들을 보시기를 적극 추천해드립니다.
1. 데이터 타입
1) 자바스크립트의 데이터 타입은 아주 크게 두 가지로 나눌 수 있습니다.
원시 데이터 타입 vs 참조 데이터 타입
원시 데이터 타입은 총 5가지가 있습니다.
숫자(number), 문자열(string), 논리 자료형(boolean), null, undefined
숫자는 정수, 실수 모두 포함되는 타입으로 C나 Java언어처럼 여러 개의 숫자 타입이 있지 않고 오직 하나만 사용합니다.
문자열도 마찬가지로 char가 따로 없고 문자로 되어있으면 문자열입니다. 문자열 값을 쓰려면 따옴표 안에 적어줘야 합니다.
boolean값은 true와 false가 있습니다.
null은 객체인데 비어있는 변수를 의미합니다. 변수를 선언하고 null이라는 빈 값을 할당한 경우입니다.
undefined는 변수를 선언하고 값을 할당하지 않은 경우입니다.
null과 undefined가 미묘하게 다른데 undefined은 아직 변수에 값이 할당되지 않은 상태를 나타냅니다. 반면 null은 값이 없다는 의미의 값인 null을 할당한 것을 나타냅니다.
그리고 null은 객체이기 때문에 타입을 확인하면 object로 나옵니다. (자바스크립트는 타입에 대해 특이한 면이 많습니다.) null을 object와 구분하여 알려면 다음과 같이 강타입체크 연산을 해주어야 합니다.
* null값을 판별하는 연산 예시
var nn = null;
console.log(nn === null); // true
위 코드에서는 변수가 null이면 true가 출력되고 null이 아니면 false가 출력됩니다.
다음으로 null과 undefined의 변수는 각각 어떤 식으로 만들어지는지 살펴보겠습니다.
* null 예시
var nn = null;
console.log(typeof nn); //object로 출력
* undefined 예시
var empty; // 변수에 값이 할당되지 않은 상태
console.log(typeof empty); //undefined로 출력
나머지 number, string, boolean형 값도 변수에 할당하는 모습을 한 번씩 보여드리겠습니다.
* number, string, boolean형 값을 변수에 할당하는 예시
var num = 10; // 정수
var num1 = 0.1; // 실수 모두 자바스크립트에선 number형 변수로 통일
var str = 'string';
2) 참조 데이터 타입은 객체와 같습니다.
자바스크립트에서 객체가 포함하는 범위는 객체, 배열, 함수 등을 포함합니다. 자바스크립트는 특이한 점이 많습니다. 배열과 함수도 객체에 속합니다. 자바스크립트에서 원시 데이터 타입의 변수를 제외한 모든 값은 객체입니다. 그리고 이 객체는 참조 데이터 타입입니다.
참조 데이터 타입은 해당 변수에 실제 데이터가 할당된 것이 아니라, 어떤 메모리에 저장된 데이터를 가지고 있는 가상의 변수를 참조해서 접근하는 변수를 말합니다. 이런 특성에 대해서 이해할만한 글을 쓰면 내용이 길어지므로 지금은 생략하겠습니다.
// 객체
var object = {
key1 : value1,
key2 : value2
};
// 배열
var array = [1, 2, "a"];
// 함수
function func() {};
객체의 경우 key를 프로퍼티(property)라고 부릅니다. key는 value를 담고 있는 네임이자 식별자 같은 존재입니다. value는 원시 데이터 타입이 될 수도 있고 또 다른 객체가 될 수도 있습니다. 즉 모든 타입의 값이 들어올 수 있습니다. 배열도 들어올 수 있고 함수도 들어올 수 있습니다.
2. 연산자
1) 산술 연산자
사칙연산을 하는 연산자입니다. 더하기는 +, 빼기는 -, 곱하기는 *, 나누기는 /입니다. 나눗셈의 경우 몫을 구하는 연산자는 따로 존재하지 않아서 메소드를 사용해야 합니다. 하지만 나머지를 구하는 연산자는 있습니다. 바로 % 입니다.
* 사칙연산 예시
console.log("1+1= ", 1+1);
console.log("1.2-0.95= ", 1.2-0.95);
console.log("2*3= ", 2*3);
console.log("7/3= ", 7/3);
console.log("parseInt(7/3)= ", parseInt(7/3)); //몫
console.log("7%3= ", 7%3); //나머지
2) 대입 연산자
기호는 =이고, 변수에 값을 할당하거나 참조시킬 때 사용합니다.
* 대입 연산 예시
// 변수 x에 값을 할당
var x = 'abc';
x = 'abcde';
// 변수 x가 변수 y를 참조
var y = { a: 1 };
var x = y;
3) 비교 연산자
두 개의 값이 같은지 다른지, 혹은 대소 비교를 할 때 사용됩니다.
3-1) == 연산자는 타입 변환 후 동등 비교 (느슨한 비교)
== 연산자는 두 개의 값이 동일한지를 비교하여 동일하면 true, 동일하지 않으면 false를 반환하는 연산자입니다. 자바스크립트는 느슨한 타입 체크 언어입니다. 그래서 다른 언어랑 다르게 특이한 점은 ==연산자로 서로 다른 타입의 데이터끼리도 비교 연산을 할 수 있다는 것입니다. 서로 다른 데이터 타입끼리 비교할 때에는 자바스크립트가 자동으로 두 데이터를 동일한 타입으로 바꿔서 비교합니다. 예를 들어 숫자형인 3과 문자열인 '3'을 ==연산자로 비교하면 '3'을 숫자로 바꿔서 비교를 진행합니다.
* 느슨한 타입 비교 연산 예시
console.log(3==3);
console.log(3=="3"); //둘다 true
3-2) === 연산자는 타입과 값 둘 다 비교 (엄격한 비교)
===연산자는 ==연산자와 마찬가지로 두 피연산자가 동일하면 true 아니면 false를 반환하지만 ==연산자와 다른 점은 데이터 타입을 자동으로 변환해주지 않아서 값뿐만 아니라 타입까지도 일치하는지 여부를 판단한다는 것입니다.
* 엄격한 타입 비교 연산 예시
console.log(3===3); //true
console.log(3==='3'); //false
3-3) !==와 != 연산자
이들은 ===나 ==와는 반대로 두 피연산자가 서로 다르면 true를 서로 같으면 false를 반환합니다. 마찬가지로 !==은 엄격한 비교이고 !=은 느슨한 비교입니다. 위에서 ===와 ==를 이해하셨다면 똑같은 내용입니다.
* !=, !== 예시
console.log(1 != '1'); //false
console.log(1 !== '1'); //true
3-4) >, >=, <, <=
대소를 비교하는 연산자들입니다. 대소 비교이므로 숫자를 비교할 때 자주 사용되긴 합니다만 문자열끼리도 비교할 수 있습니다. 문자열끼리 비교할 때에는 문자열의 길이를 비교합니다.
>는 좌측이 우측보다 크면 true를 반환,
>=는 좌측이 우측보다 크거나 같으면 true를 반환,
<는 좌측이 우측보다 작으면 true를 반환,
<=는 좌측이 우측보다 작거나 같으면 true를 반환합니다.
* 대소 비교 예시
console.log(4 > 3); //true
console.log(3 > 3); //false
console.log(3 >= 3); //true
console.log('abc' < 'abcd'); //true
console.log('abc' <= 'abc'); true
4) 논리 연산자
4-1) ! 연산자
! 연산자는 논리 연산자 not과 같습니다. 따라서 true인 것은 false로 바꾸고 false인 것은 true로 바꿉니다.
* !연산자 예시
console.log(!1); //1은 true이므로 !1은 false
console.log(!0); //0은 false이므로 !0은 true
4-2) && 연산자
&&연산자는 논리 연산자 and와 같습니다. 좌항이 true이면 우항을 반환하며, 좌항이 false이면 우항을 읽지 않고 false를 반환합니다. &&연산자의 사용법은 크게 두 가지가 있습니다.
- 논리 연산을 위해 좌항과 우항에 모두 boolean을 사용
- 대입 연산을 위해 좌항에서 boolean or undefiend or null로 조건 체크
좌항이 boolean이나 null이나 undefined가 아닌 경우에는 자바스크립트 특성상 타입 변환으로 인해 다양한 결과들이 나타납니다. 그로 인해 결과 예측이 어려우며 가독성이 매우 떨어지고 무엇이 목적인 코드인지 명확히 알기 어려워집니다.
* && 연산자 예시
// 1. 논리 연산
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
// 2. 대입 연산을 위한 논리 연산
var func = function(){}
var var1 = true && func;
var var2 = null && func;
var var3 = undefined && func;
console.log(var1); // ƒ (){}
console.log(var2); // null
console.log(var3); // undefined
// 3. 용도나 목적을 알 수 없고 결과 예측이 어렵고 가독성이 떨어지는 사용 예시
console.log("aa" && "bb"); // "bb"
console.log("" && "aa"); // ""
4-3) || 연산자
|| 연산자는 논리 연산자 or와 같습니다. &&와 비슷하게 좌항이 true이면 우항을 읽지 않고 true를 반환합니다. 좌우의 있는 두 항의 값 중 하나라도 true이면 true를 반환합니다.
* || 연산자 예시
// 1. 논리 연산
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
// 2. 대입 연산을 위한 논리 연산
var aa = "aa";
console.log(aa || ""); // "aa"
console.log(null || ""); // ""
console.log(undefined || ""); // ""
console.log(false || ""); // ""
var bb = "bb";
var var1 = aa || bb;
console.log(var1); // "aa"
3. 조건문
조건문은 if문과 switch문이 있습니다.
1) if문
if (조건식){
실행코드
}
먼저 if라고 적고 괄호() 안에 조건식을 적어줍니다. 조건식의 값은 true인지 아닌지를 판별합니다. (자바스크립트는 꼭 boolean이 아닌 것을 조건식에 넣어도 자동으로 형 변환하여 참 거짓을 판별합니다만 이런 사용 방식은 그다지 추천하지 않습니다.) 조건식의 값이 true이면 중괄호{} 안에 있는 코드가 실행되고 그렇지 않으면 중괄호{} 안에 있는 코드는 무시된 채 다음 코드로 넘어갑니다.
* 예시 코드
// ex 1
if (true){
alert("hello"); //실행 O
}
// ex 2
if (false){
alert("hello"); //실행 X
}
// ex 3
var num = 5;
if (num === 5){
alert("hello"); //실행 O
}
// ex 4
if (num !== 5){
alert("hello"); //실행 X
}
if문에는 if 뿐만 아니라 else if나 else도 같이 쓰일 수 있습니다.
if와 else if를 사용
else if는 if의 조건식의 값이 true가 아니어서 코드를 넘겼을 때 다른 조건식을 제시하기 위해 사용됩니다.
if (조건1){
실행코드
} else if (조건2){
실행코드
}
조건문을 이와 같이 사용할 때 '조건1'이 true이면 밑에 있는 else if는 무시된 채 넘어갑니다. 즉 '조건1'이 true이면 '조건2'의 진위 여부는 판별 자체를 실행하지 않고 넘어갑니다. 반면 '조건1'이 true가 아니면 그다음 조건식인 '조건2'의 판별로 넘어갑니다.
* 예시 코드
// ex 1
var num = 0;
if (true){
num++; //실행
} else if (false){
num++; //미실행
}
alert(num); //결과 : 1
// ex 2
var num = 0;
if (true){
num++; //실행
} else if (true){
num++; //미실행
}
alert(num); //결과 : 1
// ex 3
var num = 0;
if (false){
num++; //미실행
} else if (true){
num++; //실행
}
alert(num); //결과 : 1
// ex 4
var num = 0;
if (false){
num++; //미실행
} else if (false){
num++; //미실행
}
alert(num); //결과 : 0
else if는 여러 번 반복해서 사용할 수 있습니다.
if (조건1){
실행코드
} else if (조건2){
실행코드
} else if (조건3){
실행코드
} else if (조건n){
실행코드
}
이런 식으로 사용하면 if문의 조건식 '조건1'이 true이면 해당 코드를 실행하고 if문을 끝냅니다. '조건1'이 true가 아니면 그다음 조건식인 '조건2'의 진위여부를 판별하고 '조건2'가 true이면 해당 코드를 실행하고 if문을 끝냅니다. 만약 '조건2'도 true가 아니면 그다음 조건식인 '조건3'의 진위여부를 판별하고 마찬가지의 프로세스를 계속 진행합니다. 이런 프로세스로 if문의 코드는 실행됩니다.
* 예시 코드
// ex 1
var code = 'c';
if (code === 'a'){
alert(1);
} else if (code === 'b'){
alert(2);
} else if (code === 'c'){
alert(3);
} else if (code === 'd'){
alert(4);
}
위 예시 코드는 조건식 두 개를 거쳐 세 번째 조건식 code === 'c'에서 true이므로 alert(3);을 실행하고 if ~ else if문을 탈출합니다.
else 사용
조건문의 마지막은 항상 else를 사용할 수 있습니다. else는 위에 있는 조건식들의 값이 전부 true가 아니라고 판별된 뒤에 실행되며 예외 케이스에 대한 처리를 위해 사용됩니다
// 사용법 예시 if와 else
if (조건){
실행코드
} else {
실행코드
}
// 사용법 예시 if와 else if와 else
if (조건1){
실행코드
} else if (조건n) {
실행코드
} else {
실행코드
}
* 예시 코드
// ex 1
var result = false;
if (result){
alert("통과");
} else {
alert("실패");
}
// result 값이 false이므로 if 조건식을 지나치고 else의 코드가 실행
// ex 2
var result = 'c';
if (result === 'a'){
alert(1);
} else if (result === 'b'){
alert(2);
} else {
alert(3);
}
//위의 두 조건식의 값이 모두 false이므로 else의 코드가 실행
2) switch문
사용법은 다음과 같습니다.
switch (변수){
case 값1 :
실행코드
break;
case 값2 :
실행코드
break;
case 값n :
실행코드
break;
default :
실행코드
}
switch문은 해당 변수의 값에 따라 분기 처리하여 다른 코드를 실행할 수 있게 경우의 수를 나눌 때 사용합니다. 물론 이것은 if문으로도 구현할 수 있습니다. if문의 조건식을 (변수 === 값n) 로 사용하면 됩니다. 그러나 특정 변수의 값에 따라 서로 다른 처리를 하는 경우에는 switch문이 if문보다 훨씬 가독성이 뛰어납니다.
switch문 사용법은 우선 switch라고 적고 () 안에 변수를 적어줍니다. 그리고 중괄호{}를 열고 각 경우의 수마다 case 값n : 을 적어줍니다. 그 값은 () 안에 적어준 변수의 값과 매칭시킬 값입니다. 매칭이 된다면 실행시킬 코드를 case 값n : 밑에 줄부터 적습니다. 실행코드 가장 마지막 줄에는 항상 break;를 넣어줘야 합니다. break를 만나야 switch문을 탈출하기 때문입니다. 만약 break;가 없다면 아래줄에 있는 case문에 대한 코드도 실행해버리는 부작용이 발생합니다.
마지막에 default는 if문의 else와 같은 존재입니다. 모든 case에 대해 만족하지 않으면 실행해줄 예외처리 코드를 쓰기 위해 필요합니다.
* 예시 코드
// ex 1
var code = 'b';
switch (code){
case 'a' :
alert(1);
break;
case 'b' :
alert(2);
break;
case 'c' :
alert(3);
break;
default :
alert("need a or b or c");
}
// ex 2
var code = 'd';
switch (code){
case 'a' :
alert(1);
break;
case 'b' :
alert(2);
break;
case 'c' :
alert(3);
break;
default :
alert("need a or b or c");
}
ex1의 경우
code변수의 값이 case 'b'에 해당하므로 alert(2);이 실행되고 break;를 만나서 switch문을 탈출합니다.
ex2의 경우
모든 case에 해당하지 않으므로 default : 밑에 있는 코드 alert("need a or b or c");가 실행됩니다.
4. 반복문
반복문은 어떤 코드 블록을 n회 반복해서 실행할 수 있도록 하는 문법입니다.
반복문과 같이 가장 자주 많이 쓰이는 데이터 타입은 배열입니다. 배열의 각 원소들에 동일 로직으로 처리를 하고 싶을 때, 반복문은 강력한 힘을 발휘할 수 있습니다.
1) while문으로 배열 다루기
* 예시 코드
var people = ['cocoder', 'yoon', 'hoho', 'choco'];
var i = 0;
while (i < people.length){
document.write("<li>" + people[i] + "</li>");
i++;
}
people 배열은 원소가 총 4개이므로 length 프로퍼티의 값은 4입니다. 이것은 마지막 인덱스인 3보다 1만큼 더 큰 숫자입니다. 인덱스는 0부터 세고 length 값은 1부터 세기 때문입니다. 따라서 while문에서 i값은 0, 1, 2, 3일 때 각각 {} 안에 있는 코드 블록을 실행합니다. 이번 예시 코드에서 {} 안에 있는 코드 내용은 li태그에 각 배열의 원소를 텍스트 컨텐트로 담아 출력하는 것입니다.
반복문 안에 조건문을 활용할 수 있습니다. people배열에서 'c'라는 문자가 포함된 원소만 출력해보겠습니다.
* 예시 코드
var people = ['cocoder', 'yoon', 'hoho', 'choco'];
var i = 0;
while (i < people.length){
if (people[i].includes('c')){
document.write("<li>" + people[i] + "</li>");
}
i++;
}
2) for문으로 배열 다루기
이제 배열의 각 원소의 값을 바꾸고 싶습니다. 가장 간단하게 생각하면 다음과 같이 각 원소의 값을 바꿀 수 있을 것입니다.
var people = ['cocoder', 'yoon', 'hoho', 'choco'];
people[0] = 'cocoder_01';
people[1] = 'yoon_02';
people[2] = 'hoho_03';
people[3] = 'choco_04';
console.log(people); // ['cocoder_01', 'yoon_02', 'hoho_03', 'choco_04']
다소 귀찮긴 했지만 일일이 인덱스에 접근하여 값을 변경해주었습니다. 그런데 만약 배열의 길이가 십만이라면? 백만이라면? 그때에도 이렇게 손수 각 인덱스를 직접 써서 값을 변경할 수 있을까요?
반복문은 그래서 강력합니다. 코드를 한번만 작성하면 중복작성없이 같은 작업을 계속 수행할 수 있습니다.
다음 예제로 for문으로 배열의 각 원소의 값을 바꿔보겠습니다.
* 예시 코드
var team = ['cocoder_01', 'yoon_02', 'hoho_03', 'choco_99'];
//특정 문자열 모두 치환 함수 만들기. 내장메소드인 replace()는 첫번째문자만 치환됨.
String.prototype.replaceAll = function(org, dest) {
return this.split(org).join(dest);
}
for (var i = 0; i < team.length; i++){
team[i] = team[i].replaceAll('_', '_0');
document.write("<li>" + team[i] + "</li>");
}
team이라는 배열은 4개의 원소를 가지고 있고 각 원소는 string형이며 끝자리에 _ 뒤에 두 자리의 수가 붙어있습니다. 모든 원소의 이 끝자리 수를 세 자리의 수로 만드는 작업을 반복문으로 처리를 하였습니다. 반복문을 사용하기 전에 문자열을 바꾸는 메소드인 replaceAll()을 String prototype 객체에 추가하여, 모든 string타입의 객체가 사용할 수 있도록 하였습니다.
3) foreach()로 배열 다루기
foreach()는 배열 객체에만 사용 가능한 메소드입니다. 먼저 파라미터에 대해 살펴보겠습니다.
array.forEach(callbackFunction(currentValue, index, array){}, thisArg);
파라미터로 콜백 함수와 thisArg를 받아옵니다. 콜백 함수는 배열 객체에 적용시킬 함수를 의미하고 thisArg는 콜백 함수 내에서 this로 사용할 값을 명시적으로 넣어주는 용도입니다.
콜백 함수에도 파라미터가 3개가 있는데, currentValue는 배열의 현재 인덱스에 해당하는 원소 값이고, index는 현재 인덱스이고, array는 배열 전체를 의미합니다. 콜백 함수는 배열의 각 원소에게 각각 적용됩니다. 기본 예제를 보고 감을 더 잡아보겠습니다.
* 예시 코드
var team = ['cocoder', 'yoon', 'hoho', 'choco'];
team.forEach(function(cv,i,arr){
document.write('안녕하세요. 저는 ' + (i+1) + '번 선수 ' + cv +'입니다.<br>' +
'저희 팀원은 ' + arr +'가 있습니다.<br>');
});
4) for~in문으로 배열 다루기
* 예시 코드
var arr = ["a", "b", "c", "d", "e"];
for (var i in arr){
document.write(i, " : ", arr, "<br>");
}
for ~ in 문에서 i는 index가 되고, arr는 배열이 됩니다.
5) for~of문으로 배열 다루기
* 예시 코드
var arr = ["a", "b", "c", "d", "e"];
for (var i of arr){
document.write(i, " : ", arr, "<br>");
}
for ~ of 문에서 i는 원소값이 되고 arr는 배열이 됩니다.
최근댓글