노마드코더__바닐라 JS로 크롭웹만들기 수업노트 #1 - 변수와 return.

자바스크립트에서 변수(variable)

 

JS(Java Script)에서는 변수는 3가지가 있다.

 

• const   재선언 금지, 재할당 금지
• let       재선언 금지, 재할당 가능
• var      재선언 가능,, 재할당 가능

 

코드를 작성하면 아래와 같다.

const a = b;
const a = c;
//재선언 금지

const a = b;
a = c;
//재할당 금지

let a = b;
let a = c;
//재선언 금지

let a = b;
a = c;
//재할당은 가능

var a = b;
var a = c;
a = d;
//재선언, 재할당 가능

 

const는 한번 변수를 선언하면 변수의 수정이 아예 불가능하다.  변수의 내용을 바꿀수도 이미정한 변수를 다시 선언 할 수 도 없다. 언어를 통해 보호받을 수 있으나 업데이트를 하지않는 변수에 사용이 적당하다.

 

let은 변수를 재선언은 안되나, 재할당은 가능하여 변수의 내용을 수정하여 웹사이트의 업데이트가 자주 필요한 코드의 사용이 적절하다.

 

var은 재선언, 재할당 모두 가능한 변수이며 일반적으로 가장 많이 쓰이는 변수이지만, 언어를 통한 보호를 받기 어렵다. 나중에 코드가 길어지고 복잡해질때 변수를 사용한것을 모르고 변수를 재선언, 재할당 하였을 때 큰 버그로 우리를 혼란해 빠트릴 수 있다. 즉 변수를 덮어 씌우기 좋기때문에 브라우저에서 경고를 해주지 않는나. 사용은 자재하는 것이 좋을 것 같다.

 

---

 

return의 기능은 함수를 중단하고, 주어진 값을 함수 호출 지점으로 반환하는 역할을 한다.

즉 값을 토해낸다.

 

const age = 29; // 변수 age 선언
function calculateKrAge(ageOfForeigner){
    console.log(ageOfForeigner + 2);  // 결과값:  31 : 함수 alculateKrAge 선언
};
const krAge = calculateKrAge(age); // "calculateKrAge"함수에 변수 "age"를 담은 "krAge"선언

console.log(krAge);  // 결과값 : undefinded : 변수 krAge출력하였으나 값이 정의되지 않는다.

위와 같이 return을 사용하지 않고 console.log를 사용하면 값이 바로 출력이 된다.

하지만 krAge = calulateKrAge(age) 라는 변수를 선언한후

console.log(krAge); 코드를 작성하면 콘솔에서는 "undefinded" 라는 값이 출력된다. 즉 함수의 값이 함수안에만 독립적으로 존재하게 되고 우리에게 결과를 보여주지 않는다. 그래서 console.log(krAge)의 값은 undefinded가 나온다. 이를 해결해주기 위해서는  return이 필요하다.

 

const age = 29;
function calculateKrAge(ageOfForeigner)
{
    return ageOfForeigner + 2;  // calculateKrAge함수는  ageOfForeigner에서 +2를 더한 값을 얻게된다.
};
const krAge = calculateKrAge(age); //  "calculateKrAge"함수에 변수 "age"를 담은 "krAge"선언

console.log(krAge);  // 결과값 : 31 : 변수 krAge값이 출력된다.

해당 코드 처럼 return을 작성하면 추후 변수값을 셋팅할 수가 있다.