✍"자바스크립트 기초 강좌 : 100분 완성 - 코딩앙마"를 보고 요약한 글입니다.

📌 변수

  • 자바스크립트는 무조건 문자열을 따옴표로 감싸줘야한다.
  • 예약어는 변수명으로 선언하면 안된다.
  • 변수는 문자와 숫자, $와 _만 사용
  • 첫글자는 숫자가 될 수 없다.
  • 예약어 사용 안되고 가급적 상수는 대문자로 알려준다.

let(변할 수 있는 값)

한 번 선언 후에 다른 값으로 바꿀 수 있다.
의도적으로 let을 생략하고 적으면 된다.

const(변하지 않는 값)

절대로 바뀌지 않는 상수, 수정이 안된다.


📌 자료형

문자형String

const name = "Mike";
const age = 30;

const name1 = "Mike";
const name2 = 'Mike';
const name3 = `Mike`;

const message = "I'm a boy.";
const message2 = 'I\'m a boy.'

const message3 = `My name is ${name}`;
const message4 = `나는 ${30+1}살 입니다.`;
// -> 백틱이 아닌 쌍따옴표를 사용하면 변수명이 그대로 나오게 되므로 주의

숫자형Number

const age = 30;
const PI = 3.14;

console.log(1 + 2);
// 더하기, 빼기, 꼽하기, 나누기, 나머지 싹 가능

NaN(Not-a-Number)

  • Not a number, 숫자와 관련된 작업할 때 주의
  • 나온 값이 숫자가 아니라는 얘기이다.
  • 숫자를 계산할 경우 중간에 문자나 숫자가 아닌 값이 들어가서 결과가 꼬였을 경우에 주로 발생
  • 따라서 NaN을 방지하기 위해서는 출력 전에 값이 NaN인지 확인을 해야 한다.

✔️ isNaN(값);

  • 특정 값이 NaN인지 체크하는 방법
  • NaN일 경우 true, 아닐 경우 false가 떨어지게 된다.
    • NaN이라고는 하지만 “1234”처럼 전체가 숫자일 경우에는 숫자로 변환한 뒤 진행이 가능하다.
      • parseInt(값)
      • parseFloat(값)
      • 이렇게 사용해주면 문자를 숫자로 변환할 수 있다.

null & undefined

let age;
console.log(age)
// undefined

let user= null;
// null

typeof연산자

변수의 자료형을 알아낼 수 있다.

const name = "Mike";

console.log(typeof 3); // number
console.log(typeof name); // string
console.log(typeof ture); // boolean
console.log(typeof null); // object -> 객체형
console.log(typeof undefined); //undefined

📌 대화상자

alert 알려줌

  • 일방적으로 알리는 용도로 사용됨.

prompt 입력 받음

  • 값을 입력 받을 때 사용
  • 아무 내용도 안넣고 취소하면 null값이 출력됨
const name = prompt("이름을 입력하세요.");
alert("환영합니다, " + name + "님");
alert(`안녕하세요, ${name}님, 환영합니다.`);
  • 두 개의 인수를 받을 수 있다. 첫 번째 값은 메세지, 두 번째 값은 입력 받을 default값
const name = prompt("이메일을 입력해주세요", "2020-10-");

confirm 확인 받음

const isAdult = confirm("당신은 성인입니까?");
  • 확인과 취소 버튼이 같이 있다.
  • 변수를 확인해 보면 (true, false)로 나온다.
  • 사용자가 어떤 액션을 했을 때 사용자의 액션을 한 번 더 확인할 때 사용

단점

  1. 창이 떠있는 동안 스크립트 일시 정지
  2. 스타일링 불가능

📌 형 변환(Type Conversion)

  • 문자형 + 문자형 = 문자형
  • 문자형 + 숫자형 = ??
const mathScore = propmt("수학 몇점?");
const engScore = propmt("영어 몇점?");
const result = (mathScore + engScore) / 2;

