[JS] 정리: 함수(function) / Return / 변수(var, let, const) / 객체 / 생성자

공부 영상

 

 

 함수의 기본 형태

function 함수이름(매개변수, 매개변수) {

    함수내용;

}

 

좀 이상하긴 하지만 아래와 같이 정의해보겠습니다.

function a01() {  // 함수 a02의 부모 함수, 함수 a03의 부모 함수

    function a02() {  // 함수 a01의 자식 함수, 함수 a03의 부모 함수, 함수 a04의 형제 함수

        function a03() {  // 함수 a01의 자식 함수, 함수 a02의 자식 함수

        }

    }

    function a04() {  // 함수 a01의 자식 함수, 함수 a02의 형제 함수

    }

}

 

 

 

 Return

함수 내에 사용하는 경우, 해당 함수를 종료. 뒤에 다른 내용이 있더라도 뒷내용은 실행하지 않음.

ex)

JS 코드	개발자도구 - 콘솔창
function add(a, b) {     console.log(a);     console.log(b);     return; // 함수 스톱. 함수를 사용해도 아래 내용 실행되지 않음.     console.log(a+b); } add(100,200);	100 200

 

함수 내에서 값을 도출하고 싶은 경우, 함수 내에서 얻어낸 값을 return을 통해 상위(직계부모)에서만 사용 가능

ex)

JS 코드	개발자도구 - 콘솔창
function add2(a, b) {     return a + b; // 함수 add2에 매개변수 a와 b를 더한 값이 저장됨 } let add2Result = add2(100,200); //return을 통해 저장된 값 반영 console.log(add2Result);	300

 

 

 

 변수

전역 변수 : 스크립트 전체에서 사용할 수 있는 변수

지역 변수 : 함수나 특정 문 내부에서만 사용할 수 있는 변수 (자식 함수에서도 사용 가능, 부모나 형제 함수에서는 당연히 사용 불가)

ex)

	JS 코드	개발자도구 - 콘솔창
전역변수	let a = 1; // 전역 변수 (어느 함수에도 들어가지 않은 상태) function add3(b) {     return a + b; // 전역변수는 함수 내부여도 사용 가능 } let add3Result = add3(300); //return을 통해 저장된 값 반영 console.log(add3Result);	301
지역변수	function add4(b) {     let a = 1; // 함수 add4 내의 지역 변수     function add5(c) {         return a + c;  // 함수 add4 내 자식함수에서도 지역변수 사용 가능     }     return add5(b); // 함수 add5의 값(a+b)을 저장.     //이 때, 함수 add5의 매개변수 c는 함수 add4의 매개변수 b의 값을 가지게 된다. } let add4Result = add4(400); //함수 add4에서 return을 통해 저장된 값 반영 console.log(add4Result); console.log(a);  // 함수 add2 바깥이기에 변수 a 없음 = 오류 발생	401 ☒Uncaught ReferenceError: a is not defined at ~~~

 

 

var : 값 변동이 가능한 변수 선언. 함수 내부에서 사용 시, 지역 변수

let : 값 변동이 가능한 변수 선언. 중괄호(블록) 내부에서 사용 시, 지역 변수

const : 값 변동이 불가능한 변수 선언. 중괄호(블록) 내부에서 사용 시, 지역변수

ex)

	JS 코드	개발자도구 - 콘솔창
