[JS] 자바스크립트 기초 강좌 정리

YouTube 코딩앙마 님 기초 강좌 요약본.

스탠다드한 자바스크립트를 정식으로 공부해본 적은 없어서,

예전에 유튜브로 강의 들으면서 노션으로 정리해놨었는데

필요한 사람이 있을까봐 공유.

참고로 본인은 코딩 관련 개념이 어느정도 있는 상태라서 필기가 꼼꼼하진 않음!

---

변수

const a= “나는 ”;

const b= ‘따옴표’;

console.log(a+b); → “나는 따옴표”

 

const num=30; // number

console.log(a, num); → “나는” 30

console.log(a+num); → “나는 30” (+를 하면 문자열로 변환됨)

 

const new_a = `this is new ${a}` ;

1 옆에있는 ₩₩ 얘를 영어키로 쓰면 ``임. 내부에 변수 사용 가능.

 

대화상자

alert() = 메세지 띄우기 (확인버튼 존재)

prompt() = 값을 입력받고 변수에 할당 (취소, 확인버튼). 취소 누를 시 null 반환!

confirm() = 작업을 확인받는 용도. 취소, 확인 버튼 있음 → false / true 반환

 

디폴트 값 넣어주기

const name = prompt(”예약일을 입력해주세요.”, “2020-10-”); → 쉼표 뒤의 것이 default로 입력되어 표시됨

 

const delete_on = confirm(”정말 삭제하시겠습니까?”);

단점 : 스크립트 일시정지, 스타일링 불가(디자인 중구난방)

형변환

prompt로 숫자 입력을 받고 연산 수행 시 입력받은 값은 항상 문자형이다!

따라서 연산 시 이상하게 나옴 (문자열이 더해진 후 자동형변환으로 연산됨)

→ 명시적 형변환 필요

String() : 문자열로 변환

Number() : 숫자로 변환, 숫자가 아닌 경우 NaN 반환 (Not a Number), true/false → 1/0

Boolean()

위의 false 예시를 제외하고는 모두 true.

연산

• • • / % **(거듭제곱)

+= -= *= 등 사용가능.

증가 연산자, 감소 연산자 : ++, —

let new= num++ : 증가시키기 전의 값을 변수에 넣음

let new= ++num : 증가시킨 값

비교 연산자

==(동등연산자), !=, >= 등

=== : 타입까지 비교해서 t/f 반환 (일치 연산자)

 

조건문 if

if(age > 19) {

console.log(환영합니다);

}

else if(age === 19){ console.log(수능 화이팅); }

else{ console.log(19세 미만 입장불가); }

논리연산자 ||, &&, !

or은 첫 번째 true를 발견하는 즉시 평가를 멈춤. → 범위가 작은 조건부터 먼저 걸어놓는게 좋음

and는 첫 번째 false를 발견하는 즉시 평가를 멈춤.

우선순위 : && > ||, &&에서 false가 반환되어도 ||에서 true가 나오면 true.

우선순위를 변경하고싶다면 ( ) 괄호 사용!

반복문 LOOP

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

→ 초기값, 조건(false가 되면 멈춤), 코드 1회 실행 후의 작업

let i=0;

while (i<10) { ~; i++; } → i를 내부에서 값 증가시켜줘야 loop가 멈추게 됨.

do{ ~; i++; } while(i<10) → 조건문이 뒤에 있기 때문에 적어도 한번은 실행됨.

break, continue

 

Switch

switch( fruit ){

case ‘사과’ :
	console.log(’사과입니다’);
	break; // 스위치문에서는 break 필수

case ‘포도’ :
case ‘거봉’ :
	console.log(’포도입니다’);
	break;

default :
	console.log(’다른 과일입니다’);
}

함수

기본값 (함수 선언문)

function sayHello(name) {

let newName = name || ‘friend’; → 매개변수 입력 없을 시 default값으로 변수할당

let msg = Hello, ${newName};

console.log(msg)

}

or function sayHello(name = ‘friend) 로 선언

→ 매개변수 자리에 바로 default 넣어주기

 

sayHello(); // → Hello, friend

sayHello(’Jane’) // → Hello, Jane

 

function add(num1, num2) {

return num1+num2;

}

→ return; or 리턴값이 없을 시 undefined를 반환.

• 함수 선언문 : 어디서든 호출 가능. hoisting
• 함수 표현식 : 코드에 도달하면 생성. 따라서 선언 이후에만 사용 가능

화살표 함수(arrow func)

코드 내용이 한 줄이면 함수 내용에 소괄호 사용 가능!

let add = (num1, num2) ⇒ (num1 + num2; ); // return이 한 줄이라면 return 생략 가능

let sayHello = **name** ⇒ Hello, ${name}; // 인수가 한 개라면 괄호 생략 가능

let showError = () ⇒ { alert(’error’); }; // 인수가 없을 경우는 괄호 생략 불가

 

코드 내용이 여러줄이라면 { } 사용해야함

 

let add = {num1, num2) ⇒ {

const re = num1 + num2;

return re;

};

 

Object (객체)

프로퍼티 = 키 : 값

접근

superman.name or superman[’age’]

추가

superman.gender = ‘male’;

superman[’hairColor’] = ‘black’; // 없는 내용을 쓰면 추가됨

삭제

delete superman.hairColor;

이름과 나이를 받아서 객체를 반환하는 함수

function makeObject(name, age){

  return{

    name : name,

    age : age,

    hobby : ‘football’

  };

}

const Mike = makeObject(”Mike”, 30);

console.log(Mike);

 

객체 in / 객체를 함수에 넣을 때

function isAdult(user) {

  if (!(’age’ in user) || user.age < 20) { return false; } // user에 age가 없거나 20살 미만일 때

  return true;

}

 

Method (메소드)

• 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음!!
• 그래서 화살표 함수 내부에서 this 사용 시, 그 this는 외부에서(상위 scope에서) 값을 가져옴.

그러므로 화살표 함수는 콜백 함수의 this와 외부 함수의 this간 불일치 문제를 해결 가능!

콜백 함수의 this 문제를 해결할 수 있다

 

하지만 초보자들은 헷갈리니까..객체내부 메소드 정의 시 화살표 함수는 안 쓰는게 좋습니당

 

배열 (Array) : 순서가 있는 리스트

index는 0부터 시작

js의 배열은 문자, 숫자, 객체, 함수 등을 포함 가능

length : 배열 길이

push() : 배열 끝에 추가

pop() : 배열 끝 요소 제거

shift(), unshift() : 배열 앞에 제거, 추가. 한번에도 가능

for문 사용 용이

for … of 사용 가능! for(let i of days) { }