[JavaScript] 기초강좌

JiHyun·2023년 1월 28일
JavaScript
0

JavaScript

목록 보기
1/8
post-thumbnail

변수란?

어떤 이름에 특정한 데이터를 대입시켜주는 것이다
변수를 선언하는 방법에는 let과 const가 있다

let 과 const의 차이

  • let - 변할 가능성이 있는 변수
  • const - 절대로 바뀌지 않는 상수

즉 let은 한번 변수를 선언한 뒤 다른 데이터의 변수를 선언해도 되지만 const는 한번 변수를 선언하면 뒤에서 또 다른 데이터의 변수를 선언할 수 없다.

변수를 선언할때 주의사항

  • 문자열은 항상 ""를 붙여준다.
  • 변수는 문자, 숫자, $, _만 사용한다 (부득이하게 '나 "를 사용해야할 경우 \를 붙여준다.)
  • 변수명으로는 예약어는 사용할 수 없다. 예약어란 프로그래밍 언어에서 이미 문법적인 용도로 사용되고 있기 때문에 식별자로 사용할 수 없는 단어들이다.
    (예. let let = 3 / let class = 5 ❌)
  • 변수명은 이해하기 쉽게 작성해야한다.

연산자

1) 숫자 연산자

  • 더하기 +
    num = num + 5
    num += 5 로 표현가능
  • 빼기 -
  • 곱하기 *
  • 나누기 /
  • 나머지 값 %
  • 거듭제곱 **
  • 증가연산자 ++ 1씩 증가
  • 감소연산자 -- 1씩 감소

증가(혹은 감소)연산자의 경우 ++을 변수 앞에 붙이는지 뒤에 붙이는지에 따라 값이 다르다
예를 들어보자

let num = 10;
let result = num++;
console.log(result)
> 10
let result = ++num;
console.log(result)
> 11

이처럼 어느 위치에 붙는지에 따라 결과값이 다르니 주의해서 사용해야한다

2) Boolean과 비교 연산자(<,>,==,===)

true 와 false로 나타내며 참과 거짓을 표현한다

const age = 26;
console.log(age > 40);
> false
console.log(5 >= 4);
> true

이처럼 비교연산자를 쓰면 그 값은 Boolean값으로 반환된다.
비교연산자를 쓸때 주의할 점이 있는데 ==와 ===의 차이이다.
==는 동등 연산자 ===는 일치 연산자라 한다.

const a = 1
const b = "1"

console.log(a == b)
> true

console.log(a ===b)
> false

동등 연산자는 단순히 숫자값만 비교해서 true로 반환하지만 일치연산자는 숫자 + 타입까지 비교해서 false로 반환한다.
되도록 숫자와 타입까지 비교해주는 일치연산자를 사용하도록 하자

3) 논리연산자(and, or, not)

&&(and) 모든 값이 true여야만 true 리턴
|| (or) 여러 값중 하나만 true여도 true 리턴
! (not) true는 false로 false는 true로 리턴

&&는 실행될때 false를 발견하는 즉시 평가를 멈추고 ||는 실행될때 true를 발견하는 즉시 평가를 멈춘다. 코드를 작성할때 이 점을 참고해서 작성하면 코드를 더 빠르게 진행시킬 수 있다는 점을 명시하자!

&&가 ||보다 먼저 평가되니 주의하자!

대화상자(alert, prompt, confirm)

1) alert
무언가를 알려줄때 사용, 주로 경고창을 띄울때 사용한다.

2) prompt
사용자에게 어떤 값을 입력 받을 때 사용한다.

const name = prompt("이름을 입력하세요")

또한 prompt는 2개의 인수를 가질 수 있다

const name = prompt("예약일을 입력해주세요.", "2023-01-")

주의할 점은 입력받은 값은 항상 문자형이다. 즉 숫자값을 입력받아도 문자형으로 받아진다.

3) confirm
사용자에게 어떠한 내용을 확인 받을 때 사용한다.

const isAdult = confirm("당신은 성인입니까?")

이때 창에 확인 또는 취소가 나오는데 확인은 true로 취소는 false로 반환된다.
alert이랑 다른점은 취소버튼의 유무이다.

이 3가지의 대화상자는 실행이될때 스크립트가 일시정지되며 대화상자를 css로 꾸밀 수 없다는 단점이 있다.

자료형 변환

String(3)   // 3을 "3" 문자형으로 변환.
Number(a)   // a의 값을 숫자형으로 변환. 단, 숫자가 아닌 문자를 적으면 NaN을 반환
Boolean(a)  // a의 값을 true 혹은 false로 변환

