[Node.js_6기 본캠프] Today I Learned_0813

▶ Javascript 기본 문법 -하-

어제에 이어, js 기본 문법을 정리해보았다. 약간의 응용에 들어가게 되니, 조금씩 헷갈리는 부분이 생기기 시작했다. 추가로 강의를 들으며 코드카타를 풀다보면 익숙해지기를 바라며.

 

1. 조건부 실행

 

let x = 10;

if(x > 0) {

    console.log("x는 양수입니다.");

}

// and 조건 (&&)을 쓰면 위의 함수와 동일한 결과 도출

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

// or 조건 (||)

// 삼항 연산자와 단축평가

let y;

let z = y || 20; // y가 undefined라면, 20이라는 값을 부여해줘

 

 

2. falsy한 값, truthy한 값

 

if (0) {

    console.log("hello");

}

if ("") {

    console.log("hello");

}

if (null) {

    console.log("hello");

}

if (undefined) {

    console.log("hello");

}

if (NaN) {

    console.log("hello");

}

if (false) {

    console.log("hello");

}

if (true) {

    console.log("hello");

} // 해당 값만 true로 판정되어, 1회만 "hello"가 출력됨. 위의 값들은 모두 falsy한 값으로 간주.

 

 

3. 객체

 

// key ~ value pair

// 하나의 변수에 여러개의 값을 넣을 수 있다.

// value에 올 수 있는 형태에는 제한이 없다.

// 1. 객체 생성 방법

// 1-1. 기본적인 객체 생성 방법

let person = {

    name: "홍길동",

    age: 30,

    gender: "남자",

};

// 1-2. 생성자 함수를 이용한 객체 생성 방법

function Person(name, age, gender) {

    this.name = name;

    this.age = age;

    this.gender = gender;

}

let personal1 = new Person("홍길동", 30, "남자")

let personal2 = new Person("홍길순", 20, "여자")

// 2. 접근하는 방법

console.log("1", person.name);

console.log("2", person.age);

console.log("3", person.gender);

// 3. 객체 메소드(객체가 가진 여러가지 기능: Object.~~)

// 3-1. Object.key() : key를 가져오는 메소드

let person2 = {

    name: "홍길동",

    age: 30,

    gender: "남자",

};

let keys = Object.key(person);

console.log("keys =>", values);

// 3-2. values

let values = Object.values(person);

console.log("values =>", values);

// 3-3. entries

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

let entries = Object.entries(person);

console.log("entries =>", entries);

// 3-4. assign

// 객체 복사

let newPerson = {}; // person 값을 복사해 넣을 객체 선언

Object.assign(newPerson, person); // ~~.assign(복사해서 넣을 곳, 복사할 대상)

console.log("newPerson =>", newPerson);

// 3-5. 객체 비교

let person_1 = {

    name: "홍길동",

    age: 30,

    gender: "남자",

};

let person_2 = {

    name: "홍길동",

    age: 30,

    gender: "남자",

};

let str1 = "aaa";

let str2 = "aaa";

console.log("answer =>", person_1 === person_2); // 객체와 배열은 데이터 값이 크기 때문에, 별도 공간에 대한 주소가 부여된다. 따라서 데이터는 같아 보이지만, 같다는 결과 값이 나오지 않는다.

console.log("answer2 =>", str1 === str2); // string은 데이터 값이 작기 때문에, 직접 저장된다. 따라서 같다는 결과 값이 나온다.

console.log(JSON.stringify(person_1) === JSON.stringify(person_2)) // 문자열화 하여 직접 데이터를 불러온다. 이 함수를 쓰면 person_1과 person_2의 데이터를 풀어서 비교하기 때문에, 같다는 결과값이 나온다.

// ... : spread operator

let perfectMan = {...person_1, ...person_2};

console.log(perfectMan);

 

 

4. 배열

 

// 1. todtjd

// 1-1. 기본 생성

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

// 1-2. 크기 지정

let number = new Array(5);

console.log(number); // 배열을 생성했지만, 상세 데이터 값을 부여하지 않았기 때문에 [ <5 empty items> ] 라는 결과가 나온다.

console.log(fruits.length); // 3 (배열에 포함된 항목의 수)

console.log(number.length); // 5 (배열에 포함된 항목의 수)

// 2. 요소 접근

console.log(fruits[0]); // 사과

console.log(fruits[1]); // 바나나

console.log(fruits[2]); // 오렌지

// 3. 배열 메소드

// 3-1. push

let fruits2 = ["사과", "바나나"];

console.log("1 =>", fruits2); // 1 => [ '사과', '바나나' ]

fruits2.push("오렌지");

console.log("2 =>", fruits2); // 2 => [ '사과', '바나나', '오렌지' ]

