Chapter2. Javascript 문법

1. 객체와 key

var obj = { a:1, b:1}
obc.c = 3;
obj['d'] = 4;
var e = 'e';
obj[e] = 5;
function f() { return 'f'; }
obj[f()] = 6;
console.log(obj);
// { a:1, b:2, c:3, d:4, e:5, f:6}

[]의 안쪽에서는 코드를 실행할 수 있다.

var = obj = { (true ? "a" : "b") : 1};
// error
//{} 안쪽의 key영역에서는 코드를 실행할 수는 없다.

var obj2 = {};
obj2[true ? "a":"b"] = 1;
console.log(obj2);
// { a : 1 }

var = obj3 = { [true ? "a" : "b"] : 1};
// { a : 1 }

2. 함수 정의

함수를 정의하는 방법

function add1(a,b){
  return a + b;
}
var add2 = function(a,b){
  return a + b;
}
var m = {
  add3: function(a,b){
    return a + b;
  }
}

호이스팅

• 호이스팅이란 변수나 함수가 어디서 선언되든지 해당 스코프 최상단에 위치하게 되어 동일 스코프 어디서든 참조할 수 있는 것을 말한다.

변수 선언과 함수 선언에서의 차이

변수는 선언 단계와 초기화 단계가 구분되어 있다.
변수는 선언과 초기화가 동시에 이루어지지 않기 대문에 호이스팅에 의해 참조만 가능
아직 값이 담기지 않아 실행은 불가

함수 선언은 선언과 동시에 초기화가 이루어지기 때문에 참조뿐 아니라 실행도 가능

add1(10,5);
//15
add2(10,5);
// error : add2 is not a function
add3(10,5);
// error : add3 is not a defined
function add1(a,b){
  return a + b;
}
var add2 = function(a,b){
  return a + b;
}
----------------------------------------
console.log(add1);
// function add1(a,b) { return a + b; }
console.log(add2);
// undefined
// 에러가 나지 않는다.

function add1(a,b){
  return a + b;
}
var add2 = function(a,b){
  return a + b;
}

add2는 변수를 선언하여 익명 함수를 담았고, add1은 함수로 선언했다. 호이스팅에 의해 add1은 미리 실행할 수 있고, add2는 호이스팅에 의해 미리 참조할 수 있지만 값이 없어 실행은 불가하다.

예시 코드

function add(a,b){
  return valid() ? a + b : new Error();
  
  function valid(){
    return Number.isInteger(a) && Number.isInteger(b);
  }
}

• 호이스팅을 활용하여 가독성을 높였다.

함수 즉시 실행하기

1. 일반적인 즉시 실행 방식

(function(a){
  console.log(a);
  // 100
})(100);

/////// 익명 함수 선언 실패
function(a){
  console.log(a);
}(100);

2. 괄호 없이 정의가 가능한 다양한 상황

!function(a){
  console.log(a);
  //1
}(1)

true && function(a){
  console.log(a);
  //1
}(1);

1 ? function(a){
  console.log(a);
  //1
}(1);

0, function(a){
  console.log(a);
  //1
}(1);

var b = function(a){
  console.log(a);
  //1
}(1);

function f2(){}
f2(function(a){
  console.log(a);
  // 1
}(1));

new function(){
  console.log(1);
  // 1
}

• 값으로 함수를 다루는 방식들

eval과 new Function

var a = eval('10 + 5');
console.log(a);
// 15

var add = new Function('a,b', 'return a + b;');
add(10,5);
//15

• 성능상의 이슈가 있어 조심해서 사용해야한다.

유명(named)함수

var f1 = function f(){
  console.log(f);
};

f1();
// function() {
//   console.log(f1);
// }

• 함수를 값으로 다루면서 익명이 아닌 f()처럼 이름을 지은 함수를 유명함수라고 한다.

3. 함수 실행

함수를 실행하는 방법 (), call, apply

1. () 실행

function test(a,b,c){
  console.log("a b c": a,b,c);
  console.log('this:',this);
  console.log('arguments:', arguments);
}

test(10);
// a b c: 10 undefined undefined
// this : Window {...}
// arguments: [10]

test(10, undefined);
// a b c: 10 undefined undefined
// this : Window {...}
// arguments: [10, undefined]

test(10,20,30);
// a b c: 10 20 30
// this : Window {...}
// arguments: [10,20,30]

function의 arguments는 parameter와 linking(?)된다.

function test2(a,b){
  b=10;
  console.log(arguments);
}
test2(1);
// [1]

test(1,2);
// [1, 10]
// function 내부에서 b를 변경하자 arguments객체의 값도 변경됨

function의 this값 변경하기

var o1 = {name: "obj1"};
o1.test = test;
o1.test(3,2,1);
// a b c: 3 2 1
// this : Object {name: "obj1"}
// arguments: [3,2,1]

// this가 window에서 o1객체로 변경됨

var o1_test = o1.test;
o1_test(5,6,7);
// a b c: 5 6 7
// this : Window {...}
// arguments: [5,6,7]

// this가 window

2. call, apply

call

// call의 첫 번째 인자로 받은 값을 this로 사용
test.call(undefined, 1,2,3);
test.call(null,1,2,3);
test.call(void 0,1,2,3);
// a b c: 1 2 3
// this : Window {...}
// arguments: [1,2,3]

test.call(o1,1,2,3);
// a b c: 1 2 3
// this : Object {name:"obj1"}
// arguments: [1,2,3]

test.call(1000,1,2,3);
// a b c: 1 2 3
// this : Number 1000
// arguments: [1,2,3]


o1.test.call(undefined, 1,2,3);
// a b c: 1 2 3
// this : Window {...}
// arguments: [1,2,3]

apply

test.apply(o1,[3,2,1]);
// a b c: 3 2 1
// this : Object {name:"obj1"}
// arguments: [3,2,1]

test.apply(1000,[3,2,1]);
// a b c: 3 2 1
// this : Number 1000
// arguments: [3,2,1]

test.apply(undefined,[3,2,1]);
// a b c: 3 2 1
// this : Window {...}
// arguments: [3,2,1]


o1.test.call([50], [3,2,1]);
// a b c: 3 2 1
// this : Array [50]
// arguments: [3,2,1]