[JavaScript] Day02_1 (Note): 스코프, 함수 리터럴과 익명 함수, 스크립트 태그 위치

2022/3/4

[함수 이어서...]

스코프

: 변수 또는 함수의 유효 범위를 말함

1. 전역 변수 Global Variable
선언 위치: 함수 밖, {} 밖
사용 범위: 자바 스크립트 전체 영역

var num = 10; //전역 변수
      function test(){
         console.log(num); //전역 변수 출력(1)
         num=100; //전역 변수 수정 가능
         console.log(num); //(2)
         var num =200; //지역변수 선언
         console.log(num); //이렇게 하면 처음에 (1)에 있는 num 출력이 undefined가 됨. 지역 변수가 같은 이름으로 선언이 되었기 때문에 지역 변수 num의 우선 순위가 높다. 1번은 언디파인드, 2번은 지역 변수 num에 100이 대입되어 출력. var의 문제점이다.. 
      }
      test(); //함수 호출
      console.log("main: " + num);

2. 지역 변수 Local Variable (var 기준)
선언 위치: 함수 안
사용 범위: 함수 안
*함수 안에서 동일 이름의 변수에 대한 우선순위:지역 > 전역

  var a = "tjoeun";
      function f(){
         var a= "local";
         console.log(a);
      }
      f();
      console.log(a);

 function f(){
        a= "local"; //함수 안에서 var 키워드를 생략하고 만들면 전역 변수로 선언됨.
        console.log(a);
     }
     f();
     console.log(a);

3. 전역 함수
전역 변수랑 동일

console.log(sum(10,20));
      //호이스팅: 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 호출

      function sum (num1, num2){ //전역 함수
         return num1 + num2;
      }
      console.log(sum(1,2));

 //전역 함수
      function func(){
         console.log("전역 함수");
      }
      func();

4. 지역 함수
정의 위치: 함수 내
사용 범위: 정의된 함수를 품고 있는 외부 함수 내

function outerfunc(){ //전역함수
         function innerfunc(){ //지역함수. 
            console.log("지역 함수")
         }
         innerfunc(); //이너펑크를 쓸 수 있는 공간은 전역 함수 내! 은닉하고 싶을때 이렇게 사용. 또는 아우터펑크가 실행될 때만 실행되기 원한다면, 정리를 원한다면. 
      }

      outerfunc(); //아우터펑크를 호출하여 이너펑크를 사용한다.

*변수에 함수를 저장 가능
함수 자체를 레퍼런스 값을 가지고 변수에 저장할 수 있다.
자바 스크립트에서는 함수도 변수에 저장 가능. 변수에 함수를 저장하면 변수를 함수처럼 사용할 수 있다.

function hello(name){ //일반적인 함수의 선언과 사용
         console.log("hello, " +name + " 님!")
      }
      hello("피카츄");

      var func = hello; //함수를 func 변수에 넣음
      func("파이리"); //변수를 함수 명처럼 사용, 매개변수도 동일하게.

*함수를 매개변수 값으로 사용
매개변수도 역시 변수이기 때문에 매개변수로 함수를 받아 사용할 수 있다.

      function hello1(){
         console.log("hello");
      }
      function hello2(){
         console.log("안녕하세요!");
      }
      function execute(func){
         func();
      }
      
      execute(hello1); //hello1을 매개변수 값으로 줘서 execute 안에서 hello1를 실행
      execute(hello2);

*리턴 값으로 함수 사용
함수도 어떤 값이든 리턴 가능, 즉 함수도 리턴 가능

    function createHello(){
         function hello(name){
            console.log(name + "님 안녕하세요")
         }
         return hello; //함수를 리턴
      }

      var result= createHello();
      result("꼬부기");

함수 리터럴과 익명 함수

1. JS에서 데이터를 만드는 방법은 크게 두 가지가 있다.
리터럴 방식과 객체 생성 방식.

2. 함수 리터럴
: 함수 이름을 주지 않고 만들면 된다.
#함수 만들기 3가지 방법
#1. 일반적인 방식
function hello(name){
console.log(name + “님 안녕!”);
}
#2. 리터럴
var hello = function(name){ //이거 많이 쓴다 잘 봐 두기님 안녕!);
}

 var hello = function(name){ //함수 리터럴
         console.log(name + "님 안녕");
      }
      hello("버터풀");

#3. 객체 방식
var hello = new Function(“name”, “concole.log(name + “님 안녕!”);”);

다 똑같이 hello(인자); 해서 호출하면 된다.

3. 익명 함수
: 리터럴 방식의 함수를 익명 함수라 함.
호이스팅 불가능 (호이스팅: 정의문보다 호출 문이 먼저 나와도 함수 정의문을 끌어올려 호출)

자바스크립트 변수 선언 방식

