JavaScript 문법 종합 1주차(2)

공부/JavaScript

JavaScript 문법 종합 1주차(2)

뀨뿌뀨뿌 2023. 5. 24. 01:16

1. 조건문

자바스크립트에서는 조건문을 사용하여 특정 조건을 만족하는 경우에만 코드를 실행 할 수 있음

ⅰ. if 문

기본적인 if 문
- if(조건문 - true 또는 false가 나올 수 있는 조건) {
  main logic
  }

let x = 10

if (x < 0) {
  console.log('x는 양수입니다.')
}

// Q. y의 길이가 5보다 크거나 같으면 길이를 출력
let y = "hello world"

if(y.length >= 5) {
  console.log(y.length)
}

if - else 문
- if (조건문) {
  main logic #1 → true인 경우 실행할 코드
  } else {
  main logic #2 → false인 경우 실행할 코드
  }

let x = -3
if(x > 0) {     // -> false값을 반환
  console.log('x는 양수입니다.')
} else {
  console.log('x는 음수입니다.')
}

if - else if - else
- if (조건1) {
  main logic #1 → 조건1이 true인 경우 실행할 코드
  } else if (조건2) {
  main logic #2 → 조건1이 false이고 조건2가 true인 경우 실행할 코드
  } else {
  main logic #3 → 모든 조건이 false인 경우 실행할 코드
  }

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

switch
- 변수의 값에 따라, 여러 개의 경우(case)중 하나를 선택
- switch (변수) {
  case 1:
  실행할 코드
  break;
  case 2
  실행할 코드
    break;
  .
  .
  case n:
  실행할 코드
    break;
  default:
  실행할 코드
    break;
  }
- default는 모든 경우에 맞지 않는 경우에 실행할 코드를 작성
- break는 모든 case와 default가 끝날 때 break 문을 넣어야지 해당 코드만 실행되고 끝남

let fruit = "사과"

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

ⅱ. 조건문의 중첩

조건문 안에 또 다른 조건문을 사용하여 복잡한 조건을 판별할 수 있음
중첩문을 많이 쓰면 코드의 가독성이 떨어지고, 코드 유지 보수가 어려워지기 때문에 꼭 필요할 때만 사용

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는 양수입니다.")   // -> &&(and)조건 때문에 실행되고 있음

// if (x > 0) {
//   console.log("x는 양수입니다.")
// }

ⅳ. 삼항 연산자와 단축 평가

or(||) 연산자를 사용하여 단축 평가(short-circuit evaluation)를 할 수 있음

let y;      // y에는 undefined
let z = y || 20;    // y가 undefined 이면 20을 기본값으로 세팅

console.log(z)

ⅴ. falsy한 값과 truthy한 값

0, 빈 문자열, null, undefined, NaN, false는 falsy한 값으로 if문의 조건을 만족시키지 못함
그 외의 모든 값들은 truthy한 값으로 if문의 조건을 만족

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")    // 이 조건문만 실행됨
}

2. 객체

자바스크립트에서는 객체(Object)를 사용하여 여러 개의 값을 하나의 변수에 담고 관리할 수 있음

ⅰ. 객체 생성

기본적인 객체 생성 방법
- let 객체명 = {
  key1: value1,
  key2: value2,
  }
- 객체를 만들 땨는 중괄호를 사용하며, 속성(key)과 값(value)을 콜론(:)으로 구분하여 작성하고, 각 속성과 값은 쉼표로 구분함
- key에 할당되는 value는 어떠한 값도 가능하고 데이터 타입의 제한이 없음

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

많은 객체를 한꺼번에 여러개를 생성할 수 있음

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

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

ⅱ. 객체 속성 접근

객처명.Property()를 사용하여 객체의 속성에 접근하여 값을 출력할 수 있음

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

console.log('1', person.name);
console.log('2', person.age);
console.log('3', person.gender);

ⅲ. 객체 메소드

객체가 가진 여러가지 기능(Object.~~~)
Object.key(매개변수) 메소드
- key를 가져오는 메소드
- 객체안에 있는 key들이 배열 형태로 반환함
Object.values() 메소드
- 객체안에 있는 value값들ㅇ르 배열로 반환함
Object.entries() 메소드
- key와 value를 묶어서 배열로 만든 배열(2차원 배열)
- key, value가 각각의 요소로 분리가 되고, 그 요소들이 배열 형태로 반환함
Object.assign() 메소드
- 기존 객체를 복사하여 새로운 객체로 반환함
- 객체를 복사하면서 속성을 바꾸는 법
  Object.assign(새로운 객체명, 복사할 객체명, {key: value})

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

let keys = Object.keys(person);
console.log('keys =>',  keys)     // keys => [ 'name', 'age', 'gender' ]

