2019-05-08 10. 원시값과 객체의 비교, 함수, 스코프

1. 원시값

 

원시 값을 변수에 할당하면, 변수에는 실제 값이 저장

객체를 변수에 할당하면, 변수에는 참조 값이 저장

 

원시값은 immutable value 이다.(변경 불가능한 값)

 

var str = 'string';

// 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용하여 각 문자에 접근할 수 있다.
console.log(str[0]); // s

// 하지만 문자열은 원시 타입인 값이므로 변경할 수 없다. 이때 에러가 발생하지 않는다.
str[0] = 'S';

console.log(str); // string

string은 재할당만 안하면! 아무도 값을 바꿀 수 없다. immutable value

요즘 trend : 객체를 얼린다(원시값처럼 쓴다) 새로만들어서 재할당.

 

 

메모리 영역을 확보하고, 해당 셀에 값을 할당하고, 

해당 셀이 필요없어졌을때, 가비지컬렉터가 할당을 해제한다.

 

메모리 Leak  = 렉걸린다. /

   ㄴ할당해제를 안해서 계속 메모리를 할당되어있는 상태로 새로 실행하려는 애가 할당을 못받아서 생기는 현상

 

 

var person1 = {
  name: 'Lee'
};

var person2 = {
  name: 'Lee'
};

console.log(person1 === person2); // ①

console.log(person1.name === person2.name); // ②

객체비교는 참조가 같아야 True

.name은 원시값이기때문에 True

 

deep copy 프로퍼티의 값으로 객체를 가질 수 있다.

 

 

함수

 

 

코드의 재사용을 위해, 유지보수(maintenance)를 위해 함수를 사용한다.

 

 

인수 = argument

인자 = parameter = 매개변수

 

리턴문(반환문)은 두가지 역할 

1. 리턴 뒤에 있는 값을 반환시킨다.

2. 리턴을 하면 끝내버린다.

 

리턴문이 생략되면 암묵적으로 undefined가 반환된다.

 

즉시 실행함수는 단한번 호출이다. (두번 이상 불가)

즉시 실행함수 쓰는 타입이 2가지로 압축이 가능하다.

1. 인위적인 스코프를 만들고 싶을때

2. 클로저를 만들때

 

 

중첩함수 = 내부함수

스코프하고 연관이 있다.

함수가 만들어지면 함수크기만큼의 스코프가 만들어진다.

중첩함수를 포함하는 외부함수를 돕기 위해서 중첩함수를 만든다.

 

 

콜백함수

// 콜백 함수를 전달받는 함수
function print(f) {           //f라는 매개변수
  var string = 'Hello';
  // 콜백 함수를 전달받는 함수가 콜백 함수의 호출 시기를 결정하고 호출
  return f(string);
}

// print 함수에 콜백 함수를 전달하면서 호출
var res1 = print(function (str) {   // print의미:print라는 함수명을 가르키는 것을 ()의미 호출 , ()안에 있는것은 인수
  return str.toUpperCase();
});

// print 함수에 콜백 함수를 전달하면서 호출
var res2 = print(function (str) {
  return str.toLowerCase();
});

console.log(res1, res2); // HELLO hello

//콜백함수 실습

var arr = [1,2,3]

console.log(arr.filter(function(item){
	return item>2;                       //2초과인것 반환
}));

var arr = [1,2,3]

console.log(arr.filter(function(item){
	return (item%2 == 0);                   //짝수인것만 반환
}));

//콜백함수 실습 2

<button class="myBtn">Click me</button>
<script>
  var btn = document.querySelector('.myBtn');
  btn.addEventListener('click', function(){
  console.log('Clicked!!!');
  });
</script>

//콜백함수 실습 3

setTimeout(function(){
  console.log("hey~~");
},1000)

 

스코프

 

스코프 - 식별자가 다른 코드에 의해서 참조 될 수 있느냐 없느냐

 

스코프는 상하관계가 있다. 중첩에 의해서 만들어짐.

 

스코프는 변수를 검색할 때 사용하는 규칙이다.

function foo() {
  var x = 1;
  // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
  // 아래 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
  var x = 2;
  console.log(x); // 2
}
foo();

선언을 var x=1에서 한번 하고 var x=2를 만나면 선언을 포기하고, 다시 돌아가서 순차적으로 코드를 실행

(let을 쓰세용...)

 

 

함수레벨 스코프 - 함수 의해서만 지역 스코프가 생성된다.

ES6부터 let과 const키워드로부터 블록 레벨 스코프를 지원하게되었다.

 

스코프는 선언될때 어디서 선언하느냐가중요