JavaScript 기초

이미 C, C++, Python 등을 학습해본적 있는 내가 나 공부하려고 정리한 내용이니, 코딩 자체를 처음 접하는 사람이 학습하기엔 부적절한 콘텐츠임.

 

변수

세미콜론은 꼭 적어야하는 건 아니지만 적어주는게 좋다.

문자열은 따옴표로(큰따옴표 작은따옴표 상관없음) 감싸준다.

name="mike";
age=30;
 
alert(name);//팝업창으로 name 변수 출력
console.log(age);//콘솔창에서 age 변수 출력
 

이런식의 변수 선언도 가능하지만, 이것이 선언인지 대입인지 구분할 수 없기에 만약 협업을 하거나 코드가 길어지면 문제가 생길수도 있다.

let 또는 const를 활용하여 이를 해결할 수 있다.

 

let name = 'Mike';
 
// 1000 lines after...
 
let name = 'google';

이렇게 let으로 선언하면 재차 선언이 불가능하다.

const로 변수를 선언하면 재차 선언은 물론이고 변수값 수정도 불가능하다.

const 변수명은 대문자로 적어주는게 관례이다.

 

자료형

문자열은 ' " ` 셋 중 무엇으로 감싸도 상관없다. 

'는 입력하기가 편하다

"는 문자열 내부에 ' 가 들어있는 경우 구분용으로 사용할 수 있다.

