15분 자바스크립트 기초 완성

자바스크립트 데이터 타입

Number
String
Boolean
Symbol
Object
    Function
    Array
    Date
    RegExp
null
undefined

그외 Error, Math등등 빌트인 오브젝트들이 더 있습니다.

Number

자바스크립트에서 숫자는 배정밀도(double precision) 64비트입니다. C나 Java에서의 integer가 아닙니다. 간단히 3.141592653589793 이런 숫자라고 생각하시면됩니다. 

var sum = 0.1 + 0.2;

console.log(sum); 

OUTPUT 
0.30000000000000004 

이렇듯 자바스크립트에서 수학적 계산을 할때에는 주의가 필요합니다. 일반 숫자와 다르게 딱 떨어지는 값이 아닙니다.

계산에 필요한 연산자(+, -, /, *, %, **)를 사용하거나 Math와 같은 빌트인 오브젝트를 사용하여 계산합니다.

Math.sin(3.5); 
var circumference = 2 * Math.PI * r; 

parseInt() 함수를 통해 문자열 숫자를 정수형으로 변환합니다. 두번째 인수를 전달하여 10진수, 16진수 혹은 2진수로 표현할 수 있습니다.

parseInt('123', 10); // 123 
parseInt('010', 10); // 10 
parseInt('11', 2); // 3 

"0x"로 시작하는 숫자형 문자열인 경우 자동으로 16진수로 인식하지만 "0"으로 시작할 경우 브라우저에 따라 10진수 혹은 8진수로 달리 인식할 수 있습니다. 그러므로 두번째 인수를 전달하여 명확하게 사용하길 권장합니다.

부동소수점 문자열 숫자를 다룰 때는 parseFloat()를 사용합니다.

단항 연산자(unary operator)인 '+'로도 숫자로 변환 가능합니다.

+ '42';   // 42 
+ '010';  // 10 
+ '0x10'; // 16 

▣ parseInt/parseFloat와 +(단항연산자) 차이점

모두 문자열 숫자를 숫자로 변환하는 것은 맞지만 약간 차이가 있습니다. 

var sum = "10.2abc";  
console.log(parseFloat(sum)); //10.2 
console.log(+ sum); //NaN 

위 예제 코드와 같이 parseInt/parseFloat는 숫자형 문자열이 아닌데까지 숫자로 변환합니다. 반면 단항 연산자는 해당 문자열에 숫자가 아닌 문자가 있으면 바로 NaN을 리턴합니다.

이렇듯 숫자형이 아닌 문자열을 숫자로 변환할 경우 NaN(Not a Number)가 리턴됩니다.

parseInt('hello', 10); // NaN

NaN와 함께 연산을 할 경우 그 결과는 모두 NaN이 됩니다.

NaN + 5; // NaN

그렇기 때문에 계산 전 isNaN() 함수로 숫자값인지 아닌지 테스트할 수 있습니다.

isNaN(NaN); // true 

그 외 특별한 값인 Infinity와 -Infinity가 있습니다.

1 / 0; //  Infinity 
-1 / 0; // -Infinity

isFinite()함수로 테스트할 수 있습니다. 

isFinite(1 / 0); // false 
isFinite(-Infinity); // false 
isFinite(NaN); // false

Strings

문자열은 유니코드 캐릭터의 연속된 집합입니다. 

문자열은 객체(object)입니다. 속성(property), 메소드(Methods)가 내장되어 있습니다. 문자열의 길이는 length 속성에서 구할 수 있습니다.

'hello'.length; // 5

속성외에 다음과 같은 메소드(Methods)도 포함하고 있습니다.

'hello'.charAt(0); // "h" 
'hello, world'.replace('world', 'mars'); // "hello, mars" 
'hello'.toUpperCase(); // "HELLO" 

Boolean

참(true) 혹은 거짓(false) 값입니다. 특징은 어떤 값이든 Boolean 타입으로 변환 가능합니다.

• false, 0, 빈 문자열(""), NaN, null, undefined는 false 
• 그 외 모두는 true

Boolean()함수로 명시적으로 변환 가능합니다.

Boolean('');  // false 
Boolean(234); // true

하지만 명시적으로 변환하지 않아도 if, &&, ||, ! 와 같이 사용될 때 내부적으로 true, false로 변환됩니다. 

Symbol