let values = Object.values(person)
console.log('values =>',  values)   // values => [ '홍길동', 30, '남자' ]

let entries = Object.entries(person)
console.log('entries =>',  entries)   // entries => [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

let newPerson = {};
Object.assign(newPerson, person)
console.log('newPerson =>',  newPerson)  // newPerson => { name: '홍길동', age: 30, gender: '남자' }

Object.assign(newPerson, person, { gender: "여자" });
console.log('newPerson =>',  newPerson);  // newPerson => { name: '홍길동', age: 30, gender: '여자' }

객체 비교
- 객체나 배열은 다른 데이터 타입에 비해 크기가 크기 때문에 메모리에 저장할 때 별도의 공간에 저장됨
  => 객체끼리 === 연산자를 사용해서 비교하면 별도 공간에 대한 주소를 비교하는 것이기 때문에 false를 반환
- JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교

// person1 별도 공간에 대한 주소
let person1 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
}
// person2 별도 공간에 대한 주소
let person2 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
}

console.log(person1 === person2)   // false
console.log(JSON.stringify(person1) === JSON.stringify(person2));  // true

객체 병합
- 전개 연산자(...)를 사용해서 병합
  spread operator - ES6에서 나온 문법

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

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

let perfectMan = {...person1, ...person2}
console.log(perfectMan)

3. 배열

배열(Array)을 사용하여 여러 개의 값을 저장하고 관리할 수 있음

ⅰ. 기본 배열 생성

키워드 = []
배열을 만들 때는 대괄호를 이용하여 생성하고 콤마를 이용하여 각각을 구분함
대괄호 안에 객체를 나열하고 각각의 객체는 index 번호를 가지고 있고, index는 0부터 시작됨
배열의 길이 구하기
✔변수명.length

배열의 크기 지정
- new Array()를 사용하여 배열의 크기를 지정해서 사용할 수 있음

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

let number = new Array(5);

console.log(fruits.length)    // 3
console.log(number)     // [ <5 empty items> ]
console.log(number.length)    // 5

요소 접근
- 변수명[인덱스 값]을 통하여 각각의 요소에 접근할 수 있음

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

console.log(fruits[0]);   // "사과"
console.log(fruits[1]);   // "바나나"
console.log(fruits[2]);   // "오렌지"

ⅱ. 배열 메소드

push() 메소드
- push 메소드는 배열의 끝에 요소를 추가함

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

pop() 메소드
- pop() 메소드는 배열의 마지막 요소를 삭제함

let fruits = ["사과", "바나나"];
fruits.pop();
console.log(fruits);    // [ '사과' ]

shift() 메소드
- shift() 메소드는 배열의 첫번째 요소를 삭제함

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

unshift() 메소드
- unshift()메소드는 배열의 첫번째 요소에 추가함

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

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

splice() 메소드
- 위치를 지정해서 어떤 요소를 삭제하거나 추가할 수 있음
- splice(startNumber, deleteCount, 추가할 요소1, 추가할 요소2, ...)
- 추가할 요소를 적지 않으면 삭제만 할 수 있음

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

fruits.splice(1, 1, "포도");  // 첫번째 요소부터 시작해서 시작한 부분의 첫번째 요소까지 삭제하고 포도를 추가
console.log(fruits);      // [ '사과', '포도', '키위' ]

slice() 메소드
- 배열의 일부분을 새로운 배열로 만듦

let fruits = ["사과", "바나나", "키위"];
let slicedFruits = fruits.slice(1, 2);  // 두번째 요소부터 세번째 요소전까지 새로운 배열로 만들어서 반환

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

forEach() 메소드
- 배열의 각 요소에 대해 콜백함수를 실행함
- 콜백함수: 매개변수 자리에 함수를 넣는 것

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

numbers.forEach(function(item) {
  console.log('item입니다 => ' + item);
});
/*
item입니다 => 4
item입니다 => 1
item입니다 => 5
item입니다 => 4
item입니다 => 5
*/

map() 메소드
- 배열의 각 요소에 대해 콜백함수를 실행하고, 그 결과를 새로운 배열에 반환함
- 콜백함수 안에 반드시 return 문을 가지고 있어야함
- 원본의 배열의 길이만큼 값을 리턴함
- return문을 입력하지 않으면 배열안이 undefined로 채워지고 실제로 아무것도 보여주지 않음

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

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

console.log(newNumbers);  // [ 8, 2, 10, 8, 10 ]

filter() 메소드
- 배열의 각 요소에 대해서 콜백 함수를 실행하고 그 결과가 ture인 요소만 새로운 배열로 반환
- return문 뒤에 조건문이 들어가서 조건문에 해당되는 것만 배열로 리턴함

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

