JavaScript_Study

박종호·2024년 1월 9일
frontendjs
0

FrontEnd

목록 보기
11/17
post-thumbnail

🔴 변수

변수란?

변수는 ‘변할 수 있는 수’, ’변할 수 있는 정보’라는 뜻입니다.

프로그램을 만들때는 필요한 숫자나 문자와 같은 데이터를 보관할 공간이 필요한데, 이러한 공간에 들어가는 데이터가 무엇인지 이름을 붙이는 포스트잇 같은 역할을 하는 것이 변수입니다.

🤔. 그럼 변수는 왜 쓰나요?

👉. 데이터를 저장하고, 이름을 붙여서 우리가 쓰기 위해서 사용합니다!
데이터를 저장해놓고 필요할 때 써야하니까요!

💡 변수의 왼쪽 `x, y, z`값과 오른쪽 `3, 4, 5`값은 모두 메모리 상에 올라갑니다. 
var x = 3;
let y = 4;
const z = 5;

변수는 선언하고, 할당하고, 사용할 수 있습니다. 또한, 변수는 ‘변할 수 있는 수’이므로 const를 제외하고 지정된 값을 계속 바꿀 수 있습니다.

=라는 기호는 equal로 쓰였지만, 여기서는 할당으로 씁시다!

<!DOCTYPE html>
<html>
<head>
	<title>변수</title>
</head>
<body>
	<script>
	    let 나변수 = 10; // 1번
      나변수 = 20; // 2번
      나변수 = 30; // 3번
	</script>
</body>
</html>


변수명을 정할 때

  • 변수이름은 $, _ 를 제외한 공백, 특수문자, 구두점(글의 여러 가지 경계를 구분하기 위해 사용되는 반점(,), 온점(.), 물음표(?) 등등…)을 사용할 수 없습니다.
  • 첫 글자는 숫자가 될 수 없습니다.
  • 대소문자를 구별합니다.
  • 예약어가 쓰일 수 없습니다.
  • 유니코드 문자도 사용할 수 있습니다. 그러나 실무에는 보통 영어를 사용합니다.

변수의 특징

  • 변수를 선언 할 때는 var, let, const의 키워드를 사용할 수 있습니다. var, let 두 가지 키워드는 변수를, const 키워드는 변경할 수 없는 수 즉, 상수를 의미합니다.
    🔥let,var로 선언된 변수는 변경이 가능하지만, const는 변경할 수 없어!! 즉, 상수야(정상수 아님)
  • var, let, const 키워드는 변수를 선언 할 때 한번만 사용합니다.
  • var 키워드는 초기화가 필요 없고 재할당이 가능합니다. 또한 생략할 수도 있습니다. 하지만 var 키워드가 생략된 변수는 엄격모드(strict mode)에서는 에러가 발생됨으로 권장되지 않습니다.
    🔥var는 퇴물이래~
  • let과 const는 블록-레벨 선언으로 불리며, 선언된 코드 블록 밖에서 접근할 수 없으며 재정의가 불가능한 특징을 가지고 있습니다. 특히 const 의 경우에는 반드시 초기화가 필요합니다.
    추가로, 초기화(initialization)과정을 이렇게 따로 하는 경우는 권장되지않죠. const의 경우는 많이 엄격하게 권장되고, 초기화를 생략하면 좋은 프로그래밍이 아닙니다. 
'use strict';  // 자바스크립트를 엄격모드에서 실행

valueA;        // 변수 키워드 생략은 엄격모드에서 에러발생!
var valueA;
var valueA;
let valueA;    // 재정의로 인한 에러발생!
const my_name; // 초기화가 없어서 에러발생!

변수를 할당하는 방법은 다음과 같습니다.

valueA = 1;
const my_name ="WADE";

if(true){ // -- 코드블록의 시작입니다. -- //

	let valueB = 'Hello!';
	const my_name ="WADE";       // 코드블록 밖의 my_name과 별개의 상수입니다.

} // -- 코드블록의 끝입니다. -- //

valueB = 'nice to meet you!';  // 변수 정의 이전에 값을 할당 할 수 없습니다!
let valueB = 'Hi!';            // 코드블록 안의 valueB와 별개의 변수입니다.
💡 **let 과 const. 언제 사용해야 할까요?**

JavaScript에서 let과 const는 모두 변수를 선언하는 키워드입니다. 그러나 두 키워드는 서로 다른 용도를 가지고 있으며, 상황에 따라 선택할 수 있습니다.

let은 재할당이 가능한 변수를 선언할 때 사용됩니다. 이것은 변수의 값이 언제든지 변경될 수 있다는 것을 의미합니다. let 변수는 블록 스코프를 가지므로, 변수를 선언한 블록 안에서만 유효합니다.

반면에 const는 재할당이 불가능한 상수를 선언할 때 사용됩니다. 이것은 변수의 값이 한 번 할당되면 변경될 수 없다는 것을 의미합니다. const 변수도 let과 마찬가지로 블록 스코프를 가집니다.