심볼은 ECMAScript2015에서 처음 소개되었습니다. 심볼의 값은 Symbol 함수에 의해서 구할 수 있고 유일한 값을 가집니다. 객체(Object)의 속성값으로 사용될 수 있습니다. 

// 두개의 심볼을 생성
let Sym1 = Symbol("Sym");
let Sym2 = Symbol("Sym");
  
console.log(Sym1 == Sym2); // returns "false"
// 심볼의 값은 유일한 값

null과 undefined

null은 값입니다. 의도적으로 값이 없음을 나타낼때 사용합니다.

반면 undefined은 값의 타입입니다. 예로 변수가 선언되었지만 초기화되지 않았을 때 undefined이라 합니다. 

Variables

변수는 let, const 또는 var 키워드로 선언됩니다.

let으로 선언된 변수는 block 안에서만 유효합니다.

// myLetVariable is *not* visible out here 

for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { 
  // myLetVariable is only visible in here 
} 

// myLetVariable is *not* visible out here 

const 변수는 앞으로 변환되지 않는 값 선언시 사용됩니다. (block 안에서만 유효)

const Pi = 3.14; // variable Pi is set  
Pi = 1; // will throw an error because you cannot change a constant variable. 

반면 var는 전통적인 자바스크립트 변수 선언 방식으로 let, const 같이 제한이 없습니다. 어디서든 접근이 가능합니다. 

// myVarVariable *is* visible out here 

for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) {  
  // myVarVariable is visible to the whole function  
}  

// myVarVariable *is* visible out here 

초기화되지 않은 변수의 타입은 undefined입니다.

Scope

변수의 유효 가능한 범위의 스코프는 다음과 같이 나눌 수 있습니다.

• 블럭스코프(Block scope)
• 함수스코프(Function scope)
• 전역스코프(Global scope)

블럭스코프(Block scope)는 중괄호로 감싸진 범위를 말합니다.

if(true){ 
    // 블럭스코프 
} 

for(var i=0; i<2; i++){ 
    // 블럭스코프 
} 

function func(){ 
    // 블럭스코프 
} 

함수스코프(Function scope)는 이 블럭스코프 중 함수의 스코프를 말합니다.

전역스코프(Global scope)는 큰 영역의 함수스코프라고 생각하시면 됩니다. var 변수가 가지는 특성으로 블럭, 함수 스코프와 관계 없이 어디서든 엑세스가 가능합니다.

if(true){ 
  var temp = 'hi'; 
} 

console.log(temp); 

function main(){ 
  if(true){ 
    var temp = 'hi'; 
  } 
  console.log(temp); 
} 

main(); 

반면 let, const는 블럭스코프에서만 유효합니다.

if(true){ 
  var var_name = 'test1'; 
  let let_name = 'test2'; 
  const const_name = 'test3'; 
} 

console.log(var_name); // test1 출력 
console.log(let_name); // 에러 
console.log(const_name); // 에러 

let, const는 ECMAScript 2015에서 소개되었고 var 변수 선언을 권장하지 않습니다.

Operators

산술 연산자 
+, -, *, / 그리고 %

숫자값에 대한 연산

할당 연산자
=

변수에 값을 할당

복합 할당 연산자
+=, -= 

x += 5; 
x = x + 5;

값을 더하거나 뺄때 축약해서 사용가능

증가 가감 연산자
++, -- 

let a = 1;

a++;

a--

문자열 사이에 + 를 사용하여 이어붙이는데 사용될 수 있습니다.

'hello' + ' world'; // "hello world" 

또한 + 는 문자열 숫자와 숫자를 혼합하여 사용되기도 합니다.

'3' + 4 + 5;  // "345" 
 3 + 4 + '5'; // "75"

+와 공백문자를 함께 사용하여 숫자를 문자열로 변환하기도 합니다.

var sum = '' + 3; 
console.log(sum); // 3 
console.log(typeof(sum)); // string 

비교연산자
<, >, <= 그리고 >=

문자열, 숫자에 모두 사용가능합니다.

==, ===

== 로 비교할 경우 값 타입이 강제 변환이 일어나 원하지 않는 결과를 가져올 수 있습니다.

123 == '123'; // true 
1 == true;    // true 

이를 방지하기 위해 === 를 사용합니다.

123 === '123'; // false 
1 === true;    // false 

!=, !== 도 마찬가지로 동작합니다.

