TIL 240813 (자바스크립트 기초문법 다지기 2)

10. 조건문 (if, else if, else, switch)

10 - 1 기본적인 if 문

if (true 또는 false가 나올 수 있는 조건) {

}

 

let y = "hello world";

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

if (y.length >= 5){

    console.log(y.length);

}

 

10 - 2 if - else 문

let x = 10;

if (x % 2 === 0) {

    // main logic #1

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

} else {

    // main logic #2

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

}

 

10 - 3 if - else if - else 문

let x = 10;

if (x < 0) {

    // main logic #1

    console.log('1');

} else if (x >= 0 && x < 10) {

    // main logic #2

    console.log('2');

} else {

    // main logic #3

    console.log('3');

}

 

10 - 4 switch

변수 값에 따라, 여러 개의 경우 중 하나를 선택

// 마지막 케이스는 default (case 중 아무 곳에도 해당하지 않을 때)

// case 마지막에는 break 입력 필수

let vegetable = "당근";

switch (vegetable) {

    case "오이":

        console.log('오이입니다.');

        break;

    case "토마토":

        console.log('토마토입니다.');

        break;

    case "당근":

        console.log('당근입니다.');

        break;

    default:

        console.log('아무것도 아닙니다.');

        break;

}

 

11. 조건문의 중첩

let score = 88;

if (score >= 90) {

    console.log("학점: A");

} else if (score >= 80) {

    console.log("학점: B");

   

    if (score >= 85) {

        console.log("장학금 대상입니다.");

    } else {

        console.log("장학금 대상이 아닙니다.");

    }

} else if (score >= 70) {

    console.log("학점: C");

} else {

    console.log("학점: F");

}

 

12. 조건부 실행

let temperature = 20;

if (temperature > 30) {

    console.log("오늘은 더운 날");

} else if (temperature >= 20 && temperature <= 30) {

    console.log("오늘은 따스한 날");

} else {

    console.log("오늘은 쌀쌀한 날");

}

 

13. 단축평가

단축평가는 논리 연산자 &&와 ||를 사용하여 조건을 평가할 때 쓰기 좋다.

13 - 1 && 연산자 사용

let user = {

    name : "Yeon",

    age : 26,

    Live : true

};

// 사용자가 활성화되어 있을 경우 이름을 출력

let message = user.Live && `사용자 이름: ${user.name}`;

console.log(message); // "사용자 이름: Yeon "

 

13 - 2 || 연산자 사용

let userRole = null;

// 사용자 역할이 없을 경우 기본 역할을 설정

let role = userRole || "게스트";

console.log(role); // "게스트"

 

14. falsy 한 값과 truthy 한 값

if (0) {

    console.log("crystal");

}

if ("") {

    console.log("crystal ");

}

if (null) {

    console.log("crystal ");

}

if (undefined) {

    console.log("crystal");

}

if (NaN) {

    console.log("crystal");

}

if (false) {

    console.log("crystal");

}

if(true) {

    console.log("crystal");

}

// true 빼고 다 falsy 한 값

 

15. 객체 (key - value pair)

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

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

let Game= {

    name : " 서든어택",

    age : 19,

};

 

15 - 2 생성자 함수를 이용한 객체 생성 방법, 속성 접근법

function Game (name, age) {

    this.name = name;

    this.age = age;

}

let person1 = new Game("서든어택", 19);

let person2 = new Game("메이플스토리", 21, );

 

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

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

 

15 - 3 객체 메서드 (객체가 가지는 여러 가지 기능)

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

let Game = {

    name : "서든어택",

    age : 19,

};

let keys = Object.keys(Game);

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

// 3-2 values

let values = Object.values(Game);

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

// 3-3 entries

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

let entries = Object.entries(Game);

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

// 3-4 assign ( assign(target : {}, source : any)  ) target : << 어디에다가  source : any  << 어떤걸 복사할래

// 객체 복사

let newGame = {};

Object.assign(new Game,Game, {age : 21});

console.log("nerGame => ", newGame);

 

15 - 4 객체 비교

객체와 배열은 다른 데이터 타입에 비해 크기가 상당히 크다.  => 메모리에 저장할 때 별도의 공간에 저장

 // game1 별도 공간에 대한 주소

 

let game1 = {

    name : "서든어택",

    age : 19,

};

 

// // game2 별도 공간에 대한 주소

let game2 = {

    name : "서든어택",

    age : 19,

};

 

console.log("answer => ", game1 === game2);  // false , 주소가 달라서

 

 

