[코딩앙마] JS - 기초

송철진·2022년 10월 13일
JavaScript
0

개요

1. 변수

  • 세미콜론(;): 한줄이 끝났다는 의미로 생략해도 상관없지만 써주는 게 좋음
  • 따옴표("", ''), 백틱(``): 문자열(string)은 항상 따옴표로 감싸준다. 홑/겹따옴표 뭘 쓰든 상관없음.
  • 역슬래시(\): 특수문자를 인식하도록 앞에 써줌
  • 변수명으로 쓸 수 없는 Reserved Words가 있다.

변수 선언 룰
1. 문자, 숫자, $, _만 사용
2. 첫글자는 숫자X
3. 예약어는 사용X
4. 상수는 가급적 대문자로
5. 변수명은 읽기 쉽고 이해할 수 있게

let, const

  • 유일성
  • 협업에서 이미 선언된 변수를 다른 사람이 사용해버리는 것을 방지하기 위함
  • const: 변하지 않는 값 선언 시
  • let: 변할 수 있는 값을 선언 시
	let grade = "C+";
    grade = "A+"; 		//let으로 선언된 변수는 값 재할당 가능
	let grade = "B0"; 	//let으로 선언된 변수는 재선언 불가
	/*Uncaught SyntaxError: Identifier 'grade' has already been declared*/
	const grade = "C+";
	grade = "A+";		//const로 선언된 변수는 재선언, 재할당 불가
	/*Uncaught TypeError: Assignment to constant variable.*/

자료형

  • 백틱(``)은 ${ }안에 변수, 표현식을 입력하는 방식을 쓸 때 
const name = "Mac";
const message = `My PC brand is ${name}. 중고로 ${100-20}만원.`;
console.log(message);

숫자형

const number = 1/0;
const name = "Mike";
const x = name/2;
console.log(number, x);

boolean, null, undefined

  • null은 객체가 아니지만 JS초기버전의 오류로 하위호환성을 위해 수정하지 않음.
console.log(typeof null); // "object"
  • typeof: 자료형을 알아내는 연산자
    다른 개발자가 작성한 변수, API통신으로 받은 데이터의 자료형을 알아야할 때

객체형, 심볼형(따로)

2. 함수

*modal창

  • alert() : 경고창, 알려줌
  • prompt() : 입력받음
  • confirm() : 확인받음
  • console.log() : 로그

장점
1. 빠르고 쉽게 적용할 수 있다

단점
1. 창이 떠있는 동안 스크립트 일시 정지
2. 스타일링X (뜨는 위치와 모양이 정해져있고 브라우저마다 다름)

예제1

const name = prompt("이름을 입력하세요");
alert("환영합니다, " +name+ "님");	
// == alert(`환영합니다, ${name}님`);
// 취소 누르면 환영합니다, null님
// 입력없이 확인 누르면 환영합니다, 님

예제2

  • prompt()는 default값을 넣어줄 수 있음
const date = prompt("날짜를 입력하세요", "2022-10-");
alert(`오늘 날짜는 ${date}입니다.`);

예제3

  • confirm은 확인 누르면 true를, 취소 누르면 false를 반환함
const date = confirm("장비를 삭제하겠습니까?");
console.log(date);

형변환

첫글자는 대문자로~

  • String(): 문자형으로 변환
  • Number(): 숫자형으로 변환
  • Boolean(): 불린형으로 변환

예제1

  • 수학,영어 점수를 prompt로 입력받아 평균을 구하는 코드를 구현하시오
const mat = prompt("수학은 몇점입니까?");	//90
const eng = prompt("영어는 몇점입니까?");	//80
const avg = (mat + eng)/2;				//4540
console.log(avg);
// prompt()로 입력받은 값은 문자형이다
// "9080" 문자형이어도 나눗셈은 숫자형으로 '자동 형변환'된다
// 의도에 맞게 '명시적 형변환'하는 게 좋다
// -> const avg = (Number(mat) + Number(eng))/2;

예제2

console.log(String(3)); //"3"
console.log(Number("12fwww"), Number(true), Number(false),
           Number(null), Number(undefined)); //NaN 1 0 0 NaN
console.log(Boolean(0), Boolean(""), 
            Boolean(null), Boolean(undefined), Boolean(NaN)
           ); //false false false false false
//Boolean형변환은 위의 경우 외엔 true이다

console.log(Boolean(0), Boolean('0')); //false true
console.log(Boolean(''), Boolean(' ')); //false true

3. 연산자

  • 덧셈(+) 뺄셈(-) 곱셈(*) 나눗셈(/) 나머지(%) 거듭제곱(**)
  • 우선순위: 곱셈(*) 나눗셈(/) > 덧셈(+) 뺄셈(-)
  • 표현식