Control structures

if, else if, else 조건문

var name = 'kittens'; 
if (name == 'puppies') { 
  name += ' woof'; 
} else if (name == 'kittens') { 
  name += ' meow'; 
} else { 
  name += '!'; 
} 
name == 'kittens meow'; 

while, do-wile 반복문

while (true) { 
  // an infinite loop! 
} 

var input; 
do { 
  input = get_input(); 
} while (inputIsNotValid(input)); 

for 반복문

for (var i = 0; i < 5; i++) { 
  // Will execute 5 times 
} 

for ... of 반복문

배열의 값에 엑세스

const array_var = ['apple', 'pear', 'watermelon']; 

for (let value of array_var) { 
  console.log(value); 
}

OUTPUT
apple 
pear 
watermelon 

for ... in 반복문

배열의 인덱스에 엑세스

const array_var = ['apple', 'pear', 'watermelon']; 

for (let value in array_var) { 
  console.log(value); 
} 

OUTPUT
0 
1 
2 

&&와 || 연산자는 첫번째 피연산자의 결과에 따라 두번째 피연산자의 행위가 결정됩니다.

A && B
A가 참인 경우에만 B를 실행

A || B
A가 거짓인 경우에만 B를 실행

이는 객체의 속성에 접근하기 전에 객체가 null인지 확인할 때 유용합니다.

const name = o && o.getName(); 

변수의 기본값 설정에도 사용합니다.

const name = otherName || "default"; 

삼중 연산자를 통해 한줄로 조건문을 만들 수 있습니다.

const allowed = (age > 18) ? "yes" : "no"; 

switch 조건문

case 에는 숫자나 문자열만 가능합니다.

switch (action) { 
  case 'draw': 
    drawIt(); 
    break; 
  case 'eat': 
    eatIt(); 
    break; 
  default: 
    doNothing(); 
} 

각 case는 break로 구분되며 그렇지 않을 경우 break를 만날때까지 실행됩니다.

switch (a) { 
  case 1: // fallthrough 
  case 2: 
    eatIt(); 
    break; 
  default: 
    doNothing(); 
} 

default는 생략 가능하며 다음과 같은 연산식도 가능합니다.

switch (1 + 3) { 
  case 2 + 2: 
    yay(); 
    break; 
  default: 
    neverhappens(); 
}

Objects

자바스크립트에서 객체(object)는 이름:값(name-value pair)의 집합체입니다. name은 스트링이고 value는 값입니다. 

객체 생성

// new를 사용한 방법
var obj = new Object(); 

// 객체 리터럴 구문(object literal syntax)
// 편리함으로 더 많이 사용
var obj = {}; 

객체 생성과 초기화

var obj = { 
  name: 'Carrot', 
  for: 'Max', // 'for' is a reserved word, use '_for' instead. 
  details: { 
    color: 'orange', 
    size: 12 
  } 
}; 

객체 속성 접근

obj.name // Carrot 
obj.details.color; // orange 
obj['details']['size']; // 12 

아래는 Person의 객체 prototype과 인스턴스 생성 예제입니다.

function Person(name, age) { 
  this.name = name; 
  this.age = age; 
} 

// Define an object 
var you = new Person('You', 24);  
// We are creating a new person named "You" aged 24. 

 

인스턴스가 생성된 후에는 아래 두 방법으로 값을 할당하거나 가져올 수 있습니다.

// dot notation 
you.name = 'Simon'; 
var name = you.name; 

또는 

// bracket notation 
you['name'] = 'Simon'; 
var name = you['name']; 
// can use a variable to define a key 
var user = prompt('what is your key?') 
you[user] = prompt('what is its value?') 

브라켓으로 객체에 접근시에는 몇가지 이점이 있습니다. 

• 속성이름을 동적으로 할당할 수 있습니다. (단, 최적하에 안 좋음)
• 자바스크립트 예약어를 속성의 이름으로 지정이 가능해집니다.

obj.for = 'Simon'; // Syntax error, because 'for' is a reserved word 
obj['for'] = 'Simon'; // works fine 

객체와 prototype에 대한 설명은 여기서 prototype 체인은 여기서 확인하세요.

Arrays

일반 객체와 비슷하게 사용되며 브라켓[인덱스]을 이용하여 값에 접근할 수 있습니다. 

