[JavaScript] 전역, 지역, 객체, 변수, 상수, 속성, 매서드, 함수, 매개변수(인자), 인수 개념 정리

자바스크립트 헷갈리는 용어 정리

•  전역  : 코드가 사용되는 프로그램 전체 또는 파일 전체
  • 전역은 영어로 Global, 우리가 사는 지구 전 지역
    
    
    
•  지역  : 프로그램이나 파일 안의 특정 함수, 모듈 등과 같이 특정 범위
  • 지역은 영어로 Local, 그 범위를 특정할 수 있는 지역
    
    
    
•  객체  : 자바스크립트 프로그램에서 인식할 수 있는 모든 대상
  • key와 value의 집합 { }
  • 웹브라우저, 웹문저 관련된 것
  • 여러 정보를 가지고 있는 복합 자료형
  • '객체'에 대한 자세한 내용은 https://dev-ini.tistory.com/39
    
    
• 전역 객체  : 전 지역(코드가 사용되는 프로그램 전체 또는 파일 전체)에서 사용할 수 있는 객체
  • window객체로, 모든 객체가 소속된 객체, 창이나 프레임을 의미
  • 웹브라우저에서는 window,
  • Node.js 환경에서는 global 이라고 부름
    
    
    
•  전역 변수  : 스크립트 소스 전체에서 사용할 수 있는 변수
  
•  지역(로컬)변수  : 한 함수에서만 사용할 수 있는 변수
  
• '전역변수, 지역변수'에 대한 자세한 내용은 https://dev-ini.tistory.com/48

•  변수  : 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’
  • 온라인 쇼핑몰 애플리케이션을 구축하는 경우 상품이나 방문객 등의 정보를 저장할 때 변수를 사용
  • let키워드를 사용해 변수를 생성
  • 할당 연산자 =를 사용해 변수 안에 데이터를 저장

let message;
message = 'Hello';

let message;
message = 'Hello!';
alert(message);

let message = 'Hello!'; 
alert(message);

 

• 변수는 한 번만 선언해야함. 같은 변수를 여러 번 선언하면 에러가 발생
• 예약어는 변수명으로 사용할 수 없음. 자바스크립트 내부에서 이미 사용 중이기 때문 (예약어 예시: let, class, return, function)
• 변수 명명 규칙
  • 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있음
  • 첫 글자는 숫자가 될 수 없음
    
    
    
    

•  상수  : 변화하지 않는 변수
  • 상수를 선언할 땐 let 대신 const를 사용
  • 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생
  • 객체와 배열은 주로 상수(const) 사용한다
  • 대문자 상수: 기억하기 힘든 값을 변수에 할당해 별칭으로 사용 (‘하드 코딩한’ 값의 별칭을 만들 때 사용)
  • pageLoadTime의 값은 페이지가 로드되기 전에는 정해지지 않기 때문에 (대문자를 사용하지않고) 일반적인 방식으로 변수명을 지음. 하지만 이 값은 최초 할당 이후에 변경되지 않으므로 여전히 상수임
  • 변수 이름 짓기: (1)사람이 읽을 수 있는 이름, (2)줄임말이나 짧은이름 피하기, (3)최대한 서술적이고 간결하게, (4)자신만의 규칙이나 소속된 팀의 규칙을 따르기
    
    
    
    
•  var, let, const 
  • 브라우저에서 let이나 const가 아닌 var로 선언한 전역 함수나 전역 변수는 전역 객체의 프로퍼티가 됨
  • '관습’에 따라 브라우저에서는 window, Node.js에서는 global이라는 이름으로 불릴 때가 많음. globalThis는 제안 목록에 추가 된 지 얼마 안 된 기능이기 때문에, 비 크로미움 기반 브라우저에선 지원하지 않음(폴리필을 구현하면 사용 가능)
  • 프로젝트 전체에서 꼭 필요한 변수만 전역 객체에 저장하도록 하고, 전역 변수는 가능한 한 최소한으로 사용
    • 기본적으로는 const를 사용한다.
    • 재할당이 필요한 경우에만 let을 사용한다.
    • var는 ES2015에서는 쓰지 않는다.
      
      
      
      
•  var, let, const의 차이 

     "변수 중복 선언" 

 

• var는 변수의 중복 "선언"이 가능하지만,  let과 const는 변수의 중복 "선언"이 안된다.

// var는 중복 선언이 가능하다

var a = 1;
var a = 2;

// 가능

