1. JAVASCRIPT 기초

자바스크립트 명령어들

 

let : 방만들기

 

console.log( ? ) : ?값 출력

 

function : 다양한 명령을 하나로 묶어서 사용할떄 씀. 반복해서 사용할떄 효율적

ex.

function example () {

console.log();

};

 

example();

 

function 함수 만들때 ()안에 파라미터만들수있음 , 파라미터의 기본값 설정 가능(출력시 값할당 안해주면 기본값으로 출력)

 

ex. function examle (x,y)

 

ex. function example (x,y,z=3)

 

return 결과값 변경 , 함수호출 중단, 반환하는거(return 쓰지 않을경우 함수선언으로 undefined가 반환됨.)

---

기본적인 사칙연산 + - * / 외에

** 거듭제곱 ex. 2**8 = 2의 8승 (기본적인 사칙연산보다 먼저계산)

% 나눈후 나머지값 ex. 3%2 = 1

 

문자열에는 ' or " or `(이거쓰면 |안써도됨) 써야됨 만약 문자열에 ' " 넣고싶으면 |' or |" 으로 써주기

문자열 덧셈은 둘이 붙여쓰기임

 

불대수 결과는 true, false로 나옴

불대수 && (and)

ex. x and y x와 y가 모두 참일경우만 true

불대수 || (or)

ex. x or y x나 y 둘중의 하나라도 참일경우 true

불대수 ! (not)

ex not x x가 참일경우 거짓 x가 거짓일경우 참

 

불린

< , > , <=, >= , ==(동등하다 형변환 일어남), !=(동등하지 않다, 형변환 일어남), ===(일치하다, 형변환 일어나지 않음) , !== (일치하지 않다, 형변환 안일어남)

===, !== 이거는 문자열에도 사용가능

 

ex. '3' === 3 false

ex. '3' == 3 true

typeof (문자열로 결과값나옴)

ex. console.log(typeof 3) = number

---

 형변환

 

형변환 String

ex. console.log(string(10+5)); 이건 안됨

console.log(String(10)+String(5)); -> 105

 

형변환 Number

문자열 `hi` -> Nan

불린값 true -> 1 false -> 0

 

형변환 Boolean

문자열 ' ' ''사이에 아무것도없으면 false 있으면 true

숫자 0 -> false , Nan -> false 나머지는 true

 

자동형변환

ex. console.log(2+'2'); -> +의 경우 한쪽이 문자열이라면 문자열 연산으로 동작함

ex. 사칙연산시 불린값이 한쪽에 있는 경우 true -> 1 false -> 0으로 계산됨

ex. / 나누기의 경우 한쪽이 문자열이어도 숫자열 연산으로 동작 (대부분의 산술연사자)

 

템플릿 문자열 (코드 가독성있게 만듬)

원래는 console.log ('오늘은'+x+'일 입니다'); 이렇게 써야되는데

템플릿 문자열 사용하면 console.log(`오늘은 $(x)일 입니다.`); 이렇게 쓸수있음

활용하면 function twice(x)

            {

            return x*2

            };

            console.log(`${x}의 두배는 ${twice(x)} 입니다.`) 이렇게 사용가능

 

 

null = 의도적으로 값을 넣지 않을 때 사용 ex. let x=null

undefined = let 같은 거로 선언한다음 값을 정해주지 않은경우 실행창에서 뜸

---

할당연산자 = (오른쪽먼저 보기)

let x =5

x = x-2; (x값을 2만큼 줄여주는 코드)

x = x*2 를  x *=2 로 표현가능

 

1씩 증가시키거나 감소시킬때는

x = x+1, x+=1 , x++ 로 사용가능

 

{ } 블록문 안에서 let x=3 이런식으로 변수를 만들면 (로컬 변수)

블록문 밖에서 사용불가능

블록문 밖(위)에서 let x=3 이런식으로 변수 만들면 (글로벌 변수)

블록문 안에서도 사용가능 (만약 로컬변수가 있다면 로컬변수가 우선으로 사용)

 

상수 = 변하지않는값

프로그램 내내 변하지 않게할 값을 선언할때는 let 대신 const로 선언하자 (const로 선언하면 값 변경 불가능)

(const로 선언한 배열, 객체의 경우에는 배열, 객체값 변경 가능함)

상수 이름 지을때 다 대문자, 띄어쓰기는_로 표시 (규칙)

---

if문

if() {} (()안에 있는 조건이 참이면 {} 수행해라)

elseif() {}

else {} ( 그렇지 않으면{} 수행해라)

---

switch문 (break 를 만나기 전까지 아래에 있는 모든 동작 수행)

비교할값과 조건값이 일치할경우 동작부분 수행.

switch(비교할 값){

case 조건 값 :

동작부분

break;

case 조건 값2 :

동작부분

break;

default (조건값 모두와 다를떄) :

동작부분

}

 

범위를 사용할땐 if문 특정값을 사용할땐 switch문 사용하기

switch문에서는 문자형 -> 숫자형 변환 안됨