// 3-2. pop(배열의 마지막 요소를 삭제한다)

let fruits3 = ["사과", "바나나"];

console.log("1 =>", fruits3); // 1 => [ '사과', '바나나' ]

fruits3.pop();

console.log("2 =>", fruits3); // 2 => [ '사과' ]

// 3-3. shift(배열의 첫번째 요소를 삭제한다)

let fruits4 = ["사과", "바나나", "키위"];

console.log("1 =>", fruits4); // 1 => [ '사과', '바나나', '키위' ]

fruits4.shift();

console.log("2 =>", fruits4); // 2 => [ '바나나', '키위' ]

// 3-4. unshift(배열의 맨 앞에 요소를 추가한다)

let fruits5 = ["사과", "바나나", "키위"];

fruits5.unshift("포도");

console.log(fruits5); // [ '포도', '사과', '바나나', '키위' ]

// 3-5. splice(n번째 요소를 지우고, n번째에, 새로운 요소를 넣는다)

let fruits6 = ["사과", "바나나", "키위"];

fruits6.splice(1, 1, "포도");

console.log(fruits6); // [ '사과', '포도', '키위' ]

// 3-6. slice

let fruits7 = ["사과", "바나나", "키위"];

let slicedFruits = fruits7.slice(0, 2);

console.log(slicedFruits); // [ '사과', '바나나' ]

 

 

5. forEach, map, filter, find

 

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

// 매개변수 자리에 함수를 넣는 것: 콜백 함수

numbers.forEach(function(item){

    console.log('item입니다 =>' +item);

});

// item입니다 =>1

// item입니다 =>6

// item입니다 =>3

// item입니다 =>2

// item입니다 =>5

// (2) map: 원본 배열의 값을 가공하는 함수. 항상 원본 배열의 길이 만큼 return 된다.

let newNumbers = numbers.map(function(item){

    return item * 2;

});

console.log(newNumbers); // [ 2, 12, 6, 4, 10 ] 원본 배열의 요소들에 2를 곱한 값을 return

// (3) filter: 조건에 해당되는 값만 return 한다.

let filteredNumbers = numbers.filter(function(item){

    return item > 3;

});

console.log(filteredNumbers); // [ 6, 5 ] 배열 중 3보다 큰 요소만 return

// (4) find: 조건에 맞는 요소 중 첫번째만 return 한다

let result = numbers.find(function(item){

    return item > 3;

});

console.log(result); // [1, 6, 3, 2, 5] 중에서 3을 넘는 숫자는 6과 5가 있지만, 조건에 맞는 첫번째 요소만 return하기 때문에 6만 return 된다.

 

 

6. 반복문 for, while

// for (초기값; 조건식; 증감식;) {

// }

// i라는 변수는 0부터 시작할거야!

// i라는 변수가 10에 도달하기 전까지 계속할거야!

// i라는 변수는 한 사이클이 돌고 나면 1을 더할거야!

for (let i = 0; i < 10; i++) {

   console.log("for문 돌아가고 있음 => " + i);

}

// for문 돌아가고 있음 => 0

// for문 돌아가고 있음 => 1

// for문 돌아가고 있음 => 2

// for문 돌아가고 있음 => 3

// for문 돌아가고 있음 => 4

// for문 돌아가고 있음 => 5

// for문 돌아가고 있음 => 6

// for문 돌아가고 있음 => 7

// for문 돌아가고 있음 => 8

// for문 돌아가고 있음 => 9

// 배열과 for문은 짝꿍이다.

const arr = ["one", "two", "three", "four", "five"];

for(let i = 0; i < arr.length; i++) {

    console.log(i);

    console.log(arr[i]);

}

// ex) 0부터 10까지의 수 중에서 2의 배수만 console.log로 출력하시오.

for (let i = 0; i < 11; i++) {

    if (i >=2) {

        if (i % 2 === 0) {

            console.log(i + "는 2의 배수입니다.");

        }

    }

}

// for ~ in문

// 객체의 속성을 출력하는 문법

let person = {

    name: "John",

    age: 30,

    gender: "male",

};

// person['key']

for (let key in person) {

    console.log(key + ": " + person[key]);

}

 

 

// while

let j = 0;

while (j < 10) {

    console.log(j);

    j++

}

// ex) 3 초과 100 미만의 숫자 중 5의 배수인 것만 출력하시오.

let i = 3;

while (i < 100) {

    if (i % 5 === 0 && i >= 5) {

        console.log(i + "는 5의 배수입니다.");

    }

    i++;

}

// do ~ while (do로 먼저 함수를 실행시키고, while을 걸어주는 것)

let k = 0;

do {

    console.log(k);

    i++;

} while (i> 10);