Javascript 기초 - let, const / null, undefined / alert, prompt, confirm / 자료형 변환 / 함수 / 전역변수, 지역변수 / 호이스팅 / 화살표 함수

KSH·2022년 1월 9일
JavaScript
0
post-thumbnail

변수를 선언할 때 let과 const를 쓰자!

name = "Mike";

// 1000 lines

name = "King";

이렇게 앞에 name이라는 변수를 선언했는데 코드가 많아져서
까먹고 다시 name이라는 변수를 선언할 때 앞에 let, const를 쓰지 않으면
실행했을 때 name이라는 변수에는 뒤에 선언된 King만 출력되게 되고 에러 메세지도 뜨지 않는다!

👉 : 에러가 뜨지 않으므로 name에 왜 Mike가 안 나오는지 찾기 힘들다.

let, const를 사용하면 

let name = "Mike";

// 1000 lines

let name = "King";

이렇게 실행했을 때 에러메세지가 떠서 어디가 잘못됐는지 개발자가 바로 알 수 있다!

let과 const의 차이

: 수정 가능 / 불가능의 차이가 있다.

  • let : 변수 수정 가능
let name = "Mike"

name = "king"

let은 이렇게 수정을 할 때 let을 붙이지 않고 선언한 변수명만 써서 수정을 하면
수정된 값이 변수에 저장된다.
console.log(name) 을 하면 king이 출력된다.

👉 A개발자가 let을 써서 변수를 선언해도 B 개발자가 let을 쓰지 않고 똑같은
변수명으로 변수를 선언한다면 에러가 뜨지 않아서 찾기 힘들다.

💡 ∴ 최초로 변수를 선언할 때는 let을 꼭 쓰자!

  • const : 변수 수정 불가능
const NAME = "Mike";

NAME = "king";

console.log(NAME);

👉 실행 시 에러가 발생한다.

※ 변수 수정이 불가능하기때문에 보통 파이, 최댓값, 생일 등 변하지 않는 값을
입력할 때 사용한다.
다른 개발자들에게 상수라는 것을 알리기 위해 변수명을 대문자로 하는 것이 좋다.


요약하자면, Javascript에서 변수 선언 시
변하지 않는 값은 const
변할 수 있는 값은 let으로 선언하자!

문자열 변수 선언 시 백틱(`) 사용

변수에 다른 변수를 사용한 문자열을 넣고 싶을 때
따옴표를 사용하면 +로 구분하여 변수를 넣게 된다.

let name = "Mike";

let message = "나는" + name + "입니다";

console.log(message);

👉 “나는 Mike입니다” 출력된다.
이때, 문자열 저장 시 따옴표를 사용하지 않고 백틱(`)을 사용하면
+없이 ${변수명} 으로 변수를 바로 호출할 수 있다.

let name = "Mike";

let message = `나는 ${name}입니다`

console.log(message);

👉 “나는 Mike입니다” 출력된다.

💡 백틱을 사용하면 따옴표와 +없이 ${변수명}만으로 호출이 되기 때문에
따옴표를 사용했을 때보다 가독성이 좋은 것 같다!
∴ 문자열을 변수에 저장할 때 백틱을 사용하는 것을 습관화하자!

숫자형 변수 에러 종류

  • Infinity

: 숫자를 0으로 나눴을 때 발생하는 에러

let x = 1/0;

console.log(x);

👉 Infinitiy 가 출력된다.

  • NaN (Not a Number)

: 문자를 숫자로 나눴을 때 발생하는 에러

let name = "Mike";
let y = name/2;

console.log(y)

👉 NaN이 출력된다.

※ 숫자와 관련된 작업을 할 때 NaN이 아닌지 항상 생각하면서 작업해야한다.

null과 undefined

: 둘 다 값이 없다는 것을 의미한다.

하지만, null과 undefined는 차이가 있다.
null은 변수에 null을 저장을 하고, undefined는 변수에 저장된 값이 없을 때를 말한다.

  • undefined
let name;
console.log(name);

👉 undefined가 출력된다.

이처럼, undefined는 변수를 선언하기만 하고 그 안의 값이 저장이 안 되었을 때 undefined를 변수에 저장한다.

  • null
let name = null;

이처럼, null은 변수에 null을 선언하여 명시적으로 그 변수에 값이 비어있음을 나타낸다.

주로, 객체를 담을 변수를 초기화할 때 많이 사용한다!

Typeof 연산자

: 변수의 데이터 타입(자료형)을 알려준다.

let name = "Mike";

console.log(typeof 3);
console.log(typeof name);

👉 차례대로 “number”, “string”이 출력된다.

※ 변수를 사용하는 개발자가 직접 작성했다면 typeof를 사용할 일이 거의 없다.