15 - 5 객체 병합

let game1 = {

    name : "서든어택",

};

let game2 = {

    age : 19,

};

// // 중괄호를 해체시켜서 키 밸류를 다 풀어줘 =... = spread operator

let perfectGame ={... game1,... game2};

console.log(perfectGame);

 

16. 배열

기본 생성

let fruits = ["사과", "바나나", "오렌지"]; // [인덱스, 인덱스, 인덱스]

 

16 - 1 크기 지정

let number = new Array(5);

 

16 - 2 요소 접근

let vegetable = ["오이", "토마토", "당근"];

console.log(vegetable[0]);

console.log(vegetable[1]);

console.log(vegetable[2]);

 

16 - 3 배열 메서드

16 - 3 - 1 push

let vegetable = ["오이", "토마토"];

vegetable .push("당근");

console.log(vegetable);  //  "오이", "토마토", "당근"

16 - 3  - 2 pop (마지막 요소를 삭제하는 메서드)

let vegetable = ["오이", "토마토"];

vegetable .pop();

console.log(vegetable);        // "오이"

16 - 3 - 3 shift (첫 요소를 삭제하는 메서드)

let vegetable = ["오이", "토마토", "당근"];

vegetable .shift();

console.log(vegetable);     // "토마토", "당근"

16 - 3 - 4 unshift (맨 앞에 무언가를 추가하는 메서드)

let vegetable = ["오이", "토마토"];

vegetable .unshift("당근");

console.log(vegetable);    //  "당근", "오이", "토마토"

16 - 3 - 5 splice (위치를 지정해서 어떠한 요소를 삭제하고 갈아 끼우는 것)

let vegetable = ["오이", "토마토", "당근"];

vegetable.splice(1, 1, "피망");  // 첫번째 요소부터 1개 삭제하고 피망를 거기에다가 추가해줘

console.log(vegetable);  //  "오이", "피망", "당근"

16 - 3 - 6 slice

let vegetable = ["오이", "당근", "토마토"];

let slicedVegetable = vegetable.slice(0,2); // 첫번째 요소부터 세번째 요소 전 까지의 것들을 새로운 배열로 만들어라

console.log(slicedVegetable);     //   "오이", "당근"

forEach, map, filter, find

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

 

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

 

16 - 3 - 7 foreach

numbers.forEach(function(star){

    console.log("star입니다 => " + star);

});

16 - 3 - 8 map

항상 원본 배열의 길이만큼이 return 된다.

기존에 있엇던 배열을 가공해서 새로운 배열을 생산해 내는 것

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

    return star * 2;

})

console.log(newNumbers);

16 - 3 - 9 filter

조건에 해당하는 것만 return 된다.

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

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

    return star === 5;

})

console.log(filteredNumbers);

16 - 3 - 10 find

조건에 맞는 첫 번째것만 return 한다.

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

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

    return star > 3;

})

console.log(result);

 

17. 반복문 (for)   ~동안

17 - 1  for 초기값

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

}

 

ex)

배열과  for문은 짝꿍이다

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

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

    console.log(i);

    console.log(arr[i]);

}

 

17 - 2  for ~ in 문

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

let person = {

    name : 'sohye',

    age : 22,

    gender : "female",

};

// person[key] << 밸류에 접근하는법

for (let key in person) {

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

}

 

18. 반복문(while)  ~동안

18 - 1 while 초기값

while (i < 10) {

    // 메인로직

    // 증감

    console.log(i);

    i++;

}

 

ex)

while문을 활용해서, 1초과 100 미만의 숫자 중 4의 배수인 것만 출력하는 예

 

let i = 0;

while (i < 100) {

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

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

    }

    i++;

}

 

19. 반복문(do - while)

한번은 실행한다. (do 부분)

let i = 0;

do {

    console.log(i);

    i++;

} while (i < 10);

 

20. break, continue (for 문에서 사용한다)

20 - 1  break

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

    if (i === 5) {

        break; // 그 자리에서 끝내라

    }

    console.log(i);

}

 

20 - 2  continue

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

    if (i === 5) {

        continue; // 밑으로 더 가지말고 다음순서로 넘어가라

    }

    console.log(i);

}

 

Javascript 기초문법을 이틀에 걸쳐서 공부를 해보았다.

대학교에서 처음 프로그래밍언어 문법을 배웠을때는 그냥 듣기만 했었는데 직접 정리를 하면서 공부를 하니깐 생각보다

많았다. 반복해서 공부하면서 기초를 잘 다져야겠다.