*블록 스코프: {}, if, for, function 안에서 만들어진 유효 범위. 무조건 중괄호 기준. 중괄호 안에서 만들어진 거라 중괄호 안에서만 사용 가능.

*함수 스코프: 블록 스코프 중 함수 범위를 갖는 스코프. 해당 함수의 범위에 따라 여러 범위 가진다

1. var: 함수 스코프: 변수 같은 이름으로 재선 언 가능 (변수 이름 중복으로 인해 문제점 발생할 수 있다.)

var name = "pika";
      console.log(name);
      var name = "Koobu"; //재선언 가능
      console.log(name);

2. let: 블록 스코프: 변수 같은 이름으로 재선언 불가능, 값 수정 가능 (우리가 알고 있던 자바 변수)

let name = "pika";
      console.log(name);
      // let name = "KKo"; //재선언 불가능
      name = "KKo"; //수정 재할당
      console.log(name);

      var name;
      console.log(name);
      let name; //var로 선언한 동일한 이름의 변수가 있어서 에러! 같은 이름 무조건 안됨
      console.log(name)

3. const: 블록 스코프: 변수 같은 이름으로 재선언 불가능, 값 수정 불가능. 상수. 선언 시 값 대입 필수.

const name = "pika"
      console.log(name);
      // const name = "Kkobu" //재선언 불가능
      // name = "pikaa" //수정(재할당) 불가능

      // const test; //값 없이 선언만 불가능
      // console.log(test);
      
      const func = function(){ //변수에 덮어쓰는거 원하지 않을 때 이렇게 만든다.
         //기능 구현
      }
      
      const obj = {a:10, b:function(){}}; //객체가 바뀌면 안된다.. 대체되면 안된다 하면 콘스트로. 근데 a, b 객체 내부에 저장된 데이터는 바꿀 수 있다.

Symbol: Unique 한 값을 만듦.

Symbol(값);

      symbol
      let testS1 = Symbol('1'); 
      let testS2 = Symbol('1'); 
      console.log(testS1,typeof testS2)
      console.log(testS2,typeof testS2)
      console.log(testS1 == testS2); //값은 같지만 1 자체를 하나의 심볼, 상징으로 바꾸어 준다. 그래서 false
      console.log(testS1 === testS2); //false. 값은 같지만 다른 심볼이라 다르다.

(함수 스코프 비교)

      var foo = "문자열";
      if(typeof foo == "string"){
         var result = true; //함수 스코프. 함수 안에 들어가 있는게 아니라 전역 변수로 만들어짐. 그래서 바깥에서도 쓸 수 있다. 
      }else{
         var result = false; //var는 함수 스코프 -> 전역. 함수 안에 들어가 있어야 지역이 됨. 
      }
      console.log(result);

      let foo="문자열";
      if(typeof foo == "string"){
         let result = true; //let은 블록 스코프라서 if 블록 안에서만 사용 가능. 
      }else{
         let result = false; //const로 사용해도 동일하다. 
      }
      console.log(result); //result is not defined 에러

      let foo="문자열";
      let result = false; //이렇게 먼저 선언하면 해결 가능. 
      if(typeof foo == "string"){
         result = true; 
      }else{
         result = false; 
      }
      console.log(result);

스크립트 태그 위치

자바 스크립트는 HTML 내 어디에나 둘 수 있으나 “위치”는 자바스크립의 처리 시점을 결정한다.
[웹 브라우저의 HTML 문서 렌더링 과정]

1. 불러오기: 서버로부터 전달받은 리소스 읽어 들임

2. 파싱 Parsing: (파싱이란 일련의 문자들을 내가 원하는 타입으로 변경하는 것) 웹 엔진이 파서를 통해 문서를 파싱 해 DOM Tree(HTML 문서 구조/ 문서 구조의 모든 내용을 저장함)를 만든다.

3. 렌더링 트리 만들기: 그리기 위한 별도의 트리를 만든다. 돔 트리에는 있지만 화면에서 보이지 않는 건 걸러낸다.

4. CSS 결정

5. 레이아웃

6. 그리기

-내가 만든 js는 body 닫히기 전에 추가.
-로딩할 때 필요한 외부 소스가 있다면 <head> 안에 작성

onload: 웹페이지 (DOM데이터)의 로딩이 끝나는 시점 (이벤트)에 실행됨.
*html 태그 속성: <body onload= “스크립트 함수()”>
*스크립트: window.onload = function() {};
*jquery: $(window).load(function(){});

*onload vs jquery의 ready()
ready: DOM 트리 생성 직후 실행
onload: 페이지 이미지, 외부 파일까지 로드된 후 실행
ready -> onload

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[JavaScript] Day02_1 (Note): 스코프, 함수 리터럴과 익명 함수, 스크립트 태그 위치

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역