하지만 다른 개발자가 작성한 변수의 데이터 타입을 알아야 하거나, API 통신망을 통해 받아 온 데이터를 타입에 따라 다른 방식으로 처리해야 할 때 typeof가 많이 사용된다.

alert / prompt / confirm

  • alert() : 경고창 출력
  • prompt() : 입력할 수 있는 박스 출력

: prompt(message, default) → 2개의 인수 존재

message : 입력 박스의 내용

default : 입력 시 기본값

// prompt로 입력 창 띄우고 변수에 입력받은 값 저장
const name = prompt("이름을 입력하세요", "KIM"); 

alert(`나는 ${name}입니다.`)

👉 prompt로 입력 박스 출력

👉 prompt에 입력한 값이 name에 저장되어 alert로 name을 포함한 경고창 출력

※ 이때 prompt창에서 확인이 아닌 취소를 하게 되면 name 변수에 null값이 저장된다.

  • confirm() : 확인 창 출력
const isAdult = confirm("당신은 성인입니까?");
console.log(isAdult)

👉 confirm으로 확인 창을 출력할 수 있다.

※ alert과 다른 점 : alert은 확인 버튼만 존재 / confirm은 확인, 취소 버튼 존재

또한 confirm에서 확인을 누르면 변수에 true 저장 / 취소를 누르면 false가 저장된다.

→ 이렇게 true, false가 저장되기 때문에 이후 작업을 true, false에 따라 진행할 수 있다!!

  • alert, prompt, confirm 등 기본 제공 창의 단점
  1. 창이 떠있는 동안 스크립트가 일시정지 된다. (창을 닫기 전에는 이후 동작에 제한을 받는다.)
  2. 창의 스타일링이 불가능하다. (창의 위치, 크기, 디자인 조절 불가)

따라서 창을 html, css로 만들어서 사용하기도 하지만

기본으로 제공하는 창을 사용하면 빠르고 간단하게 적용이 가능해서 많이 사용되고 있다.

형 변환

  • String() : 문자형으로 변환
  • Number() : 숫자형으로 변환
  • Boolean() : 불린형으로 변환

※ 형 변환이 필요한 이유 예제

EX) 수학과 영어의 점수를 입력받아 평균을 구하는 프로그램 작성

const mathScore = prompt("수학 점수는 몇점입니까?");
const engScore = prompt("영어 점수는 몇점입니까?");
const result = (mathScore + engScore) / 2;
console.log(result);

👉 이렇게 해서 점수를 각각 입력하면 평균이 이상한 값으로 출력된다.

(80, 90의 평균 → 4045)

∵ prompt로 입력받은 값은 문자형이기 때문에 입력받은 80, 90이

80, 90으로 저장되지 않고 “80”, “90”으로 저장되어서

결과적으로 result = “8090” / 2가 되어 4045가 저장되는 것이다.

💡 이러한 이유로 형 변환이 필요하다!

  • String()

String(3) → “3”으로 변환된다.

  • Number()

Number(”1234”) : 1234로 변환된다.

Number(true) : 1로 변환 / Number(false) : 0으로 변환

이때, 수 사이에 문자가 껴있다면 NaN이 저장된다.

Number(”1234ABCD”) : NaN으로 변환된다.

※ Number(null) : 0으로 변환 / Number(undefined) : NaN으로 변환

→ prompt에서 취소를 누르면 null으로 저장되는데 이때 Number(변수)를 하게되면 Number(null) : 0이므로 0으로 변환할 수 있다.

이를 이용하여 다음 작업 진행가능

  • Boolean() : false로 변환되는 것들만 외우기

Boolean(0) / Boolean(””) / Boolean(null) / Boolean(undefined) / Boolean(NaN)

이외의 나머지는 true로 변환된다.

※ 형 변환할 때 주의할 점 : 맨 앞 글자는 대문자로 써야한다

string() / number() / boolean() → 작동 X

% 연산자(나머지)의 활용

  1. 홀수 / 짝수 구분

X % 2 = 1 → 홀수

X % 2 = 0 → 짝수

  1. 어떤 값이 들어와도 5를 넘기면 안 될 때, 5 미만의 값을 조건에 주고 싶을 때

X % 5 → 0~4 사이의 값 반환

논리 연산자

  • && : AND를 의미
  • || : OR을 의미
  • ! : NOT을 의미

자바스크립트에서는 조건문에서 파이썬과 다르게 and, or을 쓸 수 없고 &&, ||로 표현해야한다.

반복문

  1. for

for(초기값, 조건, 코드 실행 후 작업) {

반복할 코드

}

for (let i  = 0; i < 10; i++){

    console.log(”i”)

}
  1. while