console.log(result) // 결과: 이상한 값이 나옴.
  • prompt로 입력 → 무조건 문자형, 숫자를 입력해도 문자로 인식함
  • 숫자형이 아니더라도 /(나누기)연산자는 숫자형으로 인식해서 계산한다. (자동형변환)
  • 명시적 형변환 - 자동 원인을 찾기 어려운 에러를 발생시키기 쉬우므로 의도적으로 형변환을 해야함.

String()

  • 괄호 안 글자를 문자형으로 변환
console.log(
String(3),
String(true), 
String(null),
String(undefined)
)
// 결과: "3" "true" "null" "undefined"

Number()

  • 괄호 안 글자를 숫자형으로 변환
console.log(
Number("1234"),      // 1234
Number("1234asdf"),  // NaN
Number(true)         // 1
Number(false)        // 0
)
  • 주의사항
Number(null)      //0
Number(undefined) //NaN

Boolean()

  • false의 케이스(이것 이외는 모두 true로 반환)
    • 숫자 0
    • 빈 문자열 ‘’
    • null
    • undefined
    • NaN
  • 주의사항
Boolean(0)         //false
Boolean('0')       //true

Boolean('')        //false
Boolean(' ')       //true

📌 기본 연산자(operator)

나머지(%)

  • 홀수(X % 2 = 1) vs 짝수(Y % 2 = 0)
  • 어떤 값이 들어와도 5를 넘기면 안돼
    • X % 5 = 0 ~ 4 사이의 값만 반환

거듭제곱

  • `const num = 23;` ⇒ 8**

연산자 줄여서 쓰기

let num = 10;
num = num + 5;  // => num += 5;

📌 비교 연산자, 조건문 (if, else)

=

  • 할당을 의미

==(동등연산자)

  • 같다 의미
const a = 1;
const b = "1";

console.log(a == b); // true
console.log(a === b); // false , 타입 연산자

조건문

const age = 10;

if(age > 19) {
	console.log('환영합니다.');
} else if(age === 19) {
	console.log('수능 잘치세요.');
} else {
	console.log('안녕히 가세요.');
}

console.log('-----------------');

📌 논리 연산자(AND, OR, NOT)

||(OR)

  • 여러개 중 하나라도 true면 true
  • 즉, 모든 값이 false 일때만 false반환
  • 첫번째 true를 발견하는 즉시 평가를 멈춤

&&(AND)

  • 모든값이 true면 true
  • 즉, 하나라도 false면 false를 반환
  • 첫번째 false를 발견하는 즉시 평가를 멈춤

!(NOT)

  • true면 false, false면 true
const name = "Mike";
const age = 30;

// 이름이 TOM이거나, 성인이면 통과(OR)
if(name === 'Tom' || age > 19) {
	console.log('통과');
}

// 이름이 Mike이고, 성인이면 통과(AND)
if(name === 'Mike' && age > 19) { ... }

// 나이를 입력받아 성인 아니면 돌아가라고 (NOT)
const age = prompt('나이?');
const isAge = age > 19;

if(!isAge){
	console.log('돌아가..')
}

비교연산자 우선순위 (AND>>OR)

// 우선순위
// 남자이고 이름이 Mike이거나 성인이면 통과
const gender = 'F';
const name = 'Jane';
const isAdult = true;

