1-9

조건문

🍏 if문

if (조건) {
    //true라면 실행
}

❗조건 : true 또는 false의 결과가 나오는 조건문

let x = 10;
if (x > 0) {
    console.log("x 는 양수입니다.")
}

x 는 양수입니다.

🌼y의 길이가 5보다 크거나 같으면 길이를 console.log로 출력

let y = "Hello, World!";
if (y.length > 5) {
    console.log( y.length)
}

13

🍏 if - else문

let x = -10;
if (x > 0) {
    console.log("x는 양수입니다.")
} else {
    console.log("x는 음수입니다.")
}

x는 음수입니다.

🍏 if - else if - else문

let x = 10;
if (x < 0) {
    console.log("1")
} else if (x >= 0 && x < 10) {
    console.log("2")
} else {
    console.log("3")
}

3

🍏switch
❗변수의 값에 따라, 여러 개의 경우(case) 중 하나를 선택

let fruit = "사과";

switch (fruit) {
    case "사과":
        console.log('사과입니다.');
        break;
    case "바나나":
        console.log('바나나입니다.');
        break;
    case "키위":
        console.log('키위입니다.');
        break;
    default:
        console.log('아무것도 아닙니다.');
        break;
}

사과입니다.

❗break 를 넣지 않으면

let fruit = "사과";

switch (fruit) {
    case "사과":
        console.log('사과입니다.');
    case "바나나":
        console.log('바나나입니다.');
    case "키위":
        console.log('키위입니다.');
    default:
        console.log('아무것도 아닙니다.');
}

사과입니다.
바나나입니다.
키위입니다.
아무것도 아닙니다.

1-10

조건문 중첩

🍏조건문 중첩

let age = 20;
let gender = "여성";

//미성년자 구분
if (age >= 18) {
    if (gender === "여성") {
        console.log("성인 여성입니다.");
    } else {
        console.log("성인 남성입니다.");
    }
} else {
    if (gender === "여성") {
        console.log("성인 여성입니다.");
    } else {
        console.log("성인 남성입니다.");
    }
}

성인 여성입니다.

조건부 실행

🍏and 조건(&&)

let x = 10;
x > 0 && console.log("x는 양수입니다.")

x는 양수입니다.

🍏or 조건(||)

let y; // y에는 undefined
let z = y || 20;
console.log(z)

20

❗y가 undefind이면 20을 기본값으로 세팅해줘

falsy한 값, truthy한 값

if (0) {
    console.log("0")
}
if ("") {
    console.log("\"\"")
}
if (null) {
    console.log("null")
}
if (undefined) {
    console.log("undefined")
}
if (NaN) {
    console.log("NaN")
}
if (false) {
    console.log("false")
}
if (true) {
    console.log("true")
}

true

1-11

객체

❗key -value pair
❗하나의 변수에 여러개의 값을 넣을 수 있다.

객체 생성 방법

🍏기본적인 객체 생성 방법

let person = {
    name : "홍길동",
    age : 30,
    gender : "남자"
}

🍏생성자 함수를 이용한 객체 생성 방법

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 20, "여자");

접근하는 방법

console.log(person1.name);
console.log(person1.age);
console.log(person1.gender);

홍길동
30
남자

객체 메소드(객체가 가진 여러가지 기능)

🍏Object.key()
❗key를 가져오는 메소드

let person = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};

let keys = Object.keys(person);
console.log("keys => ", keys);

keys =>  [ 'name', 'age', 'gender' ]

🍏values

let values = Object.values(person);
console.log("values => ", values);

values =>  [ '홍길동', 30, '남자' ]

🍏entries
❗key와 value를 묶어서 배열로 만든 배열 (2차원 배열)

let entries = Object.entries(person);
console.log("entries => ", entries);

entries =>  [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

🍏assign
❗객체를 복사

let newPerson = {} 
Object.assign(newPerson, person);
console.log("newPerson => ", newPerson)

newPerson =>  { name: '홍길동', age: 30, gender: '남자' }

let newPerson = {} 
Object.assign(newPerson, person, {age : 31});
console.log("newPerson => ", newPerson)

newPerson =>  { name: '홍길동', age: 31, gender: '남자' }

🍏객체 비교

let person1 = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};

let person2 = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};

console.log("answer => ", person1 === person2)

answer =>  false

let str1 = "aaa";
let str2 = "aaa";

console.log("answer => ", str1 === str2)

answer =>  true

객체는 크기가 상당히 크다. -> 메모리에 저장할 때 별도의 공간에 주소로 저장
person1, person2 는 별도 공간에 대한 주소로 저장이 된다.
person1과 person2의 주소는 각 각 다르기 때문에 false가 출력된다.

console.log(JSON.stringify(person1));
console.log(JSON.stringify(person1) === JSON.stringify(person2));

{"name":"홍길동","age":30,"gender":"남자"}
true

❗JSON.stringify(person1) : person1 주소값으로 되어있던것을 문자열화 한다.

🍏객체 병합

let person1 = {
    name : "홍길동",
    age : 30
};

let person2 = {
    gender : "남자"
};

let perfectMan = {...person1, ...person2};

console.log(perfectMan)

{ name: '홍길동', age: 30, gender: '남자' }

❗ ... : spread operator

1-12

배열

배열 생성 방법

🍏기본 생성

let fruits = ["사과", "바나나", "오렌지"];

🍏크기 지정

let fruits = ["사과", "바나나", "오렌지"];

let number = new Array(5);
console.log(number);

[ <5 empty items> ]

요소접근