var	var a = 1; // 변수값 변동 가능 a = 203; // 오류x console.log(a);	203
	function varFunc() {     var b = 2; // 함수 내부에서 정의 } console.log(b); // 오류 발생	☒Uncaught ReferenceError: a is not defined at ~~~
	var c = 100; if(c=100) {     var d = 3; // 블록(중괄호) 내부에서 정의 } console.log(d); // 오류x	3
let	let a = 1; // 변수값 변동 가능 a = 203; // 오류x console.log(a);	203
	function letFunc() {     let b = 2; // 함수 내부에서 정의 } console.log(b); // 오류 발생	☒Uncaught ReferenceError: a is not defined at ~~~
	let c = 100; if(c=100) {     let d = 3; // 블록(중괄호) 내부에서 정의 } console.log(d); // 오류 발생	☒Uncaught ReferenceError: a is not defined at ~~~
const	const a = 1; // 변수값 변동 불가능 a = 203; // 오류 발생 console.log(a);	☒Uncaught ReferenceError: a is not defined at ~~~
	function constFunc() {     const b = 2; // 함수 내부에서 정의 } console.log(b); // 오류 발생	☒Uncaught ReferenceError:a is not definedat ~~~
	const c = 100; if(c=100) {     const d = 3; // 블록(중괄호) 내부에서 정의 } console.log(d); // 오류 발생	☒Uncaught ReferenceError: a is not defined at ~~~

 

Tip. 타인과 공동 작업 시, const와 객체를 이용하면 전역변수 정의로 부딪힐 일이 적다.

ex)

JS 코드	개발자도구 - 콘솔창
const kingji = {  // 변수값을 객체로 설정     startK: "Keen on",  // 형태  key:value     startI: "Insight",     startN: "Nimble",     startG: "Generator", }; console.log(kingji.startK); console.log(kingji.startI); console.log(kingji.startN); console.log(kingji.startG);	Keen on Insight Nimble Generator

 

 

 

 객체

변수가 가질 수 있는 값 중 한 종류. 속성과 매서드(기능, 동작)를 전부 가질 수 있다.

 

기본 형태

var 변수이름 = {     속성 : 값,     속성 : 값 };

var 변수이름 = {}; 변수이름.속성 = 값; 변수이름.속성 = 값;

 

여기서 속성은

단순히 number, string 등의 값을 가질 수도

함수 같은 기능이나 동작을 값으로 가질 수도 있다.

ex)

JS 코드

개발자도구 - 콘솔창

const cat = {  // 변수값을 객체로 설정     fur: "black",  // 속성(property)     age: 3+" years",  // 속성(property)     eye: "green",  // 속성(property)     like: "물고기 장난감",  // 속성(property)     liketodo: function() {  // 매서드(method)         console.log(this.like + " 가지고 놀기");         // this는 함수의 주체입니다. 즉, 매서드 cat.liketodo에서 cat에 해당합니다.     } } console.log(cat); console.log(cat.fur);  // 객체 cat의 속성 fur 값을 콘솔로 보이기 console.log(cat.age); console.log(cat.eye); console.log(cat.like); cat.liketodo(); // 객체 cat의 매서드 liketodo 실행 (console.log 랑 비슷~)

{fur: "black", age: "3 years", eye: "green", like: "물고기 장난감", doingNow: ƒ} black 3 years green 물고기 장난감 물고기 장난감 가지고 놀기

 

 

 

 생성자

같은 key를 가진 객체를 쉽게 만들 수 있는 틀

 

function 생성자이름(속성1, 속성2) {

    // 매개변수 위치에 속성값을 써서 작동하는 함수
    // 생성자 이름은 주로 대문자 영문으로 시작함
    this.속성1 = 속성1,
    this.속성2 = 속성2,

    this.속성3 = 속성3,

}

var 변수이름 = new 생성자이름(속성1 값, 속성2값);  // 생성자로 만들어진 객체 = 인스턴스(instance)

// 인스턴스의 경우, new를 사용해야 this가 변수로 인식됩니다.

 

ex)

JS코드	개발자도구 - 콘솔창
function Fruits(name, color, price) {     this.name = name,     this.color = color,     this.price = price+"원",     this.introduce = function() {         console.log(this.name + "의 색은 " +  this.color + "입니다. 가격은 " + this.price + "입니다.")     } } var apple = new Fruits("사과", "빨강", 100); var banana = new Fruits("바나나", "노랑", 200); apple.introduce(); banana.introduce();	사과의 색은 빨강입니다. 가격은 100원입니다. 바나나의 색은 노랑입니다. 가격은 200원입니다.