let filteredNumbers = numbers.filter(function (item) {
  return item > 3;
});

console.log(filteredNumbers);   // [ 4, 5, 4, 5 ]

find() 메소드
- return문의 조건의 결과값이 true인것 중에 첫번째인 요소만 반환

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

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

console.log(result)     // 4

4. 반복문

반복문을 사용해서 특정 코드를 반복해서 실행할 수 있음
프로그래밍에서는 반복하는 작업을 자동으로 하기 위해서 하는 것이기 때문에 반복문은 핵심적인 역활을 함

ⅰ. for문

기본적인 for문
for (초기값; 조건식; 증감식) {
반복할 코드
}

for (let i = 0; i < 10; i++) {    // i라는 변수는 0부터 시작해서 10에 도달하기 전까지 계속 반복하며
                                  // 한사이클이 돌고나면 1을 더함
  console.log(`for문 돌아가고 있음 => ${i}`)
}

배열과 함께 사용하는 for문
- 배열과 for문을 함께 사용하면 배열의 요소 개수만큼 for문이 반복하여 실행됨

const arr = ["one", "two", "three", "four", "five"];
for (let i = 0; i < arr.length; i++) {
  console.log(i);
  console.log(arr[i]);
};

// Q. 0부터 10까지의 수 중에서 2의 배수만 출력
for (let i = 0; i <= 10; i++) {
  if (i >= 2) {
    if (i % 2 === 0) {
      console.log(i);
    }
  }
}

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

for (let key in person) {            // {person['key']: 객체의 value에 접근할 수 있는 또다른 방법
  // key => 위에 적힌 객체안에 key를 가리킴
  console.log(`${key}: ${person[key]}`);
}

ⅱ. while문

while문은 조건식이 참인 경우에만 코드를 반복해서 실행함
while (조건) {
main logic
증감식
}

let i = 0;

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

// Q. while문을 활용해서, 3 초과 100 미만의 숫자 중 5의 배수인 것만 출력
let i = 3;
while (i < 100) {
  if (i % 5 === 0 && i >= 5) {
    console.log(i);
  }
  i++;
}

ⅲ. do - while 문

do - while문은 일단 한 번은 코드를 실행하고 그 후에 조건식을 체크하여 반복을 결정함

let i = 0;

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

ⅳ. break문과 continue문

break문
- for문과 함께 break문을 사용
- break문은 반복문을 종료함

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}
/*
0
1 
2    출력됨
3
4
*/

continue문
- continue문을 만나면 해당 조건을 제외하고 그 다음으로 넘어감

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}
/*
0
1
2
3
4
6
7
8
9
*/

저작자표시

'공부 > JavaScript' 카테고리의 다른 글

JavaScript 문법 종합 2주차(1) (1)	2023.05.24
JavaScript 문법 종합 1주차(숙제) (0)	2023.05.24
JavaScript 문법 종합 1주차(1) (0)	2023.05.23
JavaScript 기초4 (0)	2023.05.03
JavaScript기초 3 (1)	2023.05.02

현재글JavaScript 문법 종합 1주차(2)

rosie

ㅇㄻ, 항해99후기, 코딩부트캠프후기, 항해99단점, 부트캠프추천, 항해99장점,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

rosie

JavaScript 문법 종합 1주차(2)

1. 조건문

ⅰ. if 문

ⅱ. 조건문의 중첩

ⅲ. 조건부 실행

ⅳ. 삼항 연산자와 단축 평가

ⅴ. falsy한 값과 truthy한 값

2. 객체

ⅰ. 객체 생성

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

ⅱ. 객체 속성 접근

ⅲ. 객체 메소드

3. 배열

ⅰ. 기본 배열 생성

ⅱ. 배열 메소드

4. 반복문

ⅰ. for문

ⅱ. while문

ⅲ. do - while 문

ⅳ. break문과 continue문

'공부 > JavaScript' 카테고리의 다른 글

'공부/JavaScript'의 다른글

티스토리툴바

JavaScript 문법 종합 1주차(2)

1. 조건문

ⅰ. if 문

ⅱ. 조건문의 중첩

ⅲ. 조건부 실행

ⅳ. 삼항 연산자와 단축 평가

ⅴ. falsy한 값과 truthy한 값

2. 객체

ⅰ. 객체 생성

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

ⅱ. 객체 속성 접근

ⅲ. 객체 메소드

3. 배열

ⅰ. 기본 배열 생성

ⅱ. 배열 메소드

4. 반복문

ⅰ. for문

ⅱ. while문

ⅲ. do - while 문

ⅳ. break문과 continue문

'공부 > JavaScript' 카테고리의 다른 글

'공부/JavaScript'의 다른글

관련글

티스토리툴바