11. 자바스크립트 기초 : 변수, 조건문, 반복문, 함수

자바스크립트의 버전은 ECMA Script의 버전에 따라 결정된다. 현재는 ES 6버전을 표준으로 사용 중.

변수 표시

var, let, const의 형태로 변수를 표시할 수 있다.

var : function-scoped , let/const : block-scoped

참고 자료. by LeoHeo님

//다양한 변수 지정방법
var a = 2;
var a = "aaa";
var a = 'aaa';
var a = true;
var a = [];
var a = {};
var a = undefined;

//or연산자 활용
var name = "";
var result = name || "codesquad";
console.log(result);
//결과는 codesquad

//삼항연산자 활용
const data = 11;
const result = (data > 10) ? "ok" : "fail";
console.log(result);
//결과는 ok

비교는 == 보다는 ===를 사용한다.

==로 인한 다양한 오류 상황이 있는데 아래 결과를 참고해봅시다. 

//==연산자
console.log(0 == false);
>>true
console.log("" == false);
>>true
console.log(null == false);
>>false // null은 객체이기 때문이다.
console.log(0 == "0");
>>true //숫자도 true?
console.log(null==undefined);
>>true //문자열도 true?
//그렇다면 어떻게 비교하나? ===을 사용하자.
console.log(0==="0");
>>false
console.log(0===0);
>>true

자바스크립트의 type 표시

undefined, null, boolean, number, string, object, function, array, Date, RegExp

타입은 선언할 때가 아니고, 실행타임에 결정됩니다.

함수안에서의 파라미터나 변수는 실행될 때 그 타입이 결정됩니다.

function run(a){
	console.log(a);
}
run("a");
>>a
run(0);
>>0
console.log(toString.call("a"));
>>[object String]
console.log(toString.call(0));
>>[object Number]
console.log(toString.call(true));
>>[object Boolean]

자바스크립트의 타입을 확인하려면 정확하게는 toString.call 함수를 이용해서 그 결과를 매칭하곤 하는데, 문자, 숫자와 같은 자바스크립트 기본 타입은 'typeof' 키워드를 사용해서 체크할 수 있습니다. 배열은 타입을 체크하는 isArray함수가 표준으로 생겼습니다.

IE와 같은 구 브라우저를 사용해야 한다면 지원범위를 살펴보고 사용해야 합니다.

자바스크립트 조건문

자바스크립트는 두가지 조건문을 제공합니다. If-else / switch

//if-else문 기본형태
if (condition) {
  statement_1;
} else {
  statement_2;
}

//switch문 기본형태
switch (expression) {
  case label_1:
    statements_1
    [break;]
  case label_2:
    statements_2
    [break;]
    ...
  default:
    statements_def
    [break;]
}

자바스크립트 반복문

자바스크립트는 다음과 같은 반복문을 제공합니다.

반복문 자세히 알아보기

• for 문
• do...while 문
• while 문
• 레이블 문
• break 문
• continue 문
• for...in 문
• for...of 문

반복문으로 배열을 탐색할 때 forEach / for-of를 통한 탐색도 자주 사용됩니다.

for-each 반복문

//for-each 
var array1 = ['a', 'b', 'c'];
array1.forEach(function(element) {
  console.log(element);
});

// expected output: "a"
// expected output: "b"
// expected output: "c"

for-in 반복문 (객체의 프로퍼티 순회)

//for -in
var obj = { a: 1, b: 2, c: 3 }; 
for (var prop in obj) {
console.log(prop, obj[prop]); 
 }
// expected output: a 1, b 2, c 3

for of 반복문 (배열의 요소 순회)

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

for-in과 for-of를 비교해보자.

//for-in과 for-of의 비교
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

MDN문서에서 확인하기

자바스크립트 함수의 특징 Hoisting

 

자바스크립트를 실행하면 파싱을 통해 먼저 스크립트를 쭉 훑게 된다. 이때 가장 먼저  var 변수선언, 함수선언을 호이스팅한다. 아래쪽에서 정의되었던 변수나 함수들이라고 해도 최상위에서 미리 undefined로 값을 갖고 변수/함수로 선언된 것처럼 하는 기능이다.

자바스크립트 함수의 선언

1. 함수의 선언

// 함수의 호출.
function printName(firstname) {
    var myname = "jisu";
    return myname + " " +  firstname;
}
console.log(printName("hello worlds"));
console.log(printName());
//콘솔창 결과
>>jisu hello worlds
>>jisu undefined

2. 함수 표현식

//함수표현식
// 기명 함수표현식(named function expression)
var foo = function multiply(a, b) {
  return a * b;
};
// 익명 함수표현식(anonymous function expression)
var bar = function(a, b) {
  return a * b;
};

console.log(foo(10, 5)); // 50
console.log(multiply(10,5)); //ReferenceError: multiply is not defined
console.log(bar(10, 5)); // 50

함수는 위 두가지로 표현할 수 있다. 하지만 코딩을 할 때는 둘 중 하나의 방법을 선택해서 하는 것이 좋다.

함수 - arguments 객체

함수가 실행되면 그 안에는 arguments라는 특별한 지역변수가 자동으로 생성됩니다. arguments의 타입은 객체 입니다. 자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있습니다. 이때 넘어온 인자를 arguments로 배열의 형태로 하나씩 접근할 수가 있습니다. arguments는 배열타입은 아닙니다. 따라서 배열의 메서드를 사용할 수가 없습니다.

function a() {
 console.log(arguments);
}
a(1,2,3);
//expected result : { '0': 1, '1': 2, '2': 3 }

생각해보기

ES6에서 ArrowFunction이 추가되었다.

An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

// ES5
var pow = function (x) { return x * x; };
console.log(pow(10)); // 100

//ES6
const pow = x => x * x;
console.log(pow(10)); // 100

ArrowFunction알아보기1 : MDN

ArrowFunction알아보기2 : https://poiemaweb.com/