JavaScript 기본

변수

자바스크립트를 포함한 프로그래밍 언어는 변수라는 것을 기본적으로 사용한다. 변수는 왜 쓸까?

변수는 왜 쓸까?

• 변수는 코드를 재활용을 할 수 있고 가독성을 높여준다.
• 중복을 제거해서 유지보수가 쉽도록 만들어준다.

변수 선언 방법

• [키워드] [식별자] = [값]; 과 같은 형태로 자주 쓰인다.
• 사용할 수 있는 키워드
  • var : var는 그냥 이제 안 쓴다 혹은 가급적 쓰면 안 된다라고 알고 있어도된다. 주된 이유는 *호이스팅(Hoisting) 때문이다. 이 호이스팅 덕분에 잘 못된 코드도 일단 돌아는 가니까 되는거 아님?? 이 될 수있고 문제가 발생해도 어디서 문제가 발생했는지 찾기 어려울 수 있기 때문에 var는 그냥 이런게 있었구나 하고 기억에서 잊어버리자.
  • let : 변수의 값이 바뀔 수 있을 때 사용한다. 이 친구는 선언 이후 새로 할당이 가능하다.
  • const : 변수의 값이 바뀌지 않을 때 사용한다. 이 친구는 새로 할당이 불가능하다.

let test = 1; 
console.log(test); // 1

const test = 1;
console.log(test); // 1

 

*호이스팅이란 함수와 변수에 적용되고 변수 선언을 아래에서 지정하고 상단에서 사용해도 문제없이 진행되도록 만들어주는 것이다.
ex)
console.log(a); //undefined
var a = "HI";
console.log(a); // HI

 

간단한 자바스크립트의 숫자 사용

자바스크립트 외에 C언어를 포함한 다른 언어에서는 숫자를 변수에 할당할 때 형태가 지정되어 있다.

예를 들어 숫자 변수 선언에도 자바스크립트는 그냥 let이나 const를 사용하지만 C언어의 경우 short, int, long 타입이 존재해서 변수에 담길 숫자의 크기가 어느정도인가에 따라 선언하고 할당한다. 물론 위에 작성한 것외에도 몇개 더 있기는 하지만 여기서 말하고자 하는 것은 자바스크립트에서 숫자는 매우 쉽게 사용이 가능하다는 점이다.

let zero = 0;
let one = 1;
console.log(zero + one); // 1

console.log(1 + 1) // 더하기 2
console.log(1 - 1) // 빼기 0
console.log(2 * 2) // 곱하기 4
console.log(6 / 2) // 나누기 3
console.log(5 % 2) // 나머지 1

 

Null & Undefined

간단하기 null은 정말 비어있는 타입, 값이다. 진짜 그냥 비었다.

undefined는 정의되지 않는 상태(타입), 값이다. 완전히 다른 친구들이다.

console.log(a); // undefined
var a = 1;
console.log(a); // 1

위 예시에서 첫번째 console.log는 var 선언을 이용해 변수를 만들었기 때문에 변수 호이스팅이 적용되어 var a;가 최상단으로 올라가 읽히게 된다. 하지만 뒤에 붙은 a = 1이라는 할당은 호이스팅에 적용되지 않기 때문에 console.log에는 undefined가 출력된다. 즉 변수를 선언했지만 값이 정의되지 않은 상태라는 것이다. 두번째 console.log의 경우 정상적으로 var a = 1이라는 코드가 읽혔기 때문에 1이라는 값을 정확히 출력할 수 있다.

 

 

조건문

if문과 switch문이 존재하지만 개인적으로 공부나 프로젝트를 만들 때 switch문을 마지막으로 사용했던 적이 언제였는지 기억나질 않는다. 그렇기에 if문만 블로그에 정리하겠다. switch문이 필요하면 구글링해서 보자 그게 가장 확실하다.

if문

어떤 조건이 참으로 평가될 때, 실행될 코드를 구분하여 작성한다.

if문 괄호 {} 뒤에 else, else if 등을 붙여 여러 상황을 대비할 수 있다.

/*
if(조건) {
	// 조건이 참으로 평가될 경우 실행될 문자
}
*/

if(0 < 1) {
	console.log("데박 님 천재?");
}

if(0 > 1) {
	console.log("다시 생각해 보세요");
}
else if(0 < 1) {
	console.log("축하합니다. 정답");
}
else {
	console.log("어쩔 수 없지");
}

if문이라는 것은 그냥 간단히

만약에 조건이 맞으면 ( if )

  이거 사용

어 위에꺼 아냐? 그럼 이건? ( else if )

  이거 사용2

위에꺼 다 아니야! ( else )

  이거 사용3

 

라고 보면 된다.

 

반복문

이 반복문도 for, while문이 존재하고 for문에도 여러개가 있는데 일단 자바스크립트 기본 문서이니 for문만 작성한다.

for문

조건이 만족할 때까지 반복한다.

/*
for(초기화; 반복 조건; 반복될 때 마다 실행될 코드) {
	반복이 되는 코드
}
*/

for(let i = 0; i < 3; i++) {
	console.log(i);
}

// 0
// 1
// 2

 

함수

함수는 왜 쓸까? 변수와 비슷하다. 한번 만들어 두고 나중에 두고두고 다시 쓸일이 있을 것 같을 때 그 코드를 다시 쓰기 귀찮으니 만든다고 보면된다.

공장을 떠올리면 된다. 굳이 돈과 시간을 들여 공장을 지을 필요가 있을까 싶지만 공장이 한번 완성되면 그 공장에서는 같은 일을 오랜 시간동안 할 수 있다. 그 뿐이 아니라 원료만 주어지면 언제나 일정한 형태의 물건을 생산할 수 있기에 상당히 생산성이 높다고 볼 수 있다. 함수도 마찬가지다 한번 만들어 두고 나중에 쓸 수 있으며 내가 전해주는 값이 함수에서 받을 수 있는 값이라면 내가 원하는 결과물을 기대하고 실제로 받을 수 있다.

function 함수명 (인자1, 인자2) {
	console.log(인자1 + 인자2);
    return 인자1 + 인자2;
}

함수명(1, 2); // 3

함수에서 받는 변수를 인자 혹은 매개변수라고 한다. 필요에 따라 인자값을 지정해도 되고 인자값이 필요없는 함수를 정의했다면 당연히 안 적으면 된다. 함수는 return 값이 존재하는데 해당 함수가 종료될 때 전달해줄 값이다. 만약 그럴리는 없겠지만 위와 같이 console.log를 찍을 경우에는 함수 실행이 끝났을 때 굳이 반환 값을 줄 필요가 없기 때문에 return은 안 써도 무방하지만 함수를 만들면 반환값을 기대하는 경우가 있을 것이다.

함수를 제작하면 해당 함수명과 필요에 따라 인자값을 괄호에 적어 함수를 선언하여 사용한다.