그러나 const를 사용하는 것이 더 좋은 경우가 많습니다.

  1. 의도하지 않은 값의 변경을 방지할 수 있습니다.

    const를 사용하면 변수의 값이 한 번 할당되면 변경될 수 없습니다. 따라서 의도하지 않은 값의 변경을 방지할 수 있습니다. 이것은 코드의 예측 가능성을 높이며, 따라서 버그를 줄일 수 있습니다.

  2. 가독성을 높일 수 있습니다.

    const를 사용하면 다른 개발자들이 변수의 값이 변경될 가능성이 없다는 것을 빠르게 인지할 수 있으며, 반드시 초기화를 해야하기 때문에 어떤 데이터가 사용되는지 초기에 확인 할 수 있습니다. 이것은 코드의 가독성을 높이고 유지 보수성을 향상시킵니다.

그러나 변수의 가리키는 값이 반드시 변경되어야 하는 경우에는 let을 사용해야 합니다. 예를 들어 +, - 같은 연산자에 의해 할당된 값이 변경되야 할 경우가 있습니다. 따라서 const와 let을 적절하게 사용하여 코드를 작성하는 것이 중요합니다.

🤔 블록 스코프 (block scope) 자바스크립트 문법에는 여러줄의 코드를 하나로 묶어주는 단위인 블록( { } )이 존재합니다. 블록 스코프란 그러한 블록 안에서만 유효한 코드의 범위를 의미합니다. 자세한 내용은 스코프 시간에 자세히 다루도록 하겠습니다! 여기서는 *‘코드에도 사용가능한 범위라는게 있구나’* 하고 이해해 주시면 되겠습니다. 🙂 🧐 가리키는 값이라고 굵은 글자로 표시한 이유? 아래와 같이 배열 값이 변경이 되더라도 Error가 나지 않는 이유는 값이 추가되더라도 values가 가리키고 있는 값은 그대로 해당 배열이기 때문에 그렇습니다. 화살표는 변하지 않습니다. 
const values = []; // 1번

values.push(10); // 2번
추가로, 컴파일 언어와 스크립트 언어의 차이!


스크립트 언어는, 소스코드의 오류 유무는, 실행시키기 전까지는 알 수 없다. 컴파일 과정이 없기 때문에 확인 할 방법이 없기에...😂

그러면, 굳이 왜 JS는 인터프리터를 사용하는 스크립트언어로 만들어졌을까??

🟠 함수

우리가 맛있는 라면 레시피를 가지고 있다고 생각해봅시다. 😃

<나의 시크릿 라면레시피>
1. 라면을 담을 그릇을 준비합니다.
2. 물 550ml를 끓입니다.
3. 면과 분말 스프, 후레이크를 같이 넣습니다.
4. 4분 40초간 더 끓입니다.
5. 그릇에 라면을 담습니다.

나의 레시피가 소문이 나서 사람들이 앞 다투어 저에게 레시피를 알려달라고 합니다. 알려달라고 할 때마다 적어서 건내줘야 할까요? 복사해두고 건내주는 것이 효율적일 것입니다.

이게 바로 함수가 하는 역할입니다. 반복적으로 필요한 코드를 하나의 덩어리로 묶어서 필요할 때마다 꺼내 쓸 수 있도록 한것이죠!

function 나의시크릿라면레시피(){
	let 라면그릇;
	
	물 550ml를 끓인다;
	면과 분말 스프, 후레이크를 같이 넣는다;
	4분 40초간 더 끓인다;

	라면그릇 = 맛있는라면;

	return 라면그릇;
}

나의시크릿라면레시피();

함수 구조

함수는 기본적으로 아래의 형태를 가집니다.

function 함수이름(parameter1, parameter2...) { // 함수의 선언
    // 실행코드...
    return 반환값
}

함수이름(argument1, argument2...) // 함수의 호출

이를 그림으로 표현하자면 아래와 같은 형태일 것입니다.

함수의 활용 - 매개변수와 전달인자.

용어번역의미
Parameter매개변수함수와 메서드에 입력 변수 이름
Argument전달인자, 인자, 인수함수와 메서드에 실제 입력되는 값

파라미터(매개변수)와 아규먼트(전달인자)는 용어를 구분해야 합니다. 쉽게 파선아실(파라미터는 선언, 아규먼트는 실제 값)이라고 줄여 부르기도 합니다.

여기서 console.log와 return은 구분할 필요가 있습니다. console.log는 콘솔 창에 표시되는 단순 출력이며, return은 해당 함수가 실행되면 반환되는 값을 전달합니다. 또한 함수 내부에서 return 구문을 만나게 되면 해당 함수는 종료됩니다.

아래 1번, 2번, 3번, 4번 출력 결과를 각각 비교해보세요.

// 함수
// 읽어볼만한 문헌 : https://ko.javascript.info/function-basics

// 1번
function 안녕(파라미터){
    console.log(파라미터);
    console.log('hello');
    return 100;
}

let 아규먼트 = 1000;
안녕(아규먼트);
console.log(안녕(아규먼트) + 안녕(아규먼트));