if(gender === 'M' && (name === 'Mike || isAdult)) {
	console.log('통과')
} else {
	console.log('돌아가.')
}

📌 반복문(for, while, do while)

// 1부터 10까지 로그(for)
for(let i = 0; i < 10; i ++){
	console.log(i);
}

// 1부터 10까지 로그(while)
let i = 0;
while(i < 10){
	console.log(i);	
	i++;
}

// 1부터 10까지 로그(do while)
// 일단 한 번 실행하고 시작함
let i = 0;
do {
	//코드
	i++;
} while(i < 10){

}

break, continue

  • break: 멈추고 빠져나옴
  • continue: 멈추고 다음 반복으로 진행
// break
while(true) {
	let answer = confirm('계속 할까요?');
	if(!answer){
		break;
	}
}

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

📌 switch문

  • 케이스가 다양할 경우 보다 간결하게 쓸 수 있다.
// 사과 : 100원
// 바나나 : 200원
// 키위 : 300원
// 멜론 : 500원
// 수박 : 500원
// 사고 싶은 과일을 물어보고 가격 알려주기

let fruit = prompt('무슨 과일을 사고 싶나요?');

switch(fruit){
	case '사과' :
		console.log('100원 입니다.');
		break;
	case '바나나' :
		console.log('200원 입니다.');
		break;
	case '키위' :
		console.log('300원 입니다.');
		break;
	case '멜론' :
		console.log('500원 입니다.');
		break;
	case '수박' :
		console.log('500원 입니다.');
		break;
	default :
		console.log('그런 과일은 없습니다.');
}

📌 함수(function)의 기초

  • 한번에 한 작업에 집중
// 함수 작성
function showError(){
	alert('에러가 발생했습니다. 다시 시도해주세요.');
}

showError();

// 매개변수가 있는 함수
function sayHello(name) {
	const msg = `Hello, ${name}`;
	console.log(msg);
}

sayHello('Mike');        // 결과: "Hello, Mike"

// 이름을 모를 경우
function sayHello(name){
	let msg = `Hello`;
	if(name){
		msg += ', ' + name; // `, ${name}`
	}
	console.log(msg);
}

sayHello();             // 결과: "Hello"
sayHello('Mike');       // 결과: "Hello, Mike"

전역변수, 지역변수

  • 전역변수와 지역변수는 서로 영향을 받지 않는다.
let name = "Mike";

function sayHello(name) {
	console.log(name)
}

sayHello();
sayHello('Jane');

// 결과 : undefined "Jane"

매개변수로 받은 값은 복사된 후 함수의 지역변수가 된다. 전체 서비스에서 공통으로 바라봐야하는 변수를 제외하고는 지역변수를 쓰는 것이 좋다.

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

sayHello();             // "Hello, friend" 매개변수 입력X
sayHello('Jane');       // "Hello, Jane"   매개변수 입력O

📌 함수 표현식, 화살표 함수(arrow function)

함수 선언문 vs 함수 표현식

  • 함수 선언문 : 어디서든 호출 가능하다.

  • 함수 표현식 : 코드에 도달하면 생성

화살표 함수(arrow function)

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

// return문은 일반괄호로 바꿀 수 있다.
let add = (num1, num2) => (
		num1 + num2;
)

// return문이 한 줄이라면 괄호도 생략
let add = (num1, num2) => num1 + num2;

// 인수가 하나라면 괄호 생략
let sayHello = name => `Hello, ${name}`;

// 인수가 없는 함수라면 괄호 생략 X
// 리턴문이 있다고 해도 리턴전 여러줄의 코드가 있다면 일반 괄호를 사용할 수 없다.
// 함수 표현식 => 실행X
showError();

let showError = function() {
	console.log('error');
}

// 함수 선언문 => 실행O
showError();

function showError(){
	console.log("error");
}

// 화살표 함수
let showError = () => {
	console.log("error");
} 

// 화살표 함수로 바꾸기
/*
const sayHello = function(name) {
	const msg = `Hello, ${name}`;
	console.log(msg);
};
*/
const sayHello = (name) => {
	const msg = `Hello, ${name}`;
	console.log(msg);
};

// 인수가 2개이고 리턴문이 있는 예제
const add = (num1, num2) => {
	const result = num1 + num2;
	return result;
};

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

📌 객체(Object)

  • 객체는 중괄호로 작성하고, 키와 값으로 구성된 프로퍼티가 들어간다.
  • 각 프로퍼티는 쉼표로 구분

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

// 추가(.이나, []로 추가)
superman.gender = 'male';
superman['hairColor'] = 'black';

// 삭제 
delete superman.hairColor;

단축 프로퍼티

프로퍼티 존재 여부 확인

  • 어떤 값이 넘어올 지 확신할 수 없을 때 사용
  • 함수 인자로 받거나 API통신을 통해 데이터를 받아올 때 사용

for ... in 반복문

for(let key in superman){
	console.log(key)
	console.log(superman[key])
}

예제

// 객체
const superman = {
	name : 'clark',
	age : 30,
}

// 이름과 나이를 받아 객체로 반환하는 함수
function makeObject(name, age) {
	return {
		name : name,
		age : age,
		hobby : 'football'
	}
}

const Mike = makeObject("Mike", 30);
console.log(Mike);
/* 결과
Object {
	age: 30,
	hobby: "football",
	name: "Mike"
}
*/

// in을 이용해 프로퍼티 존재 여부 확인
console.log('age' in Mike);        // true
console.log('birthday' in Mike);   // false

// 객체 in, 나이 확인-> 성인인지 아닌지 확인하는 함수, 인수는 user객체
function isAdult(user) {
	if(!('age' in user) ||  // user에 age가 없거나
			user.age < 20){     // 20살 미만이거나
			return false;
	} else {
			return true;
	}
}

const Mike ={
	name : 'Mike',
	age : 30
};

const Jane = {
	name: "Jane"
};

console.log(isAdult(Mike));   // true
console.log(isAdult(Jane));   // false

// 객체 for ... in
const Mike ={
	name : 'Mike',
	age : 30
};

for(x in Mike) {
	console.log(x)       // Mike가 갖고 있는 key값들 출력
	console.log(Mike[x]) // Mike의 key값의 value값 출력
} 

📌 객체(Object) - method, this

fly : function() {...}fly() {...} 로 작성 가능

객체와 메서드의 관계

const user={
	name : 'Mike',
	sayHello : function(){
		console.log(`Hello, I'm ${this.name}`);  // 여기서 this는 user가 됨
	}
}
let boy = {
	name : 'Mike',
	sayHello : function() {
	console.log(`Hello, I'm ${this.name}`);
	}
}

let girl = {
	name : 'Jane',
	sayHello : function() {
	console.log(`Hello, I'm ${this.name}`);
	}
}
// 호출
// this는 실행하는 시점, 즉 런타임에 결정된다. 
boy.sayHello();    // I'm Mike
girl.sayHello();   // I'm Jane

**// 만약 sayHello함수를 화살표로 선언했다면, 동작이 전혀 달라지게 된다.**
sayHello : () => {
	console.log(`Hello, I'm ${this.name}`);  
}

boy.sayHello();    // Hello, I'm 
girl.sayHello();   // Hello, I'm 
**// this는 각 객체(boy, girl)를 가리키지 않게 됨.** 
let boy = {
	name : 'Mike',
	**sayHello : () => {
		console.log(this);  // 전역객체(브라우저 환경: window, Node js : global)
	}**
}
  • 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음
  • 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옴

예제

// method
let boy = {
	name: "Mike",
	showName: function () {
		**console.log(boy.name)**
	}
};

boy.showName(); // "Mike"

let man = boy; 
man.name = "Tom"
man.showName(); // "Mike"
console.log(boy.name) // "Tom"

boy = null;
man.showName(); 
// name이 없다는 Error => 따라서 객체 프로퍼티에 this를 사용한다.
/*
let boy = {
	name: "Mike",
	showName: function () {
		**console.log(this.name)**
	}
};
*/

📌 배열(Array)

  • 배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함 가능

length()

  • 배열의 길이
  • students.length ⇒ 30
  • 배열이 가지고 있는 요소의 개수 반환

push()

  • 배열 끝에 추가
let days = ['월','화','수'];
days.push('목')
console.log(days) // ['월', '화', '수', '목']

pop()

  • 배열 끝 요소 제거
let days = ['월','화','수'];
days.pop()
console.log(days) // ['월', '화']

shift(), unshift()

  • 배열 앞에 제거/추가
  • 배열 제일 앞에서 동작함
  • 여러 요소를 한번에 추가, 제거 가능
//추가
let days = ['월','화','수'];
days.unshift('일');
console.log(days) // ['일', '월', '화', '수']

//제거
let days = ['월','화','수'];
days.shift();
console.log(days) // ['화', '수']

반복문: for

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

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

// 월 화 수 하나씩 출력

반복문: for ... of

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

for(let day of days) {
	console.log(day)
}
// 월 화 수 하나씩 출력
profile
성공 = 무한도전 + 무한실패

0개의 댓글