num = num + 5; // num += 5
num = num - 5; // num -= 5
num = num * 5; // num *= 5
num = num / 5; // num /= 5
num = num % 5; // num %= 5
  • 증가/감소 연산자
let num = 10;
let result = ++num;
console.log(num, result); //11 11	
let num = 10;
let result2 = num++;
console.log(num, result2); //11 10
// 증가연산자를 뒤에 붙이면 'let result2 = num'까지만 출력함

  • 비교연산자
    가급적 일치연산자(===)을 쓰자

  • 조건문
    if(){}else if(){}문

  • 논리연산자
    ||(OR) : 첫번째 true를 발견하는 즉시 평가 멈춤 == true
    &&(AND): 첫번째 false를 발견하는 즉시 평가 멈춤 == false
    !(NOT) : 

num = !a; // a가 false이면 num은 true

*성능 최적화 측면에서 많이 거를 수 있는 조건을 앞에 써주는 것이 좋음

예제1 NOT

나이를 입력받아 성인이 아니면 돌아가라고 하기

const age = prompt('나이는?');
const isAge = age > 19;

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

4. 반복문

조건을 확인해서 false이면 반복문을 빠져나옴

for문

	for(let i=0; i<10; i++){
    	//코드
    }

while문

조건을 확인하고 코드를 실행

	let i=0;
	for(i<10){
    	//코드
      i++;
    }

do.. while문

코드를 실행한 후 조건을 확인

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

break, continue

break: 반복문을 멈추고 빠져나옴
continue: 반복문을 멈추고 다음 반복으로 진행

예제1

확인을 누르면 확인창을 계속 띄우고, 취소를 누르면 확인창을 닫도록

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

예제2

10이하 자연수 중 짝수만 출력하는 함수

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

5. switch문


switch는 한 case가 조건에 맞으면 이후의 case도 모두 실행하기 때문에 break를 넣어준다

let name = prompt('당신의 소원은?');

switch(name){
  case '부' : //결과가 동일할 때 이렇게 줄여쓸 수 있음.
  case '돈' :
    console.log("100만원 입니다");
    break;
  case '명예' :
    console.log("명예 입니다");
    break;
  case '불로불사' :
    console.log("당신은 늙지도 죽지도 않습니다");
    break;
  default :	//if문의 else같은 것
    console.log("그런 소원은 이뤄줄 수 없습니다");
}

6. 함수(Function)

  • 중복을 줄여주는 용도
  • 한번에 한 작업에 집중
  • 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍

예제

function sayHello(name){
  let msg = 'Hello';	 //지역변수 msg는 함수 내부에서만 사용 
  if(name){
    msg += ', ' + name; 
    // 또는 msg = `Hello, ${name}`;
    // 또는 msg += `, ${name}`;
  }
  console.log(msg); 	
}

sayHello();		// "Hello"
// name이 undefined이기 때문에 if문 조건이 false가 됨.
sayHello("Mike");	// "Hello, Mike"

지역변수, 전역변수

전역변수(global variable): 어디서나 접근 가능
지역변수(local variable): 함수 내부에서만 접근 가능

let msg = 'Hello';		//전역변수 msg는 함수 내외부 모두 접근
console.log("함수 호출 전: "+ msg);	
function sayHello(name){
  if(name){
    msg += `, ${name}`;
  }
  console.log("함수 내부: "+ msg); 
}
sayHello("Mike");
console.log("함수 호출 후: "+ msg);

let으로 선언했더라도 지역변수,전역변수로 구분되어 있다면 재선언 할 수 있다
지역변수와 전역변수는 서로 영향을 받지 않는다

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

예제: 논리연산자 응용

||(OR)

function sayHello(name){
  let newName = name || "friend";
  let msg = `Hello, ${newName}`;
  console.log(msg);
}
say Hello();		// "Hello, friend" 
// 매개변수가 없으면 undefined가 들어가기 때문에 
// name은 false가 되고, 마지막 true인 "friend"를 반환함
say Hello('Jane');	// "Hello, Jane"

예제: default값 설정

default값을 'friend'로 설정하는 방법

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

예제: return

  • return은 함수의 값을 반환하거나 함수를 종료하는 목적으로 사용됨
  • return이 없는 함수, return;만 있는 함수도 undefined를 반환
function showError(){
  alert('에러가 발생했습니다');
}
function showError2(){
  alert('에러가 또 발생했습니다');
  return;
  alert('이 코드는 절대 실행되지 않습니다');
}
console.log(showError(), showError2());	// undefined undefined