1번의 실행결과

// 2번
function 안녕(){
    console.log('hello');
}

안녕();
console.log(String(안녕()) + String(안녕()));


2번의 실행결과

// 3번
function 안녕(){
    console.log('hello')
    return 10
}

안녕()
console.log(String(안녕()) + String(안녕()))

3번의 실행결과

// 4번
function 안녕(){
    console.log('hello')
    console.log('hello')
    console.log('hello')
    return
    console.log('hello')
    console.log('hello')
    console.log('hello')
}

안녕()

4번의 실행결과

함수는 아래와 같은 이유로 사용합니다.

  1. 재사용성이 높아집니다.

  2. 유지보수가 용이합니다.

  3. 구조 파악이 용이합니다.

    땅파기() // 10만줄
기반다지기() // 10만줄
기둥세우기() // 10만줄
벽돌쌓기() // 10만줄
지붕올리기() // 10만줄

함수의 활용 - 함수의 아규먼트에 따른 반환값

함수에 전달되는 아규먼트 즉 인자는 매개변수보다 적거나 많아도 에러가 발생하지 않습니다.

function 함수1 (a, b, c){
    return a + b + c
}

// 콘솔창의 기능이에요. 마지막 라인에 한하여 console.log()를 찍지 않아도 return값을 console창에 출력해줍니다.
함수1(10, 20, 30) 
함수1(10, 20, 50)

// 다음 실행 값은?
console.log(함수1(10, 20, 30))
console.log(함수1(10, 20, 50))

// 필요 이상의 아규먼트를 넣었을 때
함수1(10, 20, 30, 40) // Error를 뿜지 않습니다. 60

// 필요 이하의 아규먼트를 넣었을 때
함수1(10, 20)

/*
function 함수1 (a, b, c){
    return a + b + String(c)
}
함수1(10, 20) // '30undefined'
*/

함수를 선언하는 여러가지 방법

  1. 함수 선언문과 함수 표현식

함수는 function + 제목 + ( ) + { } 의 조합인 구문(Statement)으로 선언할 수도 있고, 제목 없이 선언하여 값으로 할당하는 표현식(Expression)으로 선언하는것도 가능합니다.

// 함수 선언문
function sum(x, y){
  return x + y;
}

// 함수 표현식
let sumXY = function(x, y){
  return x + y;
};
console.log(sum(10, 20));
console.log(sumXY(10, 20));
💡 **구문(Statement)과 표현식(Expression)** **구문**은 자바스크립트 명령문으로, 어떤 작업을 수행하기 위한 코드 블록이라 할 수 있습니다. 예를 들어 우리가 뒤에서 배울 if문, switch문, for문 등이 여기에 포함됩니다. **표현식**은 값으로 평가될 수 있는것을 의미합니다. 숫자나 문자열 같은 값 자체나 5 < 3 와 같은 비교 연산자등이 여기에 해당합니다. 위에서 함수표현식이라 함은 함수를 값 처럼 사용하기 때문에 그렇게 표현합니다.
  1. 화살표함수

함수는 선언 시 function 키워드를 화살표 기호로 대체하여 표현할 수 있습니다. 화살표 함수는 선언 시 제목을 정할 수 없기 때문에 표현식으로 사용해야 합니다.

// 읽어볼만한 문헌 : https://ko.javascript.info/arrow-functions-basics

function 함수1(x, y) {
    return x + y
}
// 위 함수를 화살표 함수로 작성하면 아래와 같습니다.
let 함수1 = (x, y) => x + y

// 만악 함수 실행시 전달하는 인자가 한 개라면 소괄호를 생략할 수 있습니다.
let 함수2 = x => x + 10

// 화살표 함수 내부에서 한 줄 표현식만 반환한다면 return 키워드를 생략해도 됩니다.
let 함수3 = x => x + 10

let 결과 = 함수3(2);

console.log(결과);
🤔 이런 방식의 익명 함수 표현식을 다른 언어에서는 람다식이라고 부른답니다!
  1. 즉시실행함수 (IIFE, Immediately Invoked Function Expression)

함수를 정의함과 동시에 즉시 실행하는 방법을 말합니다.

(function() {
  console.log('이 함수는 만들어지자마자 바로 실행됩니다!');
})();

(function() {
	document.querySelector(".btn").addEventListener("click", function(){ 
	console.log('click!')
	});
})();

추가로, JS는 비동기형식 스크립트 언어이다.
a 함수가 끝났을 때, s,d,f 순서대로 호출하는 것이 아닌 sdf를 동시에 호출해 먼저 계산이 끝난 함수의 결과값을 출력한다.

또한 즉시실행함수는 코드를 캡슐화하여 모듈화된 코드를 작성할 수 있게 합니다. 이 내용은 함수 심화 과정에서 자세히 다루도록 하겠습니다.

profile
박종호
Hey🖐️
이전 포스트

올 것이 왔다 JS입문

다음 포스트

HTML/CSS 실습

0개의 댓글

관련 채용 정보