변수 선언 및 함수 선언

REACT

변수 선언 및 함수 선언

dev-js 2024. 3. 7. 16:57

ES2015 전에는 var를 사용하는 것이 변수를 선언하는 유일한 방법이었다.

하지만 이제는 더 나은 기능을 제공하는 몇 가지 변수 선언 방법이 추가되었다.

const

const는 값을 변경할 수 없는 변수이다.

우리가 작성하는 자바스크립트 코드에서는 변경해서는 안 되는 변수가 많다.

const name = "JS";
name = true;
console.log(name); // Error

let

js에서 구문적인 변수 영역 규칙을 지원한다.

let은 값을 변경할 수 있는 변수이고, 지역변수로 사용 가능하다.

js에서는 중괄호를 사용해 코드 블록을 만든다.

const title = "js";
if (title) {
	let title = "python";
    console.log(title); // python
}
console.log(title); // js

let 키워드를 사용하면 변수의 영역을 코드 블록 안으로 한정시킬 수 있다.

let을 사용하면 블록 안에서 글로번 변수를 보호할 수 있다.

let을 사용해 루프 카운터 변수 i의 영역이 블록으로 제한되어 각 박스를 클릭하면 해당 박스를 루프에서 생성할 때 사용한 i 값이 정상적으로 표시된다.

const container = document.getElementById("container");

let div;
for (let i = 0; i < 5; i++) {
	div = document.createElement('div');
    div.onClick = function() {
    	alert("this is box #" + i)
    };
    container.appendChild(div);
}

문자열

템플릿 문자열은 공백(빈칸뿐 아니라 탭이나 개행 문자 등을 포함)을 유지한다.

그렇기 때문에 문자열 덩어리 그 자체로 참조가 가능하다.

함수 선언

함수 정의는 function 키워드로 시작하고, 그 뒤에 함수 이름이 온다. 문장은 중괄호 사이에 들어간다. 일반적인 함수 선언 방식이다.

function Hello() {
	console.log("Hello")
}

함수를 만드는 다른 방법으로는 함수 표현식이 있다

const Hello = function() {
	console.log("Hello")
};

이 둘은 차이점이 있는데 함수 선언을 하기 전에 함수를 호출해도 되지만, 함수 표현식에 의해 만들어진 함수를 함수 표현식이 실행되기 전에 호출할 수 없다.

hi();

const hi = function() {
	console.log("hi");
} // Error

일반적인 함수 선언 방식이 더 전역적이라고 할 수 있다.

디폴트 파라미터

ES6 명세에는 디폴트 파라미터가 추가되었다.

const defaultInfo = {
	name: {
    	first: "H",
        last: "JS",
    },
    favActivity: "gotogym",
};

function Activity(a = defaultInfo) {
	console.log(`${a.name.last}는 ${a.favActivity}을 즐겨합니다.`);
}

화살표 함수

화살표 함수를 사용하면 function 키워드 없이도 함수를 만들 수 있다. 화살표 함수에서는 return을 사용하지 않아도 식을 계산한 값이 자동으로 반환된다.

const myName(firstName, lastName) {
	return `${firstName} ${lastName}`;
}

const myName = (firstName, lastName) => `${firstName} ${lastName}`;

함수가 파라미터를 단 하나만 받는 경우 파라미터 주변의 괄호를 생략해도 된다.

화살표 함수는 새로운 this 영역을 만들어내지 않는다.

일반 함수는 this를 새로 바인딩 한다.

const food = {
	menu: ["김밥", "라면", "돈까스", "우동", "카레"],
    print: function(delay = 1000) {
    	setTimeout(function() {
        	console.log(this.menu.join(","));
        }, delay);
    }
};

// Error
food.print(); // Cannot read property 'join' of undefined

이 오류는 this.menu의 join 메서드를 호출하려고 시도했기 때문에 발생했다.

this는 window 객체이다.

print 프로퍼티를 정의하는 function(delay=1000) {...}의 본문 안에서는 this가 menu의 객체인 반면, 그 프로퍼티 안에서 setTimeout을 호출하면서 정의한 function() {...}의 this는 window 객체이다.

const food = {
	menu: ["김밥", "라면", "돈까스", "우동", "카레"],
    print: function(delay = 1000) {
    	setTimeout(() => {
        	console.log(this.menu.join(","));
        }, delay);
    }
};


food.print(); // 김밥, 라면, 돈까스, 우동, 카레

다시말해, 화살표 함수는 새로운 this 영역을 만들어내지 않고 제대로 유지된다.

728x90

현재글변수 선언 및 함수 선언

기록의 힘