let i = 0;

while(i < 10){

    colsole.log(i)

    i++;

}

함수

function 함수명(매개변수){
함수 내용
}

ex) name을 입력받아서 Hello, name을 출력하는 함수 작성

function sayHello(name){
  let msg = `Hello`;
  if(name){
    msg = `Hello, ${name}`;
  }
  console.log(msg);
}

sayHello();
sayHello("KSH");

👉 “Hello” / “Hello, KSH”가 출력된다.

  • 이때 첫 번째에서 Hello가 출력되는 이유?

매개변수가 있는 함수에서 매개변수를 주지 않고 호출하게 되면

그 매개변수는 undefined로 저장된다.

if(undefined)는 false이므로 if문을 실행하지 않고 밑의 console.log(msg)를 실행하여

Hello가 출력된다.

  • OR을 사용하여 매개변수가 입력되지 않아도 기본값을 출력하도록 기본값 설정하기
function sayHello(name = "friend"){ // 입력 X시 기본값 : friend로 설정
  let msg = `Hello, ${name}`
  console.log(msg)
}

sayHello();
sayHello("KSH");

👉 “Hello, friend” / “Hello, KSH”가 출력된다.

전역변수와 지역변수

위의 sayHello 함수 내에서 선언한 변수 msg를 지역변수라고 한다.

이러한 지역변수는 함수 밖에서는 사용할 수 없다.

함수 밖에서도 사용하고 싶으면 함수 밖에서 선언해야한다.

이를 전역변수라고 한다.

하지만 전역변수와 지역변수가 동일한 이름으로 사용되었을 때는 서로 간섭하지 않는다.

let msg = "welcome"; // 전역변수 msg
console.log(msg)

function sayHello(name){
	let msg = "Hello"; // 지역변수 msg
	console.log(msg + " " + name);
}

sayHello("Mike");
console.log(msg);

👉 welcome / Hello Mike / welcome이 출력된다.

💡 이처럼 전역변수명과 지역변수명이 같아도 서로 간섭하지 않고
지역변수는 함수 내에서만 사용되고 함수 밖에서 변수를 호출했을 때는
전역변수로 출력되는 것을 알 수 있다.

호이스팅

: 함수가 선언된 코드 윗 줄에 함수를 호출해도 함수가 잘 호출된다.

자바스크립트는 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서

선언된 모든 함수를 미리 생성해놓는다.

코드를 눈으로 봤을 때는 함수가 아래 선언되어있지만 자바스크립트 내부에서는 이미 생성되어 있는 것이다.

이를 호이스팅이라고 한다!

sayHello();

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

💡 따라서 이렇게 눈으로 보기에 함수가 밑에 선언되고 위에서 함수가 호출 되어도

잘 실행이 된다.

※ 호이스팅은 함수 선언문에서만 된다. 함수 표현식은 호이스팅 X이므로

호출하려면 선언문 아래에 호출을 해야한다.

Arrow function (화살표 함수)

: 일반적으로, function을 사용하여 함수를 만드는데 function 대신 화살표로 대체하여 함수를 만들 수 있다.

※ 화살표 함수는 함수에 이름을 붙이지 않을 목적으로 사용하는 함수이기 때문에
함수를 만들어서 호출을 하기 위해서는 함수를 변수에 저장하는 함수 표현식으로 화살표함수를 선언해야한다.

  • 일반 함수 표현식
const sayHello = function (name) {
	console.log(msg);
}
  • 화살표 함수 사용 (기본)
const sayHello = (name) => {
	console.log(msg);
}

💡 화살표 함수의 장점

① 입출력 기계를 만들 때 보기가 쉽다. (가독성 ↑)

const X = (a) => { return a + 10; } 이렇게 써서 가독성이 좋다.

② 매개변수가 1개이면 소괄호가 생략 가능하다.

const X = a => { return a + 10; } 이렇게 소괄호가 생략가능하다.

※ 주의할 점 : 매개변수가 1개가 아닐 때(0개, 2개 이상)는 소괄호를 반드시 써줘야한다.

③ return이 한 줄이고 함수 내용에 return밖에 없다면 중괄호, 리턴까지 생략이 가능하다. 마찬가지로 함수 내용이 1줄이라면 중괄호를 생략할 수 있다.

const X = a => a + 10;

const X = a => console.log(a);

※ 주의할 점 : 함수 내용이 return 말고 다른 내용도 있으면 중괄호를 써줘야 한다.

const X = a => {
	const b = 10;
	return a + b;
}
profile
KSH
성실히 살아가는 비전공자
이전 포스트

백준 3076번 풀이

다음 포스트

Javascript 기초2 - 객체, Property, 메소드, this, 배열

0개의 댓글