이때 주의할 점은 Number(null)은 0으로 반환되고 Boolean값에 숫자 0, "", null, undefined, NaN은 false로 반환되니 주의해야한다.

반복문

반복문은 특정 조건을 여러번 반복해야할때 사용한다.
반복문의 종류는 크게 3가지가 있다

1) for 

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

2) while 

let i = 0;
while (i < 10) {
	console.log(i)
	i++
}

3) do..while 

let i = 0;
do {
	console.log(i)
	i++
} while (i < 10)

결과적으로 3가지 모두 같은 값을 보내지만 표현 방법 다르다.

4) 반복문을 빠져나가는 법
break
: 반복문을 멈추고 빠져나옴

while(true) {
	let answer = confirm("계속 할까요?")
    if(!answer) {
    	break;
    }
}

위의 예시를 보면 "계속할까요?"라는 대화상자를 띄우고 확인을 누르면 true로 반환되서 계속 반복문을 돌것이고 취소를 누르면 false로 반환되서 if문에있는 break로 반복문이 멈추고 빠져나올 것이다.
이처럼 무한 반복문은 특정 조건을 만족했을때 break를 써주는게 필요하다.

continue
: 반복문을 멈추고 다음 반복을 진행

for (let i = 0; i < 10; i++) {
	if(i % 2) {
    	continue;
    }
	console.log(i)
}

i가 0부터 시작해서 2로 나눈 나머지가 0이라면 false로 반환되어 console에 찍힐 것이고 나머지가 0이 아니라면 true로 반환되서 if문이 실행되서 반복문을 멈추고 다음 반복으로 넘어간다.
(Boolean의 값이 0이면 false로 반환된다. 자료형 변환 참고)

switch문

switch문은 if ~ else문과 비슷하지만 케이스가 다양하다면 보다 간결하게 쓸 수 있는 장점이 있다.

let fruit = prompt('무슨 과일을 사고 싶나요?')
switch(fruit) {
	case '사과' :
		console.log('100원 입니다.');
        break;
	case '바나나' :
		console.log('200원 입니다.')
        break;
	case '키위' :
		console.log('300원 입니다.')
        break;
    default :
    	console.log('그런 과일은 없습니다')
}

이런 식으로 if문으로 쓰기엔 케이스가 많은 경우 switch문을 쓰는게 더 좋다.

함수(function)

코드를 작성하다보면 같거나 비슷한 동작이 있다.
이런 동작들을 자주 사용하거나 여러번 사용해야 할 경우 보다 간결하게 함수로 표현할 수 있다. 중복되는 코드도 줄일 수 있고, 유지보수에도 더 편하다.

function sayHello(name) {
	console.log(`Hello, ${name}`);
}

위의 예시를 보면 함수에 sayHello라는 함수명을 적고 name이라는 매개변수를 사용했다.
매개변수는 없을수도, 1개 일수도 혹은 여러개 일수도 있다. 여러개라면 ','로 구분한다.

sayHello(jihyun)
> "Hello, jihyun"

이처럼 함수는 함수명을 적어서 함수를 호출할 수 있다.

매개변수가 없을때의 함수도 알아보자

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

say Hello('Yun')
> "Hello Yun"

매개변수가 없을때는 if문이 false가 되어 바로 console로 넘어가게되고 "Hello"를 출력한다.
매개변수 "Yun"을 두면 msg 함수가 실행되며 msg = msg += , ${name}으로 반환되어 "Hello Yun"이 출력된다.

여기서 중요한 점은 msg라는 함수는 '지역 변수'로 function 내부에서만 실행이 되고 외부에서는 실행이 안된다.
만약 외부에서 실행하고 싶다면 function밖에서 함수를 지정해야한다. ('전역 변수')

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

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

이처럼 마지막에 콘솔에 찍은 msg는 지역변수 msg가 아닌 전역변수 msg가 실행되어 "welcome"이 출력된다.

function sayHello(name) {
	let newName = name || 'friend'
    let msg = `Hello, ${newName}`
    console.log(msg)
}
sayHello();
> "Hello, friend"
sayHello('jihyun')
> "Hello, jihyun"

이번에는 논리연산자를 사용해서 함수를 표현해보자.
매개변수에 아무 값을 넣지않으면 name은 빈 함수가 되서 false를 반환한다. 그럼 'friend'의 값을 그다음 msg변수에 넣어서 콘솔에 "Hello, friend"가 출력되는 것이다.
매개변수에 'jihyun'이라는 값을 넣으면 newName은 jihyun을 true로 받고 논리연산자인 ||은 종료되며 콘솔에 "Hello, jihyun"가 출력된다.