if문에서는 문자형 -> 숫자형 변환 자동으로 되기 떄문에 == 보다 === 사용해서 확실히 구분하기

---

 

반복문 for

for(초기화부분; 조건부분; 추가동작부분){

동작부분

}

실행과정 초기화부분 -> 조건부분 -> 동작부분 -> 추가동작부분 -> 조건부분 -> 동작부분 -> 추가동작부분 -> ....

조건부분이 만족안될때까지 for문 실행

 

초기화부분 : 반복문 시작할때 한번만 실행(변수만들기) ex. let i=1

조건부분 : ex. i<=10

추가동작부분 : ex. i++

-> 동작부분 10번실행

 

추가동작부분 없애는 대신 동작부분에 i++ 넣어도 똑같은 결과

초기화부분에서 만든 변수는 로컬변수여서 for문 밖에서 사용x

for문 밖에서 만든 변수로도 쓸수있음.

ex. let i=1

for(; i<=10;)

i++ or i+=1 or i=i+1

for문에는 ;;두개가 꼭들어가야됨

---

 

반복문 while (변수가 while 밖에서 만들어짐)

while(조건부분){

동작부분

}

조건부분을 만족하지 않을때까지 계속 작동

 

break; = 반복문에서 빠져나가는 경우에 씀

continue; = 동작과정을 건너뛸때 씀.

---

객체 (만들때 {}사용)

 

객체 사용법

let leetaehwan = {

name : '이태환'

bornYear: 2001,

body : {

height : 180,

weight : 120

}

}

점으로사용

console.log(leetaehwan.name)

-> 이태환

대괄호사용

console.log(leetaehwan[bornYear]);

->2001

객체 안에 객체의 경우

console.log(leetaehwan.body.height)

->180

 

delete 로 객체 지울수있음

delete leetaehwan.name

 

let 밖에서 객체 추가할수있음

leetaehwan['my game'] = 'leagueoflegends'

 

in 으로 객체가 있는지 확인가능 (문자열로 적어야됨)

console.log('name' in leetaehwan);

-> true

 

if('name' in leetaehwan) 처럼 조건문으로도 사용가능

 

객체 안에 함수들도 포함가능 (function 파라미터에 담긴값은 가져올떄는[]사용해야함)

let greetings = {

  sayHello : function(name) {

  sayHello[name]=name;

  console.log ('hello');

  console.log(`my name is ${name}`);

  },

  saybye : function() {

  console.log('bye');

  console.log('sorry');

  }

  }

 

  greetings.sayHello('ted')

-> hello

    my name is ted

 

for(let a in b){}

a 값에 b안에 있는 프로퍼티 이름들 할당

프로퍼티한번씩 다 훑을때까지 반복 (프로퍼티 이름이 숫자형인경우 숫자오름차순으로 정렬됨)

 

let myObject = {

'1': '자바스크립트 프로그래밍 기초', 

'2': '알고리즘의 정석',

'3': '컴퓨터 개론'

};

 

for (let key in myObject) {

  console.log(myObject[key]);

}

-> 자바스크립트 프로그래밍 기초

    알고리즘의 정석

    컴퓨터 개론

 

Date 객체 (날짜)

let myDate = new Date();   

console.log(myDate);

-> 현재시간

let myDate = new Date('2001-02-15');

console.log(myDate);

-> 2001-02-15.. 출력

let myDate = new Date();

console.log (myDate.getDay())   - (getDay() 말고도 getMonth, getHours 등등 있음 단 Month는 1부터가 아닌 0부터 시작)

-> 5

---

배열(만들때 [] 사용) (프로퍼티 이름은 필요없고 값만 사용하는경우, 순서가 있는 것들의경우, 여러값들의 묶음이 필요한경우)

let leeTaeHwan = [

'이태환',

'180',

'125',

'홈타운'

];

console.log(leeTaeHwan[0])

->이태환

console.log(leeTaeHwan[3])

->홈타운

console.log(leeTaeHwan.length); (대괄호 표기로 하려면 leeTaeHwan['length']로 적어야됨)

->4

console.log(leeTaeHwan[leeTaeHwan.length-1])

->홈타운

 

배열 추가or 수정

leeTaeHwan[4]='23살'

leeTaeHwan[10] = '안녕' -> 6번째 부터 10번째까지는 비어있는 상태로 되고 11번째에 안녕 값 추가됨

 

배열 삭제

delete leeTaeHwan[3] => 4번째 배열값이 삭제되지만 방은 가지고있고 비어있는 상태로 됨

leeTaeHwan.splice(삭제할 배열,삭제할 개수) 삭제할개수 안정하면 삭제할배열부터 젤뒤배열까지 다삭제됨

leeTaeHwan.splice(1,2) ->180, 125 삭제됨

leeTaeHwan.splice(1,2,'나는','이태','환이다') -> 180, 125 삭제되고 그자리에 나는 이태 환이다 들어감. 뒤에 배열 내용들은 방이 한칸씩 밀림

leeTaeHwan.splice(1,0,'나는') -> 아무것도 삭제 안되고 1번 자리에 '나는'이 들어감