console.log('fruits[0] => ', fruits[0])
console.log('fruits[1] => ', fruits[1])
console.log('fruits[2] => ', fruits[2])

fruits[0] =>  사과
fruits[1] =>  바나나
fruits[2] =>  오렌지

배열 메소드

🍏push

let fruits = ["사과", "바나나"];
console.log("1 => ", fruits);
fruits.push("오렌지");
console.log("2 => ", fruits);

1 =>  [ '사과', '바나나' ]
2 =>  [ '사과', '바나나', '오렌지' ]

🍏pop

let fruits = ["사과", "바나나"];
console.log("1 => ", fruits);
fruits.pop();
console.log("2 => ", fruits);

1 =>  [ '사과', '바나나' ]
2 =>  [ '사과' ]

🍏shift

let fruits = ["사과", "바나나", "키위"];
console.log("1 => ", fruits);
fruits.shift();
console.log("2 => ", fruits);

1 =>  [ '사과', '바나나', '키위' ]
2 =>  [ '바나나', '키위' ]

🍏unshift

let fruits = ["사과", "바나나"];
console.log("1 => ", fruits);
fruits.unshift("배");
console.log("2 => ", fruits);

1 =>  [ '사과', '바나나' ]
2 =>  [ '배', '사과', '바나나' ]

🍏splice

let fruits = ["사과", "바나나", "키위"];
console.log("1 => ", fruits);
fruits.splice(2, 1, "배");
console.log("2 => ", fruits);

1 =>  [ '사과', '바나나', '키위' ]
2 =>  [ '사과', '바나나', '배' ]

❗(a, b, "c") => a부터 b개 삭제하고 c로 갈아끼워줘

🍏slice

let fruits = ["사과", "바나나", "키위"];
console.log("1 => ", fruits);
let slicedFruits = fruits.slice(1, 2);
console.log("2 => ", slicedFruits);

1 =>  [ '사과', '바나나', '키위' ]
2 =>  [ '바나나' ]

❗slice(a, b) => a번째 인덱스에서부터 b번째 인덱스 전까지 새로운 배열로 만들어줘

1-13

배열

🍏forEach

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(item){
    console.log('item입니다 => ', item)
});

item입니다 =>  1
item입니다 =>  2
item입니다 =>  3
item입니다 =>  4
item입니다 =>  5

❗매개변수 자리에 함수를 넣는 것 : 콜백함수
❗forEach는 return값이 필요하지 않다. 안에 있는 함수가 실행되는 것.

🍏map

let numbers = [1, 2, 3, 4, 5];

let newNumbers = numbers.map(function(item){
    return item * 2;
});
console.log(newNumbers);

[ 2, 4, 6, 8, 10 ]

❗기존에 있던 배열을 가공해서 새로운 배열을 생산해 내는 역할을 한다. return 필요.
❗항상 원본 배열의 길이만큼이 return 된다.

🍏filter

let numbers = [4, 1, 5, 4, 5];

let newNumbers = numbers.filter(function(item){
    return item === 5;
});
console.log(newNumbers);

[ 5, 5 ]

❗조건에 해당되는 요소들만 뽑아 새로운 배열로 반환한다.

🍏find

let numbers = [4, 1, 5, 4, 5];

let result = numbers.find(function(item){
    return item > 3;
});
console.log(result);

4

❗조건에 해당되는 첫번째 요소만 반환한다.

1-14

for문

for (초기값; 조건식; 증감식) {
    실행문
}

🍏for문

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

0
1
2
3
4
5
6
7
8
9

❗배열과 for문은 짝꿍이다

const arr = ["일", "이", "삼", "사", "오"];
for (let i = 0; i < arr.length; i++) {
    console.log('i : ', i, '  arr[',i,'] : ', arr[i]);
}

i :  0   arr[ 0 ] :  일
i :  1   arr[ 1 ] :  이
i :  2   arr[ 2 ] :  삼
i :  3   arr[ 3 ] :  사
i :  4   arr[ 4 ] :  오

🌼0부터 10까지의 수 중에서 2의 배수만 console.log로 출력

for (let i = 0; i <= 10; i++) {
    if (i >= 2) {
        if (i % 2 === 0){
            console.log(i);
        }
    }
}

2
4
6
8
10

🍏for ~ in문
❗객체의 속성을 출력하는 문법

let person = {
    name : "John",
    age : 30,
    gender : "male"
};

for (let key in person) {
    console.log(key + " : " + person[key]);
};

name : John
age : 30
gender : male

1-15

🍏while문

while (조건) {
    //증감
}

let i = 0;

while (i < 10) {
    console.log(i);
    i++;
}

0
1
2
3
4
5
6
7
8
9

🌼while문을 활용해서, 3초과 100 미만의 숫자 중 5의 배수인 것만 출력

let i = 0;
let num = [];
while ( i < 100) {
    if (i > 3 && i % 5 === 0) {
        num.push(i);
    }
    i++;
}
console.log(num);
console.log(num);

[
   5, 10, 15, 20, 25, 30, 35,
  40, 45, 50, 55, 60, 65, 70,
  75, 80, 85, 90, 95
]

🍏do ~ while문
❗1번 실행 후 조건 확인

let i = 0;

do {
    console.log(i);
    i++;
} while (i > 10);

0

🍏break
❗for문과 항상 결합해서 쓰인다

for (let i = 0; i <= 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
};

0
1
2
3
4

🍏continue
❗for문과 항상 결합해서 쓰인다

for (let i = 0; i <= 10; i++) {
    if (i === 5) {
        continue;
    }
    console.log(i);
}

0
1
2
3
4
6
7
8
9
10

😖 콜백함수 어려움