자바스크립트(JavaScript) 기초
유튜버 코딩앙마의 자바스크립트 기초 강좌를 보고 정리하였다.
alert() : 경고창
console.log() 로그 찍는 함수
console.log() 안에서 , 추가하여 여러개 출력도 가능
변수
let : 변할 수 있는 값
const : 절대로 바뀌지 않는 상수
자료형
문자형
const message = "I'm a boy"; //“ ”
const message1 = 'I\'m a boy';
//‘‘을 사용할 때 그 안에서 작은 따옴표를 또 쓰는 경우 \을 써줘야 함
const message2 = `My name is ${name}`;
//`` 말고 "" 사용하면 ${name} 그대로 출력되니 주의
// 문자열 내부의 변수를 표현할 때 편리
const message3 = `나는 ${30+1}살 입니다`;
숫자형
숫자형은 사칙연산 가능
더하기(+) 빼기(-) 곱하기(*) 나누기(/) 나머지(%)
숫자를 0으로 나누면 -> infinity
문자를 숫자로 나누면 -> NaN(Not a Number)
Boolean
참이면 true 출력
거짓이면 false 출력
null, undefined
- 변수를 선언만 하고 아무것도 할당하지 않으면 undefined를 출력
- null : 존재하지 않는다는 뜻
typeof
변수의 자료형을 알아냄
다른 개발자가 작성한 변수의 타입을 알아야 하거나 api 통신등을 통해 가져온 데이터를 타입에 따라 다른 방식으로 처리해야 할 때 많이 사용
대화 상자 ( alert, prompt, confirm )
- alert( ) 알려줌
-
prompt( ) 입력 받음
const name = prompt("이름을 입력하세요"); alert("환영합니다 "+ name + "님"); alert(‘환영합니다 ${name}님`); const name = prompt("날짜를 입력하세요", ‘2023-02-‘); // 디폴트값 - confirm( ) 확인 받음, alert와 다른 점 : 확인과 취소 버튼이 있다
사용 예) 결제 확인, 취소 확인
취소 버튼 누르면 null이 됨
기본적으로 제공되는 창의 단점
- 창이 떠있는 동안 스크립트 일시 정지
- 스타일링 불가
형 변환(Type conversion)
- String() 문자형으로 변환
- Number() 숫자형으로 변환
- Boolean() 불린형으로 변환
Number(true)-> 1
Number(false)-> 0
Number(“문자”)-> NaN
Boolean()
false
- 숫자 0
- 빈 문자열 ’‘
- null
- undefined
- NaN
이 외에는 모두 true
주의사항
Number(null) //0
Number(undefined) //NaN
Boolean(0) //false
Boolean(‘0’) //true
Boolean(‘’) //false
Boolean(‘ ‘) //true (공백 문자열은 true)
연산자
-
거듭제곱 = **
-
사칙 연산 중 우선순위는 곱하기, 나누기가 더하기 빼기보다 높다.
-
+=, -= ++,– 등으로 연산자를 줄여쓸 수도 있다.
-
비교 연산자 : < , > , <= , >= , == , !=
-
일치 연산자 : === 타입까지 비교해주는 연산자이다.
const a = 1; const b = "1"; console.log(a==b); //true console.log(a===b); //false
조건문
if 문
const age = 19;
if( age>19 ){
console.log('안녕하세요');
} else if( age == 19){
console.log('수능 잘 보세요');
} else{
console.log('안녕히 가세요');
}
논리 연산자
-
|| (OR)
여러개 중 하나라도 true 면 true, 모든 값이 false일 때만 false 반환 -
&& (AND)
모든값이 true면 true, 하나라도 false면 false 반환 -
! (NOT)
true면 false, false면 true
OR는 첫번째 true를 발견하는 즉시 평가를 멈춤
AND는 첫번째 false를 발견하는 즉시 평가를 멈춤
OR
//이름이 TOM 이거나 성인이면 통과
const name = "Mike";
const age = 30;
if(name === 'TOM' || age > 19){
console.log('통과');
} else {
console.log('탈락');
}
AND
//이름이 TOM 이고 성인이면 통과
const name = "Mike";
const age = 30;
if(name === 'TOM' && age > 19){
console.log('통과');
} else {
console.log('탈락');
}
NOT
//성인이 아니면 탈락
const age = prompt('나이?');
const isAdult = age > 19;
if(!isAdult){
console.log('탈락');
}
우선 순위
//남자이고, 이름이 Mike이거나 성인이면 통과
const gender = 'F';
const name = 'Jane';
const isAdult = true;
if(gender ==='M' && name === 'Mike' || isAdult){
console.log('통과');
} else {
console.lod('돌아가');
}
이 경우에 결과값은 “통과”로 나온다.
이유는 AND가 OR 보다 우선순위가 높기 때문
if( (gender ===’M’ && name === ‘Mike’) isAdult
| gender ===’M’ && name === ‘Mike’가 먼저 평가 되고 그 뒤에 | isAdult 부분이 평가 되는데 성인이면 무조건 true가 나오기 때문에 결과가 “통과”로 나오는 것이다. |
의도대로 코드를 작성하려면
if(gender ===’M’ && (name === ‘Mike’ isAdult))
이렇게 묶어주어야 한다.
반복문
for
for (let i=0; i<10; i++){
console.log(i);
}
while
let i = 0;
while (i<10){
console.log(i);
i++;
}
do while
let i = 0;
do{
console.log(i);
i++;
} while (i<10)
break, continue
break : 만나는 즉시 코드 실행 멈추고 빠져나옴
continue : 멈추고 반복문을 빠져나오지는 않고, 다음 반복으로 진행
//break
while(true){//무한 반복
let answer = confirm('계속 할까요?');
if(!answer){
break;
}
}
//continue
for(let i = 0; i < 10; i++){
if(i%2){
continue;
}
console.log(i);
}
명확한 횟수가 정해져 있으면 for문 그렇지 않으면 while 주로 사용
switch
switch
let fruit = prompt('무슨 과일을 사고 싶나요?');
switch(fruit){
case '사과' :
console.log('100원 입니다.');
break;
case '바나나' :
console.log('200원 입니다.');
break;
case '키위' :
console.log('300원 입니다.');
break;
case '멜론' :
console.log('500원 입니다.');
break;
case '수박' :
console.log('500원 입니다.');
break;
default :
console.log('그런 과일은 없습니다.');
}
함수
매개변수가 없는 함수
function showError(){
alert('에러가 발생했습니다. 다시 시도해주세요.');
}
showError();
매개변수가 있는 함수
function sayHello(name){
const msg = `Hello, ${name}`;
console.log(msg);
}
sayHello('Mike');
sayHello('Tom');
//사용자 이름 모르는 경우도 고려할 경우
function sayHello(name){
let msg = `Hello`;
if(name){
msg = `Hello, ${name}`;
}
console.log(msg);
}
sayHello();
msg는 함수 내부에서 사용하는 지역 변수 이므로 함수 밖에서는 사용할 수 없다.
전역 변수와 지역 변수
let msg = "welcome";
console.log(msg);
function sayHello(name){
let msg = "Hello";
console.log(msg + ' ' + name);
}
sayHello('Mike');
console.log(msg); 출력 >"welcome" "Hello Mike" "welcome"
전역 변수와 지역 변수2
let name = "Mike";
function sayHello(name){
console.log(name);
}
sayHello();
sayHello(Jane);
출력
undefined
“Jane”
매개변수로 받은 값은 복사된 후 함수의 지역변수로 된다.
전역변수가 많아지면 관리가 힘들어지므로 가급적 지역변수 사용
매개 변수 기본값 설정
function sayHello(name = 'friend'){
let msg = `Hello, ${name}`;
console.log(msg);
}
sayHello();
sayHello(Jane);
return으로 값 반환
function add(num1, num2){
return num1+num2;
}
const result = add(2,3);
console.log(result);
return은 함수를 종료하는 목적으로 사용되기도 한다.
함수 표현식
함수 선언문
function sayHello(){
console.log(‘Hello’);
}
함수 표현식
let sayHello = function(){
console.log(‘Hello’);
}
함수 선언문 : 어디서든 호출 가능
함수 표현식 : 코드에 도달하면 생성, 그 이후에만 사용 가능
화살표 함수
//1)function 없애고 화살표 추가해서 표현 가능
let add = (num1, num2) => {
return num1 + num2;
}
//2)이 예제는 코드 본문이 한 줄이고 return문이 있기 때문에 return문 없애고 중괄호를 소괄호로 바꿀 수 있음
let add = (num1, num2) => (
num1 + num2;
)
//3)return문이 한 줄이라면 괄호 생략 가능
let add = (num1, num2) => num1 + num2;
//4)인수가 하나라면 괄호 생략 가능
let sayHello = name => `Hello, ${name}`;
//5)인수가 없으면 괄호 생략 불가
let showError = () => {alert{'error!'}}
//6)return 전에 여러 줄의 코드가 있으면 소괄호 사용 불가
let add = (num1, num2) => {
const result = num1 + num2;
return result;
}
객체
객체 생성
const superman = {
name:'clark',
age:33,
}
객체는 중괄호로 생성
키와 값으로 구성된 프로퍼티가 들어감, 쉼표로 구분 마지막 쉼표는 없어도 되지만 있는게 수정, 삭제, 이동에 용이
접근, 추가, 삭제
//접근
superman.name
superman['age']
//추가
superman.gender = 'male';
superman['haircolor'] = 'black';
//삭제
delete superman.hairColor;
단축 프로퍼티
const name = 'clark';
const age = 33;
const superman = {
name, //name:name
age, //age:age
gender : 'male',
} <br/><br/>
프로퍼티 존재 여부 확인
const superman = {
name:'clark',
age:33,
}
superman.birthDay; //undefined
'birthDay' in superman; //false
'age' in superman; //true <br/><br/>
for ~in 반복문
for(let key in superman){
console.log(key)
console.log(superman[key])
} 객체를 순회하면서 값을 얻을 수 있음
이름과 나이를 받아서 객체를 반환하는 함수
function makeObject(name, age){
return{
name,
age,
hobby: "football"
};
}
const Mike = makeObject("Mike", 30);
console.log(Mike);
method, this
method : 객체 프로퍼티로 할당된 함수
const superman = {
name:'clark',
age:33,
fly : function(){
console.log('날아갑니다.')
}
}
//이렇게 작성할 수도 있음
const superman = {
name:'clark',
age:33,
fly(){
console.log('날아갑니다.')
}
}
this
let boy = { name : 'Mike',}
let girl = { name : 'Jane',}
sayHello : function(){
console.log(`Hello, I'm ${this.name}`);
}
boy.sayHello();
girl.sayHello();
- 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음
- 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져 옴
화살표 함수에서 this는 윈도우 전역 객체를 가리키게 됨
배열(array)
배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함될 수 있음
length : 배열의 길이
push() : 배열 끝에 추가
pop() : 배열 끝 요소 제거
shift, unshift : 배열 앞에 제거,추가
//추가
days.unshift('일');
//제거
days.shift(); //['일','월','화','수'];
console.log(days); //['월','화','수'];
push,unshift는 여러 요소 한번에 추가도 가능
for ~of
let days = ['월','화','수'];
for(let day of days){
console.log(day)
}
for문 보다는 간단하지만 index를 못 얻는다는 단점이 있음
Leave a comment