leeTaeHwan.splice(1,1,'나는') -> 1번인덱스가 나는으로 수정됨

leeTaeHwan.shift() -> 배열 첫번째 삭제

leeTaeHwan.pop() -> 배열 마지막 삭제

leeTaeHwan.unshift('안녕') -> 배열 첫번째에 '안녕'값추가

leeTaeHwan.push('안녕') -> 배열 마지막에 '안녕'값추가

 

배열에서 특정 값찾기 (indexOf, lastIndexOf, includes )

let ted = [10,20,30,40,50,60,70,10]

console.log(ted.indexOf(10)); -> 0 (몇번 인덱스인지 리턴됨, 여러개있으면 처음값이 리턴)

console.log(ted.indexOf(100)); -> -1 (없으면 -1 리턴)

console.log(ted.lastIndexOf(10)); -> 7 (lastIndexOf는 뒤에서부터 찾음)

console.log(ted.includes(40)); -> true (있는지 없는지 확인해줌)

 

배열 뒤집기 (reverse)

ted.reverse(); -> 10, 70, 60 ,50..

 

문자열 -> 배열 ted.split()

배열 -> 문자열 ted.join()

배열에서 반복문 (for of)

(for in과의 차이점은 in은 변수에 객체의 프로퍼티 이름들이 할당되는데 for of는 배열의 값이 할당됨)

(배열의 수만큼 반복시키고싶을때 사용)

for (변수 of 배열) {

동작부분;

}

 

배열 안에 배열 넣을 수 있음

let ted = [[1 , 2] , [3 , 4]];

console.log(ted[0][1]); -> 2

---

큰숫자or 소수많은 숫자 간단하게 나타내기 (e=10)

console.log(1e9) -> 1000000000 10억

console.log(1e-9) -> 0.000000001

 

let ted=0.1278

ted.toFixed(?) -> 소수점 ?번째 값까지만 출력(뒤에값에서 반올림) - 문자열로 리턴되기때문에 숫자열로 사용하려면

Number(ted.toFixed(3)) 아니면 +ted.toFixed(3) 이런식으로 사용해야함

 

ted.toString(?) -> 숫자를 ?진수로 바꿔서 리턴해줌 ex. let ted=255 ted.toString(2) = 11111111 - 이거도 문자열로 리턴됨

 

그냥 숫자에 메소드 사용하려면 255..toString(2) 이런식으로 점 두번찍어서 사용해야함

---

Math객체의 메소드

Math.abs(?) -> ?의 절대값이 리턴됨

Math.max(?,?,?,?) -> 파라미터 값들 중 가장 큰 값이 리턴

Math.min(?,?,?,?) -> 파라미터 값들 중 가장 작은 값 리턴

Math.pow(x,y) -> x의 y제곱 값 리턴

Math.sqrt(x) -> x의 제곱근 값 리턴

Math.round(2.345) -> 2.345를 정수로 반올림해서 만듬

Math.random() -> 0이상 1 미만의 값들중 랜덤으로 리턴

Math.floor() -> 소수점버림

 

let sum = 0.1 + 0.2 -> 0.300000000000000001 이런식으로 나오는데

이걸 해결하기위해

소수점 자리의 덧셈 뺄셈 등은

Math.round(sum*10)/10 혹은

sum.toFixed(1) 이렇게 해결할수있음

---

문자열 다루기 ( 배열과 비슷한 매커니즘임)

let ted = 'Hi'

length (길이)

console.log(ted.length); -> 2

charAt(파라미터번 인덱스의 문자 가져옴)

console.log(ted.charAt(0)); -> 'H'

indexOf, lastIndexOf (문자 찾기 없는 문자면 -1 출력)

console.log(ted.indexOf('i')); -> 1

toUpperCase, toLowerCase (다 대문자로, 다 소문자로)

console.log(ted.toUpperCase()) -> HI

trim (양쪽 공백 제거)

slice(start,end) (부분 문자열에 접근하는거 start번 인덱스부터 end 바로전 문자열까지 리턴함) (end 생략하면 start부터 끝까지, 아예 다 생략하면 처음부터 끝까지 리턴함)

 

문자열과 배열의 차이는

문자열은 문자열이지만 배열은 object임

문자열은 수정하려면 전체를 다 수정해야되지만

배열은 인덱스 하나하나 따로 수정할 수 있음

---

배열과 객체 공통 특징

let x={ ted : 3 } ( x라는 방에 ted : 3이라는 값이 담긴 방으로 가는 통로가 생겼다고 생각하셈)

let y = x

이렇게 했을 때 y에 {ted : 3} 값이 담기는 게 아니라 객체의 방으로 가는 길이 뚫린거로봄

따라서 이후 y에

y.lol = 5 라는 객체를 추가했을때

x 값을 출력하면 { ted : 3 }, { lol : 5 } 이렇게 출력됨

만약 배열의 방을 수정하고 싶지 않고

그냥 y에 담긴 값만 수정하고싶으면

y = x.slice(); 로 값들만 복사한후 수정하면됨