JavaScript basic

//let과 const : 해당 변수가 유일함을 보증 let은 변할 수 있는 값, const는 상수

//일단 모두 const로 설정하고 나중에 변경될 여지가 있는 변수만 let으로 바꾸는게 좋다.

const name1 = "pr0v3rt"

const name2 = 'chris'

const name3 = `you?`

//백틱은 문자열 안에 변수를 표현할때 사용.. 파이썬의 f"{}"랑 비슷한거인듯

const message = `my name is ${name3}` //이렇게 씀

console.log(message)

//typeof에서 null은 object로 나오는데 사실 얘는 객체 아님(오류다!!)

//prompt : 입력, confirm : 확인받기

test = prompt("your name : ")

test2 = prompt("date : ", "2022-2-") // 두번째 인자는 입력받을 디폴트 값

alert("hi,"+test+"!")

 

confirm : 확인받기

확인 누르면 test에 True, 취소 누르면 false 저장

 

위 3개는 스크립트가 일시정지된다..확인 누를때까지 암것도 안댐

 

명시적 형변환 

Number( ) - 숫자로 변환

String( ) - 문자로 변환

Boolean( ) - boolean타입.

*false인 경우 ; 0, 빈 문자열, null, undefined, NaN 이외 모두 True

 

 

함수

function 함수형( ){

  내용

};

 

함수 표현식

let 변수 = function( ){ 내용 };

이름이 없는 함수를 생성해 변수에 넣음

 

함수 선언과 표현식의 차이

함수 선언은 어디서든 호출 가능

sayHello( );

function sayHello( ){ console.log('Hello')}

정상작동함.

이는 자바스크립트 내부 알고리즘 때문. 실행 전 초기화 단계에서 코드에 선언된 모든 함수를 찾아 생성해 둠.

내부에서는 함수 선언이 호출보다 위에 있게 된다.

하지만 표현식은 원래대로 한줄씩 읽으면서 코드에 도달하면 생성된다. 

 

arrow function

SayHello( ) = function( ){ .........내용........}를 화살표 함수로 바꾸면

SayHello = ( )=>{ 내용 } 즉, function이 없어진다.

const sayHello = function(name){
  const msg = `hello, ${name}`;
  console.log(msg);
}

sayHello('pr0v3rt')

const sayHello = (name)=>{
  const msg = `hello, ${name}`;
  console.log(msg);
}
sayHello('pr0v3rt')

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

return문은 return을 생략하고 중괄호가 아닌 일반 괄호로 바꿀 수 있다. 이때 ; 도 생략..

let add = (num1,num2)=>(
  num1+num2
)

console.log(add(1,5));

 

만약 return문이나 함수 내용이 한 줄이라면 다음과 같이 아예 괄호 자체도 없애버릴 수 있다. 다시 ;을 붙여줘야한다

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

let oneargv = function(a){
  console.log(`${a}번은 이기주의야!!`);
}

oneargv(4)

위와 같이 인수가 하나일 땐 괄호를 생랼할 수 있다.

let oneargv = a=> console.log(`${a}번은 이기주의야!!`);
oneargv(4)

ㅋㅋㅋ

 

인수가 없을 때는 괄호가 생략할 수 없으며, return 전 여러 줄이 있다면 중괄호를 괄호로 바꾸거나 생략할 수 없다.

 

객체

객체는 중괄호 안의 key와 value로 구성되며 콤마로 구분한다.

마지막 콤마는 있어도 되고 없어도 되지만, 나중에 수정이 용이해서 난 그냥 붙인다.

const pr0v3rt = {
  name:'applepen',
  age : 7,
  job : NaN,
}

객체의 접근

pr0v3rt.name
pr0v3rt.job
pr0v3rt.['name']

.을 사용하거나 [ ]로 접근한다.

 

객체 추가

pr0v3rt.fav_food = '갈비탕';

그냥 겹치지 않는 키로 .을 사용해 값을 지정해주면 된다.

 

 

 

 

 

 

 

 

 

 

삭제

delete pr0v3rt.test;

delete키워드로 삭제하고싶은 프로퍼티 지정

 

단축 프로퍼티

brand = 'Samsung';
price = 100;
const phone = {
  brand : brand,
  price : price,
}

값이 세팅된 변수를 객체의 프로퍼티로 활용할 수 있다. 더 간단하게 하면 아예 변수명으로만 표현할 수 있다.

 

brand = 'Samsung';
price = 100;
const phone = {
  brand,
  price,
}

console.log(phone);

 

 

 

 

 

 

 

 

초기화하지 않은 변수를 사용하면 not defined 에러가 뜬다.

 

프로퍼티 존재 여부 확인

객체에 존재하지 않는 프로퍼티를 접근하면 에러가 뜨는 건 아니지만 undefined라고 나온다.

 

존재하지 않는 seller, owner, sell_count 접근 시 결과

프로퍼티가 객체에 존재하는지 확인할 땐 'in'을 쓴다.

console.log('age' in phone);

존재하면 True, 아니면 false를 반환한다.

 

메서드

객체의 프로퍼티로 할당 된 함수

let cat = {
  name : 'haru',
  age : 3,
  breed : 'KoreanShortHair',
  feature : function(){console.log('냥펀치를 날립니다.')}
  //줄여서 feature(){console.log('냥펀치를 날립니다.')}와 같이 쓸 수도 있다.
}

cat.feature();

 

this

객체를 가리키는 변수

feature(){console.log("냥펀치를 날립니다.")
		  console.log(this)
          }

위 cat객체의 feature메서드에 this를 출력하는 라인을 추가했다.

보면 객체 자체를 출력하고 있다. 

그런데 만약 feature메서드가 화살표 함수로 선언됐다면 this는 해당 메서드가 속해있는 객체가 아닌, 전역 객체(브라우저 환경: window, nodejs환경 : global)를 가져온다. 화살표 함수는 자신만의 this를 가지지 않기 때문이다.

때문에 객체의 메서드는 화살표함수로 선언하지 않는 것이 좋다.

 

배열

js의 배열은 숫자, 객체, 함수, 문자 등 다양한 타입을 지원한다.