[자바스크립트] var 변수와 ES6 이후의 let과 constant 변수, 매개변수와 함수의 인자

var변수는 변수 선언을 하기 위해서 사용하는데 변수를 선언하고 다른 곳에서 재선언을 할 수 있어서 겹칠 수 있고

호이스팅때문에 예상치 못한 출력이 나올 수 있다.

 

참고로 여기서 호이스팅은 변수를 실행하기 전에 이미 선언했던 것처럼 기억해두고 선언한 것처럼 출력하기에 

오류가 생길 수 있다. 그러므로 호이스팅때문에 undefined가 생길 수 있다.

선언과 할당도 하지 않았는데  출력이 되기때문이다.

그래서 var변수를 선언할 때는 함수의 시작부분에서 사용해야한다.

 

ES6에서는 let과 constant를 사용한다.

let은 변할 수 있는 값, constant는 고정된 값인 상수다. 

 

블록(중괄호)안에서만 쓸 수 있고 let은 재할당은 가능하지만 재선언은 할 수 없다.

그러나 const는 재할당,재선언을 할 수 없다.

재선언이 가능해서 코드가 꼬이는 var변수의 약점을 보완한다 .

var변수 사용시 나오는 호이스팅이 없다 . 

 

매개변수와 함수의 인자의 관계

함수를 실행하기 위해서 필요하다고 지정하는 값을 매개변수라고한다. 

함수 옆에 괄호로 표시하는 것이다.

함수를 실행할 때 넘겨주는 값을 함수의 인자(인수 , argument)라고한다.

 

매개변수로 값을 지정하고 함수의 인자로 값을 매개변수로 넘겨준다.

 

return문은 함수를 반환, 종료하는 값인데 

함수를 실행한 결괏값을 함수 밖으로 넘기는 문이다.

return문으로 반환된 값은 함수를 실행한 위치로 넘겨진다. 

 

return sum;

이라고 하면 

함수를 실행한 부분의 변수로 넘겨진다.

 

 

변수를 선언하고 값을 설정하고 그 값으로

 

함수의 정의문 

function 함수명(매개변수1, 매개변수2 ...매개변수n){

js코드

}

함수명(함수의 인자1, 함수의 인자2, 함수의 인자3...함수의 인자n);

 

함수의 인자를 매개변수에 전달하여 데이터를 불러오는 것이다.

 

함수의 선언과 함수의 호출 위치를 주의하라.

 

함수의 return문 ==> 함수를 반환하거나 종료해서 출력하는 기능을 한다. 

 

변수에 값을 넣는 것뿐만 아니라 메서드를 구현해서 값을 넣을 수 있겠지? 

 

var num1 = parseInt(prompt("a?"));

var num2 = parseInt(prompt("b?"));

add(num1,num2);

 

function add(a , b){

var sum = a+b;}

으로 함수의 인자는 위치에 관계없이 매개변수와 매칭시킬 수 있겠지?

 

익명함수는 함수명에 이름이; 없는 것을 말하는데 익명함수 자체가 식이 될 수 있기 때문에 

메서드나 값을 넣는 것처럼 변수에 넣을 수 있겠지? 

예를 들어서 

 

var variable  = function(a , b){

  return a + b;

}

 

var sum = variable (10, 20);

sum

30;

 

메서드는 값을 변수에 넣는 것처럼 ==> 익명함수는 함수명이 없기에 어떻게 쓸까? 그래서 변수에 익명함수를 넣어서 사용한다. 

 

화살표 함수에서

매개변수의 괄호나 중괄호를 생략할 수 있는데 

 

매개변수의 괄호는 

매개변수 1개인 경우 매개변수의 괄호를 생략하거나 

 

매개변수가 2개인 경우 중괄호 안에 식이 1개라면 return을 생략할 수 있다.

 

 

전역변수 지역변수 // 전역함수 지역함수 

 

전역 자체는 자바스크립트 어디에서든 사용할 수 있는 변수이고 , 

지역 자체는 해당 함수 스코프에서만 사용할 수 있는 변수이다.

 

 

 

var N => 자체는 전역 변수이고 

 

function 함수명(){

 var A; => 지역 변수이다.

}

<주의! 함수 안의 var 지역 변수에서 var이 없으면 전역변수로 처리된다 !>

 

 

function 함수명A(){

 js코드  => 전역으로 쓸 수 있는 함수

}

 

function 함수명B(){

 function 함수명C(){

 js코드 => 지역 함수 그 함수 스코프내에서만 사용이 가능하다 

}

}

 

this키워드로 객체생성자함수를 사용하여 객체를 생성할 수 있다 .

function Number(A,B,C)

 this.userA = A;

 this.userB = B;

 this.userC = C;  생성한 객체에 속성과 함수를 등록할 수 있다 .

 

this.속성명 = 새값;

this.함수명 = function(){

 JS코드}

 

var 참조변수 (이름) =new 함수명();

 

this.속성명;

this.함수명 = function(){}으로 생성한 객체에 대한 정보들을 만든 후 객체를 부를 때 사용한다 .

 

var Obj1 = new 생성자;

document.write(Obj1.생성한 객체의 함수());

 

프로토타입을 사용하여 등록한 함수는 객체 생성자 함수에서 생성된 객체를 공유할 수 있다 ==> 메모리를 아낄 수 있겠지?

 

 

생성된 객체에 대한 속성과 생성된 객체에 대한 함수를 생성한 객체에 사용할 수 있지?

 

여기에 프로토타입(원형)을 사용하여

 

 

function 함수명(매개변수,,,){

 this.속성명 = 새 값 ;}

 

함수명.prototype.함수명 =function() {

 js코드

}

 

var 참조변수 (생성 이름) = new 함수명();

 

 

var의 경우 호이스팅으로 인해서 변수 선언해도 이미 저장되어 있어서 팀 플레이의 경우 오류 발생 가능.

그러므로 let이나 const변수를 사용하는데 주로 let을 사용한다 .

 

let은 재할당은 가능하지만 재선언은 불가하고 

let , const모두 블록 안에서만 쓸 수 있다.

그리고 모두 호이스팅이 없기때문에 변수 꼭 사용해야한다 .

 

만약 var을 사용할 경우는 호이스팅 등으로 인해서 함수의 시작부분에서 선언해야한다 . 그래야 함수가 자동적으로 저장되어서 생기는 오류를 해결할 수 있다.

 

화살표 함수는 함수선언을 더 간단하게 표현한다. 

익명함수에서만 사용할 수 있는데 

const A = function() {

return "a"}

 

const A = () => {return "a"}

화살표 함수로 함수 선언인 function()을 더 간단하게 쓸 수 있는데 리액트에서 자주 사용하니까 주의하기