const a = new Array(); 
a[0] = 'dog'; 
a[1] = 'cat'; 
a[2] = 'hen'; 
a.length; // 3 

더 일반적인 방법은 아래와 같습니다.

const a = ['dog', 'cat', 'hen']; 
a.length; // 3 

배열의 length의 값은 무조건 가장 마지막 값의 인덱스 + 1 입니다.

var a = ['dog', 'cat', 'hen']; 
a[100] = 'fox'; 
a.length; // 101

값이 할당되지 않은 빈 인덱스의 타입은 undefined 입니다. 

typeof a[90]; // undefined 

for 루프를 사용하여 배열에 접근할 수 있습니다.

for (var i = 0; i < a.length; i++) { 
  // Do something with a[i] 
} 

for (const currentValue of a) { 
  // Do something with currentValue 
} 

for ...in 루프와 사용은 추천하지 않습니다. 인덱스 자체를 루프하고 만약 Array.prototype에 누군가가 속성을 추가했다면 이마저도 루프하기 때문입니다.

ECMAScript5에 추가된 forEach()와도 함께 사용 가능합니다.

['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) { 
  // Do something with currentValue or array[index] 
}); 

만약 배열에 값을 추가하고 싶다면 배열 자체의 메소드인 push를 사용합니다.

a.push(item); 

이 외에도 다양한 메소드를 제공합니다. (a.toString(), a.pop() 등등)

Functions

객체와 함께 자바스크립트의 핵심 개념입니다. 함수의 기본 구조는 아래와 같습니다.

function add(x, y) { 
  const total = x + y; 
  return total; 
} 

파라미터를 사용하여 호출하여 넘긴 값을 가져올 수 있습니다. 함수블록 안에 선언된 변수는 함수내에서만 유효하고 return으로 함수를 종료합니다. 만약 return이 없다면 undefined가 리턴됩니다.

var 변수 대신 let, const를 사용하는 것을 권장합니다. var 사용시 주의를 요합니다.

함수의 파라미터는 타 언어와 다르게 강제적이지 않습니다. 가이드라인 역할정도만 합니다. 예를 들어 위의 함수를 인수없이 호출해도 에러가 나지 않습니다.

add(); // NaN 
// You can't perform addition on undefined 

이 경우 add함수의 x, y는 undeinfed가 되고 NaN을 리턴합니다.

또한 함수에 선언한 파라미터보다 더 많이 인수로 넘길 수 있습니다. 선언한 파라미터보다 더 넘길 경우에는 무시됩니

add(2, 3, 4); // 5 
// added the first two; 4 was ignored 

이 경우 4는 무시가 됩니다.

▣ arguments

이러한 것이 가능한 이유는 함수의 인수, 인자는 arguments라는 내부 변수에 따로 저장되기 때문입니다. 그리고 호출된 함수는 arguments에 따로 엑세스하기 때문입니다.

function add() { 
  var sum = 0; 
  for (var i = 0, j = arguments.length; i < j; i++) { 
    sum += arguments[i]; 
  } 
  return sum; 
} 

add(2, 3, 4, 5); // 14 

아래는 파라미터 선언 없이 arguments를 사용하여 평균을 내는 함수입니다.

function avg() { 
  var sum = 0; 
  for (var i = 0, j = arguments.length; i < j; i++) { 
    sum += arguments[i]; 
  } 
  return sum / arguments.length; 
} 

avg(2, 3, 4, 5); // 3.5 

위의 코드를 더 간결하게 만들기 위해 rest parameter operator를 사용한 에제입니다.

function avg(...args) { 
  var sum = 0; 
  for (let value of args) { 
    sum += value; 
  } 
  return sum / args.length; 
} 

avg(2, 3, 4, 5); // 3.5 

args에는 함수에 패스된 모든 인수를 가지고 있습니다.

만약 avg(firstValue, ...args)로 선언한 경우에는 firstValue에는 첫번째 인자값이 나머지는 ..args에 저장되어 있습니다.

배열을 파라미터로 넘겨 평균을 구하는 예제입니다.

function avgArray(arr) { 
  var sum = 0; 
  for (var i = 0, j = arr.length; i < j; i++) { 
    sum += arr[i]; 
  } 
  return sum / arr.length; 
} 

avgArray([2, 3, 4, 5]); // 3.5 

현재 정리중입니다... keep updating...