자바스크립트 기초 강좌 : 100분 완성

GUNHEE LEE·2024년 2월 5일

JS

목록 보기

1/1

240204 - 240205
자바스크립트 기초 강좌 : 100분 완성 강의를 수강하고 공부한 내용을 정리한 것입니다.

240204

출력 함수

alert(): 브라우저 경고창 출력하기
console.log(): 콘솔창에 출력하기

변수의 자료형

let, const
차이점: let은 변수에 다른 값을 재할당할 수 있지만, const는 상수로 한 번만 선언이 가능하며 값을 바꿀 수도 없다.

변수의 약속

1. 변수는 문자와 숫자, $만 사용한다.
1. 첫 글자는 숫자가 될 수 없다.
1. 예약어는 사용할 수 없다.
1. 가급적 상수는 대문자로 작성한다.
1. 변수명은 읽기 쉽고 이해하기 쉽게 선언한다.

자료형

\뒤에 선언하면 특수문자로 인식한다.
₩벡틱은 문자를 변수로 표현해줄 때 효과적이다.
- ${변수명}
숫자형은 사칙연산이 가능하다.
NaN = Not A Number
boolean = true, false
null = 값이 존재하지 않는다 / undefined = 값이 정의되지 않았다.
typeof 연산자는 변수의 자료형을 출력한다.
숫자형을 문자형과 더할 수 있다. 다만 이 경우, 숫자형이 문자형으로 변환됨에 주의하자.

객체형

null ≠ 객체

주석

대화상자

alert, prompt, confirm
alert() = 일방적인 알림 용도
prompt() = 사용자에게 메세지를 보여주고, 어떤 값을 입력받을 때 사용한다.
- 취소를 입력하면 null이 입력된다.
- 인수 = 함수의 입력에 들어가는 값
- 두 개 이상의 인수가 들어가면 마지막 인수가 디폴트 인수가 된다. 안내 사항을 전달할 때 좋다.
- prompt()로 입력받은 값은 문자형으로 입력된다.
confirm() = 사용자로부터 확인 받을 때 사용한다.
- alert()와 다른 점은 취소버튼이 추가되어 있음.

대화상자 예시코드

const name = prompt("메세지");
alert("안녕하세요" + name + "님.");
alert(`안녕하세요 ${name}님.`);

기본 알림창의 단점

스크립트가 일시정지된다.
스타일링이 불가능하다. 디자이너가 싫어한다.

자료형 변환

String() = 문자형으로 변환
Nubmer() = 숫자형으로 변환
- true 와 false는 Number()로 형변환하면 1과 0이 나온다.
사칙연산에는 자동형변환이 적용된다. 원인을 찾기 힘드니까 의도를 가지고 명시적 형변환을 해주는 것이 좋다.

암기: 자료형 주의사항

Number(null) // 0
Number(undefined) // NaN
        
Number(0) // false
Number('0') // true
Number('') // false
Number(' ') // true

연산자

증감연산자
- 앞에 붙이면 증가한 값을 반영, 뒤에 붙이면 값을 반영한 후 증가. C랑 똑같다.
=== : 일치연산자, 자료형까지 검사한다. 동등연산자보다 일치연산자로 검사하는게 좋다.

조건문

if(조건문의 내용){
	조건을 만족하면 수행하는 부분
}

논리연산자

|| : OR, 첫 번째 true를 발견하는 즉시, 평가를 멈춘다.
&& : AND, 첫 번째 false를 발견하는 즉시, 평가를 멈춘다.
! : NOT
어떤 평가로 순서를 배치하는지도 중요하다. 성능 최적화를 위함.

반복문

// for
for(let i;i < 10;i++){
	// 반복할 코드
}

// while
let i = 0;
while(i<10){
	// code
	i++;
}

// do while
let i = 0;
do{
// code
	i++;
} while(i<10)

반복문 탈출 - break, continue

break = 멈추고 반복문 탈출
continue = 멈추고 다음 반복문

개발자는 항상 좀 더 쉽게 일하고, 코드를 줄이기 위해 노력해야 한다. 그래야 성능도 좋아진다.

Switch 문

if else 를 알고 있으면 몰라도 된다.
case가 많을 때 사용하기 유용하다는 것만 알면된다.

switch(평가){
	case A:
	// A일 때 코드
	case B:
	// B일 때 코드
	default:
	// code
}

switch는 case 이후 모든 문장을 출력한다. 각 case마다 break를 걸어주자.
case에 없는 입력값이 주어지면 제대로 동작한 건지, 오류가 난건지 사용자 입장에서 모르기 때문에 default를 사용한다.

함수(function)

자주 사용하거나 여러 곳에서 사용하는 코드라면 하나로 만든 다음 재사용한다. 중복되는 코드도 줄어들고 재사용성도 좋아진다.
브라우저 내장함수: console, alert, confirm