`는 문자열 포매팅이 가능하다.

문자열과 문자열을 더해주면 문자열이 연결된다.

숫자와 문자열을 더해주면 숫자가 문자열처럼 연산된다.

let name = 'Mike';
 
console.log(`my name is ${name}!`);//문자열을 포매팅하려면 ${ }를 활용하자!

숫자를 넣어주면 숫자형이 되고, 사칙연산을 제공한다.

0으로 나누면 무한을 돌려준다.

문자열을 숫자로 나누면 NaN(Not a number)를 돌려준다.

 

Boolean은 true, false값을 가진다.

 

null은 아무값도 없다는 뜻이고, undefined는 값이 할당된 적이 없다는 것이다

 

이외에도 객체형(object)과 심불형이 있지만 나중에 배워보자

 

typeof 를 활용하여 변수형을 알아낼 수 있다.

let name = 'Mike';
 
console.log(typeof name)
console.log(typeof 50)

 

alert, prompt, confirm

const name=prompt('이름을 입력하세요.');//값을 입력받을수 있는 대화상자
alert('환영합니다, ' + name + '님');
 
const date=prompt('예약일을 입력해주세요.','2020-10-12')//이런식으로 default 값을 설정할수도 있다.
alert(date);
 
const isAdult=confirm('당신은 성인입니까?');//확인 취소에 따라 true/false를 받음
console.log(isAdult);

prompt에서 취소를 누르면 null을 받는다. 참고하기

prompt로 입력받은 값은 무조건 문자형이므로 형변환을 사용해야할 수도 있다.

창이 떠있는동안 스크립트가 정지된다는 점, 디자인을 바꿀 수 없다는 점 등의 단점이 존재한다.

 

형변환

자료형	특징
String()	문자형으로 변환
Number()	숫자형으로 변환. 문자열에 사용하면 NaN 리턴. true/false에 사용하면 1/0을 리턴 null을 넣으면 0을 리턴, undefined를 넣으면 NaN을 리턴
Boolean()	불린형으로 변환. 0/""/null/undefined/NaN은 false가 되고, 그 외에는 true가 된다.

 

연산자

사칙연산자 그대로 사용가능( 몫을 구하고 싶을땐 parceInt(a/b)와 같은식으로 정수만 돌려주는 함수를 활용)

+=, *=같은 연산자 그대로 사용 가능

++, --도 그대로 사용가능.

논리연산자도 C와 동일하게 사용 가능.

다만 ==는 값만 비교하기 때문이 1=='1'같은 경우 참을 반환.

타입까지 비교하려면 ===을 사용해야하고, 이를 습관화하자.

또한 문자열과 문자열에 &&, || 을 사용하는 경우 결과와 어울리는 문자열을 리턴해준다.

 

조건문

C랑 사용법 동일

 

반복문

C랑 거의 사용법 동일

break, continue도 동일하게 사용가능

for(let i=0; i<10 ; i++){
  console.log(i);
}
 
let j=0
while(j<10){
  console.log(j);
  j++;
}
 
let k=0;
do{
  console.log(k);
  k++;
}while(k<10)

switch문도 사용 가능

 

switch(평가){

  case A:

  //A일때 코드

  case B:

  //B일때 코드

  ...

}

 

함수

함수 선언 방식은 다음과 같다

function sayHello(name){
  console.log(`Hello, ${name}`);
}
 
 
let myname=prompt('이름을 입력해 주십시오');
sayHello(myname);

함수 내부에서 선언된 변수는 함수 내에서만 유효하다. 지역변수인 것이다.

하지만 함수 외부에서 선언된 변수를 함수 내에서 접근할 경우 접근 가능하다. 전역변수라고 할수있다.

하지만!! 함수 외부에서 let으로 변수를 선언하고, 같은 이름으로 함수 내에서 let으로 변수를 선언할 경우, 두 변수는 다른 변수로 인식된다. 에러가 발생하지도 않고, 함수 내에서 변수값을 변경해도 함수 외부의 동명의 변수의 값은 변하지 않는다.

매개변수는 함수의 지역변수가 된다.

 

매개변수 뒤에 등호를 활용해 default값을 설정해줄 수 있다.

function showError(errorcode='noerror')이라고 설정하면 아무 값도 전달받지 않았을 떄 errorcode에 'noerror'을 전달한다.

 

return으로 값을 반환할 수 있다.

함수 종료 목적으로 return 을 사용할 경우 undefined를 반환한다.

 

함수는 선언문이 아니라 함수 표현식으로도 사용 가능하다.

//함수선언문
function sayHello(){
  console.log('Hello')
}
 
//함수표현식
let speakHello=function(){
  console.log('Hello')
}
 
sayHello()
speakHello()

함수를 호출하면 동작은 똑같이 된다.

다만 차이점은 함수 선언문은 함수 호출 뒤에 와도 에러없이 작동하나

함수표현식은 함수 호출 뒤에 함수표현식이 기술될 경우 에러가 발생한다.

그냥 편하게 코딩하고 싶으면 함수 선언문만 사용하면 된다고 한다.

 

자바스크립트에는 화살표함수라는 것도 존재한다.

함수표현식에서 조금 더 간결해전 버전이라고 생각하면 될 것 같다.

함수 내용이 짧을때 쓰면 유용할 것 같다.

//함수표현식
let speakHello=function(){
  console.log('Hello')
}
 
//화살표함수
let printHello=()=>{
  console.log('Hello')
}
 
printHello()

리턴문이 한줄이면 굳이 중괄호를 열고 줄을 바꿀 필요 없이, 화살표 오른쪽에 적어주면 된다.

입력 매개변수가 하나라면 괄호를 생략할 수 있으나, 매개변수가 없거나 여러개인 경우 괄호를 쳐주어야 한다.

let addFunc1=function(n1,n2){
  return n1+n2
}
 
let addFunc2=(n1,n2)=>n1+n2;
 
console.log(addFunc2(3,5))
 

 

 

배열

//1차원 배열
let students=['Mike','Thomas','Sindy','Marco'];
 
//access
console.log(students[0]);
 
//rewrite
students[0]='brenda';
console.log(students[0]);

파이썬의 리스트와 유사한듯 하다.

인덱스는 0부터 시작한다.

접근과 덮어쓰기도 파이썬과 동일하다.

 

배열에는 문자, 숫자, 객체, 함수 등 다양한 것들을 넣을 수 있다.

 

 

길이를 구하는 메써드, push, pop, shift, unshift등의 메써드를 제공한다.

push와 shift는 한번에 여러 요소를 넣을수도 있다.

 

//1차원 배열
let students=['Mike','Thomas','Sindy','Marco'];
 
//get length
console.log(students.length);
 
//push
students.push('Serena');
 
//pop
console.log(students.pop());
 
//shift
students.shift('Katarina');
 
//unshift
students.unshift()
console.log(students);

배열을 순회하고자 할때 length를 활용하여 for문으로 순회할 수도 있고, for of 문을 사용할 수도 있다.

//1차원 배열
let students=['Mike','Thomas','Sindy','Marco'];
 
//반복문
//index로 배열 순회하기
for(let index=0 ; index<students.length ; index++){
  console.log(students[index]);
}
 
//for of 문으로 배열 순회하기
for(let person of students){
  console.log(person);
}