📖 자바스크립트 기초 문법 정리
1. 반복문
1.1 for문
number=[1,2,3,4,5];
let sum = 0;
for(let i=0;i<number.length;i++){
sum += number[i];
}
console.log(sum) //151.2 while문
number=[1,2,3,4,5];
let sum = 0;
let i = 0;
while(i<number.length){
sum += number[i];
i++;
}
console.log(sum) //151.3 do ~ while문
while문과 다른점 : 조건이 참이든 거짓이든 무조건 반복문 한번은 돌고 다음 반복을 검사한다.
break: break문을 만나면, 해당 반복문을 바로 빠져나온다.continue: continue를 만나면, 해당 반복차례를 건너뛰고 그다음 반복으로 넘어간다. 즉, 반복문 자체를 빠져나오는 것이 아니라 다음반복으로 넘겨주는 것이다.
2. switch문
스위치문은 경우의 수가 너무 많을 때, if문을 대신해서 사용한다.
let fruit = prompt("구입할 과일을 입력해주세요.");
switch(fruit){
case '사과':
console.log("2000원");
break;
case '바나나':
console.log("3000원");
break;
case '파인애플':
console.log("4000원");
break;
default : console.log("다시 입력해주세요.")
}break문을 입력하지 않으면 다음 case문까지 출력되는 점을 주의하자.
디폴트는 존재하지 않는 case가 들어올 때 실행되는 코드이다.
3. 함수 function
함수는 같은 작업을 다시 작성하는 중복을 줄이며, 여러곳에서 매개변수만 바꿔가면서 쉽게 사용할 수 있도록 해준다.
function sayHello(name,age) {
console.log(`저는 ${name}이고, ${age}살 입니다.`);
}
sayHello("Jane",20); //"저는 Jane이고, 20살 입니다."
sayHello("Sue",30); //"저는 Sue이고, 30살 입니다."
sayHello("민수",25); //"저는 민수이고, 25살 입니다."4. 함수표현식, 화살표 함수
4.1 함수 선언문
//sayHello(20);
function sayHello(age) {
console.log(`저는 ${age}살 입니다.`);
}
sayHello(20);함수 선언문은 함수 선언 위아래 어디서든 함수를 호출해서 사용할 수 있다.
4.2 함수 표현식
let sayHello = function(age){
console.log(`저는 ${age}살 입니다.`)
}
sayHello(20); //"저는 20살 입니다."함수 표현식은 함수 선언된 이후에만 호출해서 사용할 수 있다. 함수 선언문이 표현식보다 더 자유로운 특징을 가진다.
4.3 화살표 함수
let sayHello = (age) => {
console.log(`저는 ${age}살 입니다.`)
}
sayHello(20); //"저는 20살 입니다."let add = ((x,y)=>{
console.log(x+y)
})
add(3,2); //5- return문이 한 줄인 경우에 코드를 간단하게 줄일 수 있다.
let add = (x,y)=>(x+y);
console.log(add(3,2)); //55. 객체(Object)
객체에 대해 접근, 추가, 삭제가 가능하다.
in연산자 : 객체에 지정한 프로퍼티가 존재하는지 확인 가능하다.
function makeObject(name, age){
return{
name:name,
age:age, }
}
const Jane={
name:'Jane',
}
const Mike = makeObject('Mike',20);
// 성인인지 확인시켜주는 함수
function isAdult(user){
if('age' in user){ // in 연산자 사용
if(user.age >19){
console.log("성인입니다.");
return; }
}
console.log("성인이 아닙니다.");
}
isAdult(Mike); //"성인입니다."
isAdult(Jane); //"성인이 아닙니다."for..in문 : 객체의 프로퍼티를 차례대로 한번씩 돌 수 있다.
function makeObject(name, age){
return{
name,
age,
score:100,
}
}
const Mike=makeObject('Mike',20);
for(key in Mike){
console.log(Mike[key]); //"Mike" 20 100
}6. 객체 (method, this)
객체의 프로퍼티로 함수도 정의할 수 있는데, 이때 할당된 함수를 method라 한다.
let boy ={
name : 'Mike',
age : 20,
isStudent(){
console.log(`${this.name}은 학생입니다.`);
}
}
boy.isStudent(); //"Mike은 학생입니다."
위 코드에서 this.name에서 this는 객체boy를 가리키고 있음을 확인할 수 있다.
- 화살표 함수는 일반함수와 달리 자신만의 this를 가지지 않기에, 화살표 함수내의 this는
외부의 this로 접근한다.
let boy ={
name : 'Mike',
age : 20,
isStudent : ()=> {
console.log(`${this.name}은 학생입니다.`);
}
}
boy.isStudent();
7. 배열
배열은 순서가 있는 리스트이다. 배열 안에는 문자, 숫자, 객체, 함수 등도 포함 가능하다. 인덱스를 이용해 순서대로 접근할 수 있고 인덱스는 0부터 시작한다.
7.1 배열 선언, 인덱스 접근, 추가/삭제 함수
push( ) : 배열 끝에 요소를 추가
pop( ) : 배열 끝의 요소를 삭제
unshift( ) : 배열 맨앞에 요소를 추가
shift( ) : 배열 맨앞의 요소를 삭제
- pop( ), unshift( )는 여러개의 요소를 한번에 추가할 수 있음을 알아두자.
let days=['월','화','수'];
console.log(days[0]); // "월"
days.push('목','금'); // 뒤에 목, 금 추가됨
console.log(days); //["월","화","수","목","금"]
days.pop(); // 금이 삭제됨
console.log(days);//["월","화","수","목"]
days.unshift('토','일');
console.log(days); //["토","일","월","화","수","목"]
days.shift();
console.log(days); //["일","월","화","수","목"]7.2 for, for..of
for..of 문으로 배열의 요소를 차례대로 한번씩 돌 수 있다.
let days=['월','화','수','목','금']; //
for(i=0;i<days.length;i++){ //길이는 5니까 0 ~ 4까지 돌리기
console.log(days[i]); //"월" "화" "수" "목" "금"
}
console.log('--------------');
for(let day of days){
console.log(day); //"월" "화" "수" "목" "금"
}length로 배열의 길이를 알 수 있다. for문에 주로 사용되며 배열이 가지고 있는 요소의 개수를 반환해준다.
유투버 코딩앙마님 강의를 보고 정리한 내용입니다.
[코딩앙마 - 자바스크립트 기초 강좌](https://youtu.be/KF6t61yuPCY)