// 함수 선언 예시
function sayHello(name){
	console.log(`Hello, ${name}`);
}

매개변수가 여러개라면 쉼표로 구분할 수 있다.
let으로 선언한 변수는 다시 let으로 선언할 수 없다.

240205

전역변수와 지역변수는 서로 간섭을 받지 않는다.
함수 선언시 매개변수의 디폴트 값을 선언해줄 수 있다.

// default value

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

sayHello() 
// result = friend
sayHello('Jane')
// result = Jane

// return으로 값 반환
function add(num1, num2){
	return num1 + num2;
}

const result = add(2,3);
console.log(result);
// 5

return 문이 쓰이거나 return만 단독으로 쓰이면, undefined를 반환한다.
return 만 선언해서 함수를 종료하는 목적으로도 사용한다.
읽기 쉽고 어떤 동작인지 알 수 있게 네이밍한다.

함수 선언문 vs 함수 표현식

순차적으로 코드를 읽으면서 즉시 결과를 반환하는 언어를 인터프리터 언어라고 한다.
함수를 함수 선언문으로 작성하면 어느 위치에서든 함수를 선언하고 사용할 수 있다.
자바스크립트 내부 알고리즘은 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해둔다. 함수의 사용 가능 범위는 코드보다 높아진다. 이를 Hoisting이라고 한다.
함수 표현식은 코드에 도달했을 때 함수가 생성된다. 함수 표현식으로 함수를 작성할 경우, 함수 표현식 이후에만 해당 함수를 사용할 수 있다.
함수 선언문이 함수 표현식보다 더 자유롭다.

화살표 함수(arrow function)

한 줄씩 존재하는 건 대부분 생략 가능하다.
return 문 하나만 작성되는 경우, 소괄호로 나타낼 수 있다.

// 화살표 함수 변환 전
const sayHello = function(name) {
}
// 화살표 함수 변환 후
const sayHello = (name) => {
}

// 전
const add = function(num1, num2) {
	const result = num1 + num2;
	return result;
}

// 후
const add = (num1, num2) => num1 + num2;

화살표 함수는 ES6 이후 활발하게 사용되고 있기 때문에 필수로 알고 있어야 한다.

객체(object)

객체는 key와 value인 property로 구분된다. 파이썬의 dictionary와 비슷하다.
각 property는 쉼표로 구분한다. 마지막 쉼표는 없어도 무방하지만 있는게 수정이 용이하다.
접근, 추가, 삭제

// Object
const superman = {
	name:'clark';
	age;33,
}

// 접근
superman.name // 'clark'
superman['age'] // 33

// 추가
superman.gender = 'male';
superman['haircolor'] = 'black';

// 삭제
delete superman.haircolor;

in 연산자를 사용하면 객체에 특정 property가 존재하는지 검사할 수 있다.
for(let key in object) {} 로 선언한다.

// for in 문 예제
const Mike = {
	name: 'Mike',
	age: 33,
}

for(x in Mike){
	console.log(x); // 'name', 'age'
	console.log(Mike[x]); // 'Mike', 33
}

객체 method / this

객체 property로 할당된 함수를 method라고 부른다. (C)
fly: function() {} 를 fly() {} 처럼 단축 구문으로도 작성할 수 있다.
객체와 method의 관계 (this)
내 자신의 property를 method에 넣고 싶다면 this를 사용한다.
```
// 객체 지향 프로그래밍
sayHello: function() {
	console.log('Hello, I'm ${this.name}');
}

let boy = {
	name: 'Mike',
	sayHello(),
}

let girl = {
	name: 'Jane',
	sayHello(),
}
```
- this는 런타임에 결정된다.
- 주의: 화살표 함수는 this를 가지지 않는다.
- 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져온다. (전역객체를 가리킨다.)
- this가 가장 어렵다.
- 메소드에서는 this를 활용하는데 가장 좋다.
- 메소드는 화살표 함수로 작성하는 것을 지양한다.

Array

선언

let 배열명 = [요소1, 요소2, … 요소n개];

접근

배열명.[index값]

수정

배열명.[index값] = ‘수정값’;

특징

숫자, 문자, 함수, 객체 포함 가능

길이

배열명.length;

뒤에 추가

배열명.push(추가요소);

뒤에 제거

배열명.pop();

앞에 추가

배열명.unshift(추가요소);

앞에 제거

배열명.shift();

추가(push, unshift)의 경우 여러 개를 추가할 수도 있다.

반복문 for

for(let index=0;index<days.length;index++){
console.log(days[index])
}

for of: for문 보다 간단하지만 인덱스를 얻지 못한다는 단점이 있다.

정리

강의로 학습한 내용은 다음과 같다.

변수, 자료형 이해
console로 출력 확인
alert, prompt, confirm
연산자, 조건문, 반복문, 함수와 객체, 배열에 대해 간단하게 학습함.

GUNHEE LEE

새싹 개발자