거인의 코딩일지
변수와 자료형 본문
728x90
변수 선언 위치에 따른 구분!
- JAVA
public class Student{
// 자바에서 나눠지는 영역 3곳
//필드
//- class 에서 선언될 변수 선언된 곳
//- 멤버변수 선언
private String name; // = 인스턴스 변수
public static String schoolName; //= static 변수, class변수
//생성자
//메소드
public void method(String name){
//매개변수(==파라미터)
int num = 10; //= 지역변수
if(num > 10){
int a = 20 //= if문에 한정된 지역변수
}
}
}
- JavaScript
//(js파일 / script 내부 라고 생각)
var num1; // 전역 변수
um2 = 200; // 전역 변수 (자바스크립트는 변수명 앞에 아무런 키워드 없으면 전역변수)
function test(){
var num3; // 지역변수
num4; // 전역 변수(키워드가 없기 때문)
//function이 끝나도 밖에서 호출하면 사용가능
if(true){
var num5 = 500; // 지역 변수
// 지역변수지만 if문을 벗어난 function까지 사용 가능
num6; //전역변수
}
}
------------------------------------------------------------------------------
var str ="JS 코드는 함수가 아닌 JS 파일 또는 script 태그 내부에 바로 작성시"
+"HTML 랜더링 시 바로 수행된다.";
console.log(str);
var num1 = 100;
num2 = 200;
console.log(num1);
console.log(num2);
// 콘솔창에 별다른 지정 없어도 바로 나타난다.
function test(){
var num3 = 300;
num4 = 400;
console.log("함수 내부 num3 : " + num3);
console.log("함수 내부 num4 : " + num4);
// 호출하지 않으면 콘솔창에 나타나지 않는다.
if(true){
var num5 = 500;
num6 = 600;
}
console.log("if문 종료 후 num5 : " + num5); // function 지역변수
console.log("if문 종료 후 num6 : " + num6); // 전역변수
// 둘다 콘솔창에 나타남!
}
// 호출
test();
// console.log(num3); // num3는 나타나지 않으나
console.log(num4); // 주석처리하면 num4는 콘솔창에 나타난다!
// **script 언어는 중간에 에러 발생 시 해석을 멈추기 때문
Java Script 의 변수 선언 방식!
Java Script는 변수 선언시 자료형이 아닌 var, let, const, (미작성) 중 하나를 골라서 작성한다
var : 변수, 변수명 중복 가능 중복이되면 덮어씌어지고 함수레벨 scope
let : 변수, 변수명 중복 불가, 블록{ }레벨 scope
const : 상수, 변수명 중복 불가, 블록{ } 레벨 scope
자주 사용되는 순위는
const > let > var> 미작성 인데 미작성은 추천하지 않는다!
함수레벨scope 와 블록레벨scope 란?!
간단하게 표현하면
함수레벨스코프는 어디에 쓰나 전역변수가 선언되지만
블록레벨스코프는 함수에 넣으면 함수내에서만 사용하고
함수 밖에서 사용하면 전역변수로! 사용가능하다!!
Java Script의 자료형
JS는 변수 선언 시 별도의 자료형을 지정하지 않는다,(변수에 대입되는 값(리터럴)에 의해서 자료형이 결정됨)
- string(문자열/ "abc", 'abc' 둘이 동일하다.)
- number(숫자 / 100, 3.14, -5.2 등 정수와 실수 둘다 동일하게 number이다.)
- boolean(논리값/ true, false)
- object (객체 / 배열(Array), JS객체 {K : V, K : V})
- Java 에서 Map와 비슷함!
- function(함수)
- undefined(자료형이 정의되지 않은 변수 > 값이 대입되지 않은 변수)
- **null은 참조하는게 없음을 나타내는 리터럴 (자료형 X)
- **typeof 변수명을 사용하면 해당 변수의 자료형을 반환하여 알 수 있다!
function에 대해서 알아보자!
function은 함수지만 두가지로 나눌수 있다
아래 코드를 보고 확인해 보자!
// function
// 1) 변수명 == 함수명
const fnSum = function(n1, n2){
// 익명함수지만 fuSum 이름을 가지고 있다.
return n1 + n2;
}
// 함수명만 작성하는 경우 -> 함수에 작성된 코드 자체가 반환
typeBox.innerHTML += "<br><br>fnSum : "+ fnSum + "/" + typeof fnSum;
//함수명(매개변수) == 함수 호출(함수 코드 수행됨)
typeBox.innerHTML += "<br></br> fnSum(1,2) : " + fnSum(1,2);
// 2) 함수를 매개변수로 전달하는 형태
function plusFn(num, fn){
return num + fn();
}
const result = plusFn(100, function(){
return 30-10;
})
// result 안에 들어있는 함수의 리턴 값 즉! 30 - 10의 결과를 위의 plusfn에 넣어주면
// plusFn 함수의 리턴값은 100 + 20 으로서 결과는
typeBox.innerHTML += "<br><br>result : "+ result;
// 120 이 나오게 된다!
728x90
'코딩 > JS' 카테고리의 다른 글
간이 계산기 만들기(version 2!) (0) | 2023.03.05 |
---|---|
간이 계산기 만들기!!(version 1) (0) | 2023.03.04 |
요소 접근 방법(간이 KakaoTalk 만들어보기) (0) | 2023.03.04 |
요소 접근 방법 (0) | 2023.03.04 |
데이터 입출력(innerText 응용) (1) | 2023.03.04 |