함수, 객체, 함수 스코프, 블럭 스코프 _Javascript

함수 ( Function ) : 특정 일을 처리하는 코드 묶음, 함수로 어떤 문을 만들어놓고 그 문을 재활용할 수 있고 재사용하면서 다양한 패턴을 만들 수 있다. 함수에는 '반환 ( 돌려준다 )' 이 들어있다. 자바스크립트에서 함수는 return이 없으면 undefined로 돌려준다. 이걸 다른 언어에선 void function 이라고 부른다. 

 

자바스크립트에서 함수는 반환문이 있고 반환문이 명시되어 있지 않는 경우 undefined가 리턴된다.

 

객체 : 필자가 생각하는 객체는 'Object' 라고 말하고 싶다. 함수 앞에 무엇가를 쓴 것을 객체라고 하고 싶다.

 

TCP에선 객체라는 정의를 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있다고 나왔다.

 

출처 : "객체", TCP, 2021.12.11 접속, http://www.tcpschool.com/javascript/js_object_concept

 

제로베이스에선 객체를 나라는 사람을 프로그래밍 언어로 표현하는 것으로 이야기하고 있다. 객체 안에는 Key, Value가 쌍으로 들어가 있다. 객체 안에 Key, Value는 Key : Value로 되어 있다. 이것을 프로퍼티 ( 속성 )라고 한다. 객체 안에 Value를 불러오고 싶다면 객체.Key로 불러와야 Value를 볼 수 있다.

EX ) const dog = {

      name : '나비',

       age : 1,

       gender : 'male',

       weight : 0.1

 }

 

console.log(dog.name);   // 나비

console.log(dog.name);   // 1

 

객체 안에 함수를 넣을 수 있다.

EX ) const dog = {

      name : '나비',

       age : 1,

       gender : 'male',

       weight : 0.1,

       introduce : function() {

       return 'hello my name is 나비'

 }

}

console.log(dog.introduce());  // hello my name is 나비

 

그리고 여기서 오류가 날 수도 있는데 , 를 잘 찍었는지 잘 확인!! 필자는 introduce에서 오류가 났다. 그 이유는 앞에 , 를 안 썼기 때문...ㅠㅠㅠ

 

함수 스코프

스코프 ( Scope ) : 변수 유효 범위, 변수에 접근할 수 있는 범위

ES2015년에 let, const 변수 키워드가 등장한다. var는 처음부터 있었던 키워드다. 

var 로 만든 변수는 함수 단위고 let 과 const로 만든 변수는 블록 단위다.

 

스코프에는 전역 스코프와 지역 스코프가 있다. 전역 스코프는 어느 곳에서 변수에 접근할 수 있다

지역 스코프는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에서는 접근할 수 없다. 

 

자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 된다. 그래서 함수 안에 선언한 변수는 함수 안에서만 접근이 가능하다. 이걸 함수 스코프라고 한다. 함수 스코프가 지역 스코프로 볼 수 있다.

 

EX ) var ab = 12;       // -> 전역스코프

      function print() {     // -> 지역(함수) 스코프

      var ab = 123;

      console.log(ab);

}

print();              //   123

 

console.log(ab);      //  12

 

위에서 print() 는 123이 나오고 console.log(ab)는 12가 나온다. 여기서 print 함수에서  console.log(ab)를 출력하기 위해 자신의 함수 안에 변수 ab가 있는지 찾아보고 var ab = 123 을 찾아내면 123을 console 창에 출력을 한다.

여기서 print 함수 안에 변수 ab 를 지우고 다시 하면 어떻게 될까?

 

EX ) var ab = 12;       // -> 전역스코프

 

      function print() {     // -> 지역(함수) 스코프

      console.log(ab);

}

print();              //   12

 

위에 내용과 다르게 12만 나온다. 이는 Scope Chain에 의해 일어나는 현상인데 현재 자신의 scope에서 사용하고자 하는 변수가 없다면 Scope Chain을 통해 해당 변수를 찾게된다. Scope Chain에 대한 이야기는 추후에 정리

 

블록 스코프

 

블록은 중괄호로 둘러싸인 부분을 말한다. 함수 선언할 떄 중괄호로 함수 내용물들을 둘러싸는데 이것을 블럭이라고 한다. 

 

기존 var의 경우 함수 스코프를 가졌기 때문에 함수 내에서만 지역변수가 유지되는 문제가 있었다 그래서 ES2015(ES6)에서 let / const 키워드가 추가되면서 함수가 아닌 일반 블록에서도 지역변수를 선언할 수 있게 되었다.

 

 

* 참고 : "Javascript 완전 정복", 제로베이스, TCP, "함수 스코프란", clap Yeon, 2021.12.11 접속, https://medium.com/@su_bak/javascript-%EC%8A%A4%EC%BD%94%ED%94%84-scope-%EB%9E%80-bc761cba1023