// let과 const는 중복 선언이 안된다

let a = 1;
let a = 2;

const a = 1;
const a = 2;

// 둘다 불가능

 

 

 

     "변수 재할당" 

 

• let은 변수의 재"할당"이 되지만,  const는 변수의 재"할당"이 안된다.
• const로 선언한 변수는 프로그램이 죽기 전에 값이 절대 바뀔 수 없음
• let으로 선언한 변수는 프로그램이 죽기 전에 값이 계속 바뀔 수 있음
• let이랑 const는 모든게 똑같은데, 한 가지 다른 것이 const는 재할당이 안된다는 것이다.

// let은 재할당이 가능하다

let a = 1;
a = 2;

// 가능

// const는 재할당이 안된다

const a = 1;
a = 2;

// 불가능

 

자세한 내용은 hoisting과 변수 게시글을 참고하자!  https://dev-ini.tistory.com/44

 

 

 

•  속성(property)  : 객체에서 값을 담고 있는 정보 (키+값)
  
  
•  매서드(method)  : 객체가 어떻게 동작할지를 선언해놓은 함수 (객체 안에 들어있는 함수)
  • Window.alert(”안녕하세요?”) 에서 Window는 객체, alert()는 매서드
    
    
• 이해를 돕기 위한 비유
  • 동물이라는 객체가 있는데  '특징'이 있으면 (종이 무엇이고, 색깔이 어떻고 등등) 그게 속성(Property)이다. 객체의 정보
  • 그리고 그 객체(예시에서는 animal)의 속성을 또다른 객체(예시에서는 window)의 능력을 이용해서 표현할 수 있는데, 그 '능력', 즉 '기능', '동작', '행위'가 매서드(Method)이다. 어떻게 동작하는지에 대한 함수
    
    

let animal = {
  name: "rabbit",  // 속성(property)
  color: "white",  // 속성(property)
  leg: 4  // 속성(property)
};

alert (animal.name); // rabbit    // alert()는 window객체의 매서드(method)이다.

제가 든 예시는 아주 단적인 예시로, 속성과 매서드는 훨씬 포괄적인 개념이니 이해를 돕기 위한 참고 정도로만 하시길 바랍니다!

 

 

•  함수(function)  : 숫자를 담는 상자.
  • 연산을 쉽게 하기 위해서 공식을 만들어서 넣어두고, 필요할때 꺼내쓰는 것
  • '함수'에 대한 자세한 내용 (1탄) https://dev-ini.tistory.com/40
  • '함수'에 대한 자세한 내용 (2탄) https://dev-ini.tistory.com/48
    
    
    
    

•  매개변수 (인자=parameter)  : 함수를 위해 필요하다고 지정하는 값  (선언 시 쓰이는 용어)
  • 함수를 실행하는 데 필요한 '입력'
  • 함수 선언 방식 괄호 사이에 있는 변수
  • 임의의 데이터를 함수 안에 전달함

•  인수 (=argument)  : 함수를 호출 할 때 매개변수에 전달되는 값 (호출 시 쓰이는 용어) 
  • 함수를 실행하는 데 필요한 '입력' 

 

function showMessage(from, text) { // 인자: from, text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello!  // 인수: 'Ann', 'Hello'
showMessage('Ann', "What's up?"); // Ann: What's up?  // 인수: 'Ann', 'What's up?'

(1) showMessage 라는 함수는 매개변수(인자) from 과 text를 가진다.
(2) 알람창에는 (from : text) 구조로 된 값이 나오게 한다.
(3) showMessage 함수를 호출하는데, 호출하면서 (’Ann’, ‘Hello!’)라는 두가지 인수를 써준다.
(4) 그러면 이 'Ann', 'Hello!' 인수는 각각 함수에 전달 되는데, 그 과정에서 from과 text 인자에 각각 복사된다.
(5) 따라서 Ann: Hello! 라고 알람창에 출력이 된다. 마찬가지로 Hello!를 바꿔서 ‘What’s up’으로 출력하면 Ann: What's up?이 나온다.

 

즉, 함수 선언 시 매개변수를 나열하게 되고, 함수를 호출할 땐 인수를 전달해 호출한다.
위 예에서 함수 showMessage는 from과 text라는 두 매개변수(인자)를 사용해 선언되었고, 그 후 호출 시엔 from, Hello라는 두 인수를 사용해 호출되었다.

 

 

 

참고 자료

https://ko.javascript.info/