function sayHello(name = 'friend') {
    let msg = `Hello, ${newName}`
    console.log(msg)
}

이렇게 코드를 더 깔끔하게 쓸 수 있다. name의 값에 디폴트값 'friend'를 두면 된다.

화살표 함수

const add = function(num1, num2) {
	return num1 + num2;
}
const add = (num1, num2) => num1 + num2;

이처럼 화살표 함수를 사용하면 더욱더 간결하게 표현할 수 있다. function을 생략하고 뒤에 '=>'를 붙이면 된다. return문이 한줄이라면 {}가 ()로 바뀌고 ()는 생략이 가능하다. 매개변수가 하나라면 매개변수의 ()도 생략이 가능하다.

객체(Object)

객체란?
자바스크립트를 이루고 있는 거의 "모든 것"이 객체이다.
객체는 key와 value로 구성된 데이터인 프로퍼티(property)의 집합이다.

const yun = {
	name: 'jihyun',
    age: 26
}

yun이란 객체를 만들어 보았다. 여기에 'name'은 key, 'jihyun'은 value라는 값을 갖는다.
이 객체에 접근을 할때는 '.'혹은 []을 사용한다

yun.name
> 'jihyun'
yun['age']
> 26

객체를 추가하거나 삭제하는 방법도 있다

// 추가
yun.hairColor = 'black';
yun['footSize'] = 250;

// 삭제
delete yun.age;

그렇다면 객체의 property 존재여부도 확인할 수 있을까?

yun.birthDay;
// undefined

'birthDay' in yun;
// false

'age' in yun;
// true

또 다른 예제를 보자

function makeObject(name, age) {
	return {
    	name: name, 
        age: age,
        hobby: "coding"
	}
}
const jihyun = makeObject("jihyun", 26)
console.log(jihyun);
> Object {
	name: "jihyun",
    age: 26,
    hobby: "coding"
 }

위의 return문에서 'name: name' -> 'name'이라고 축약할 수 있고 'age: age' -> 'age'로 축약할 수 있다. 이처럼 key와 property 이름이 동일하다면 축약이 가능하다.

const jihyun = {
	name: "jihyun",
    age: "20"
}
for(a in jihyun) {
	console.log(a)
}
> "name", "age"

for(a in jihyun) {
	console.log(jihyun[a])
}
> "jihyun", 20

이처럼 a만 출력할땐 key값이 나오는데 jihyun[a]를 출력하면 value값이 나온다

method
객체 프로퍼티로 할당된 함수이다

const yun = {
	name: 'jihyun',
    age: 26,
    favoritFood: function(){        // method 함수
    	console.log('마라탕')
    } 
}
yun.favoritFood();
> "마라탕"

value안에 함수를 넣어서 표현이 가능하다.
이 코드 또한 function이 생략가능하다.

const yun = {
	name: 'jihyun',
    age: 26,
    favoritFood(){       
    	console.log('마라탕')
    } 
}

그렇다면 method함수안에 key 값을 넣을 수 있을까?

const yun = {
	name: 'jihyun',
    age: 26,
    sayHello: function() {
    	console.log(`Hello, I'm ${this.name}`);
    }
}

${yun.name} 이 아닌 ${this.name}을 써야한다 method함수 this는 객체인 yun을 가리키기 때문이다.

❗️ 다만 method함수에서 this를 이용해서 함수에 접근해야한다면 화살표함수(=>)는 사용하면 안된다.

배열(Array)

배열은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 첫번째 값은 인덱스 '0'으로 읽을 수 있다. 

let days = ['월', '화', '수']

이러한 리스트의 0번째는 '월'이고 1번째는 '화'이다.
리스트에 요소를 추가하고 싶다면 리스트명에 .push를 적어주면 된다.
또한 리스트의 제일 앞에 요소를 추가하고 싶다면 .unshift를 사용하자.

days.push('목')
let days = ['월', '화', '수', '목']

days.unshift('일')
let days = ['일', '월', '화', '수', '목']

반대로 .pop()은 리스트의 맨 마지막의 요소를 제거한다.
리스트 제일 앞에 요소를 제거하고 싶다면 .shift를 사용하자.

let days = ['월', '화', '수']
days.pop()
let days = ['월', '화']
days.shift()
let days = ['화']
profile
JiHyun
비전공자의 개발일기📝
다음 포스트

[JavaScript] 변수, 생성자함수, 객체 메소드, 심볼

0개의 댓글