함수선언문 vs 함수표현식

1. 함수 선언문: 어디서든 호출 가능

👉 더 자유롭고 편하게 코딩할 수 있어 

sayHello();		//"Hello"
function sayHello(){
  console.log("Hello");
}

인터프리터 언어(Interpreted Language)
: 순차적으로 한줄씩 실행되어 즉시 반환하는 언어

자바스크립트 내부 알고리즘
실행전 초기화 단계: 모든 선언문을 찾아서 '선언된 함수 모임'을 생성
따라서, 함수의 사용가능한 범위가 올라감(=호이스팅).
(실제로 코드가 올라간다는 건 아님)

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

let sayHello = function(){	// 1. 생성
  console.log('Hello');		// 2. 사용가능
}
sayHello();

화살표 함수(arrow function)

함수를 간결하게 작성

예제1

다음을 화살표 함수로 바꾸어라

function add(a,b){
  return a+b;
}

👉

let add = function(a,b){
  return a+b;
}

👉👉

let add = (a,b)=>{
  return a+b;
}

👉👉👉 코드가 한줄이고 return문이므로 이렇게 바꿀 수 있다

let add = (a,b)=>(a+b;)
let add = (a,b)=>a+b;

예제2

인수가 하나인 함수를 화살표 함수로 바꾸어라

let showDate = function(date){
  return `Today: ${date}`;
}

👉

let showDate = date => `Today: ${date}`;	// 괄호를 생략

예제3

인수가 없는 함수를 화살표 함수로 바꾸어라

let showError = function(){
  alert('ERROR!');
}

👉

let showError = () =>{	// 괄호 생략X
  alert('ERROR!');
}

예제4

return문이 있어도 코드가 여러줄일 때 화살표함수로

let add = fucntion(a,b){	
  const result = a+b;
  return result;
}

👉

let add = (a,b) => {	// 괄호를 생략X
  const result = a+b;
  return result;
}

7. 객체(Object)

예제

객체에 대해 성인이면 true, 성인이 아니면 false를 반환하는 함수

function isAddult(user){
  if(!('age' in user)||	// 프로퍼티 age가 없거나
     user.age<20){ 		// 20세 미만이면     
    // 존재하지 않는 프로퍼티의 초기값: undefined
    // user.age<20 만 조건으로 하면 항상 true를 반환  
    return false;
  }
  return true;
}
const Mike = {
  name: "Mike",
  age: 30
};
const Jane = {
  name: "Jane" 
};
console.log(isAddult(Jane));

method

fly()함수가 superman객체의 메소드
이렇게 function 키워드 생략 가능 

const superman={
  name: 'clark',
  age: 33,
  fly(){console.log('날아갑니다.')}
}

this

화살표 함수는 일반 함수와 달리 자신만의 this를 가지지 않는다
화살표 함수 내부에서 this를 사용하면 그 this는 외부에서 값을 가져 옴

예제1: 함수선언문의 this

let boy = {
  name: "Mike",
  sayHello: function(){
    console.log(`Hello, I'm ${this.name}`);	//this = boy
  }
}
let girl = {
  name: "Jane",
  sayHello: function(){
    console.log(`Hello, I'm ${this.name}`); //this = girl
  }
}
boy.sayHello();	 // Hello, I'm Mike
girl.sayHello(); // Hello, I'm Jane

예제2: 화살표 함수의 this

브라우저 환경: window
Node js: global

let boy = {
  name: "Mike",
  sayHello: ()=>{
    console.log(`Hello, I'm ${this.name}`);	//this != boy
  }
}
boy.sayHello();

예제3: this의 활용

let boy = {
  name: "Mike",
  showName: function(){
    // console.log(boy.name); boy가 null이 되어 Type error
    console.log(this.name);
  }
}
let man = boy; //Mike에게 boy, man 2개의 별명이 생긴 셈..
boy = null;

man.showName();	// "Mike"

예제4: this의 활용2

let boy = {
  name: "Mike",
  sayThis: () => {
    console.log(this);	//화살표함수에서 this는 window를 가리킴
  }
}
boy.sayThis();

8. 배열(Array)

  • 배열도 객체이므로 for...in을 쓸 수 있지만
    장점보다 단점이 많기 때문에 for...of로 기억하기!
  • for...of는 for문 보다는 간단하지만 index를 얻을 수 없는 단점.

메소드 push, pop

profile
송철진
검색하고 기록하며 학습하는 백엔드 개발자
이전 포스트

호스팅

다음 포스트

[얄팍한 코딩사전]Github 사용법

0개의 댓글