본문 바로가기
내일배움 강의/완강-JS 문법 종합반

JavaScript 문법 종합반 1주차

by GREEN나무 2024. 11. 5.
728x90

1-1 자바스크립트 소개

JS의 역사 - 많이 들어봤으니 이정도는 외워야할 것 같아요

더보기
더보기

◆ 1995년 자바스크립트 탄생   

▷ 넷스케이프 커뮤니케이션(LiveScript → Javascript) 

      당시 인기있던 언어인 'Java'에서 따옴

▷ 브라우저 동작 스크립트 언어

◆ 1999년 자바스크립트 표준화(ECMA-262) 완료

◆  ★2005년 AJAX 등장

▷ 비동기 웹 애플리케이션 개발 가능

▷ 폭발적인 UX 향상 (특정 영역만 새로고침 가능해짐)

◆  ★ 2008년 V8 엔진 출시(google)

▷ super fast(코드 실행 속도 상당부분 개선) → 브라우저의 속도가 빨라짐

▷  컴파일러, 메모리관리 시스템 

◆  ★ 2009년 Node.js 등장, 서버 개발 활성화

▷ 서버개발의 지각변동 : PHP, Ruby, Python, Java → Javascript(Node.js)

▷ 하나의 언어 → FrontEnd + BackEnd + DB(MongoDB) = FullStack

◆  2015년 ECMAScript 6(ES6) 버전 출시 

◆  2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화

 

◆   현재 자바스크립트는 프론트엔드 및 백엔드 개발 분야에서 널리 사용되며, Node.js 를 이용한 서버 개발도 활발하게 이루어지고 있습니다.

◆  JS 언어의 특징

객체 지향 프로그래밍 지원

동적 타이핑을 지원 (변수 선언시 타입지정X)

함수형 프로그래밍 지원

비동기 처리

클라이언트 측 및 서버 측 모두에서 사용 가능

1-2 변수와 상수

◆ 변수 : 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용.

▷ 변수의 5가지 주요 개념

       변수 이름 : 저장된 값의 고유 이름
       변수 값 : 변수에 저장된 값
       변수 할당 : 변수에 값을 저장하는 행위
       변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 ( var , let , const)
       변수 참조 : 변수에 할당된 값을 읽어오는것

▷  var : 같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 않고, 가장 마지막에 선언 한 값으로 변수가 덮어씌워집니다.

▷  let  : 같은 이름의 변수를 두 번 선언하면 오류가 발생합니다.

▷  const : 선언 후에 값을 변경할 수 없는 상수를 선언할 때 사용합니 다. 같은 이름의 변수를 두 번 선언하면 오류가 발생합니다.

 

1-3 데이터 타입 

◆ 데이터 타입 

1. 숫자(Number)
▷정수형 숫자(Integer)

▷ 실수형 숫자(Float)
▷ 지수형 숫자(Exponential)

let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3); // 250000
console.log(typeof num3); // "number"

▷ NaN(Not a Number) : 자바스크립트에서 숫자가 아님을 나타내는 값

let num4 = "Hello" / 2;
console.log(num4); // NaN
console.log(typeof num4); // "number"


▷ Infinity (무한대)

// +무한대
let num5 = 1 / 0;
console.log(num5); // Infinity
console.log(typeof num5); // "number"

// -무한대
let num6 = -1 / 0;
console.log(num6); // -Infinity
console.log(typeof num6); // "number"

 

◆ 문자열(String)
문자의 나열. 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현합니다.

▷ 문자열 길이(length) 
      변수명.length

let str = "Hello, world!";
console.log(str.length); // 13

 

▷ 문자열 결합(concatenation)

      변수1.concat(변수2)

let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2); //변수1.concat(변수2)
console.log(result); // "Hello, world!"


▷ 문자열 자르기(substr, slice)

       변수명.substr(시작 위치, 출력할 글자 수)

       변수명.slice(시작 위치, 끝위치)

let str = "Hello, world!";
console.log(str.substr(7, 5)); // "world"
console.log(str.slice(7, 12)); // "world"


▷ 문자열 검색(search)
      변수.search("찾는 문자열")

let str = "Hello, world!";
console.log(str.search("world")); // 7  시작하는 위치 출력


▷ 문자열 대체(replace)

      변수.replace("바꿀부분 문자열", "바꿀 문자열​")

let str = "Hello, world!";
let result = str.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"


▷ 문자열 분할(split)

      변수.split("자르는 기준")

let str = "apple, banana, kiwi";
let result = str.split(",");
console.log(result); // ["apple", " banana", " kiwi"]


◆ 불리언(Boolean)
참(true)과 거짓(false)을 나타내는 데이터 타입입니다.

불리언 데이터 타입은 조건문(if, else, switch 등)과 논리 연산자(&&, ||, !)와 함께 많이 사용됩니다. ​

let bool1 = true;
console.log(bool1); // true
console.log(typeof bool1); // "boolean"

let bool2 = false;
console.log(bool2); // false
console.log(typeof bool2); // "boolean"


◆  undefined : 정의되지 않은 값

let x;
console.log(x); // undefined


◆   null
null은 값이 존재하지 않음을 의미합니다. undefined와는 다릅니다.

let y = null;


◆ 객체(Object)

객체는 속성과 메소드를 가지는 컨테이너입니다. 중괄호({})를 사용하여 객체를 생성합니다.

      let 변수 = {키1 : 값1, 키2 : 값2};

// 객체 생성 기본
let person = { name: 'Alice', age: 20 };
person.name // 'Alice'
person.age // 20

 

// 생성자 함수를 이용한 객체 생성 방법
function Person(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person("제인", 20, "여자");
let person2 = new Person("유관순", 18, "여자");
let person3 = new Person("멀린", 100, "남자");

// 접근하는 방법
console.log(person1.name); // 제인
console.log(person2.name); // 유관순
console.log(person3.name); // 멀린
console.log(Person) // [Function: Person]

 

▷ 개체 속성 접근하는 방법

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

console.log(person.name);   // "홍길동"
console.log(person.age);    // 30
console.log(person.gender); // "남자"

 

▷ 객체 메소드

1. Object.keys() 메소드

//Object.keys() 메소드는 객체의 속성 이름을 배열로 반환합니다.
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let keys = Object.keys(person);

console.log(keys);   // ["name", "age", "gender"]

2. . Object.values() 메소드

//Object.values() 메소드는 객체의 속성 값들을 배열로 반환합니다
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let values = Object.values(person);

console.log(values);   // ["홍길동", 30, "남자"]

3. Object.entries() 메소드

// Object.entries() 메소드는 객체의 속성 이름과 속성 값들을 2차원 배열로 반환합니다.
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let entries = Object.entries(person);

console.log(entries);

4. Object.assign() 메소드

// Object.assign() 메소드는 기존 객체를 복사하여 새로운 객체를 만듭니다.
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let newPerson = Object.assign({}, person, { age: 35 });

console.log(newPerson);   // { name: "홍길동", age: 35, gender: "남자" }

5. 객체 비교

// 객체를 비교할 때는 일반적으로 === 연산자를 사용할 수 없습니다. 
// 대신 JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교를 합니다.
let person1 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

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

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

6. 객체 병합

// 객체 병합을 할 때는 전개 연산자(...)를 사용합니다.
let person1 = {
  name: "홍길동",
  age: 30
};

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

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

console.log(mergedPerson);   // { name: "홍길동", age: 30, gender: "남자" }

 

◆ 배열(Array)
배열은 여러 개의 데이터를 순서대로 저장하는 데이터 타입입니다. 대괄호([])를 사용하여 배열을 생성합니다.

      let 변수명 = [여러개의 데이터, 구분은 ','로, 문자는 '따음표' 사용];

let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];

 

 

▷ 배열 생성

1. 기본적인 배열 생성

배열을 만들 때는 대괄호([])를 사용하며, 각 요소는 쉼표(,)로 구분합니다.

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

 

2. 배열의 크기 지정

new Array()를 사용하여 배열의 크기를 지정할 수 있습니다.

let numbers = new Array(5);

 

▷ 배열 요소 접근

배열의 요소에 접근할 때는 대괄호([]) 안에 인덱스 값을 넣습니다.

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

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

 

▷ 배열 메소드

1. push() 메소드

// push() 메소드는 배열의 끝에 요소를 추가합니다.
let fruits = ["사과", "바나나"];
fruits.push("오렌지");

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

2. pop() 메소드

// pop() 메소드는 배열의 마지막 요소를 삭제합니다.

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

fruits.pop();

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

3. shift() 메소드

// shift() 메소드는 배열의 첫 번째 요소를 삭제합니다.
javascriptCopy code
let fruits = ["사과", "바나나", "오렌지"];

fruits.shift();

console.log(fruits);   // ["바나나", "오렌지"]

4. unshift() 메소드

// unshift() 메소드는 배열의 맨 앞에 요소를 추가합니다.
let fruits = ["바나나", "오렌지"];

fruits.unshift("사과");

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

5. splice() 메소드

// splice() 메소드는 배열의 요소를 삭제하거나, 새로운 요소를 추가할 수 있습니다.
let fruits = ["사과", "바나나", "오렌지"];

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

console.log(fruits);   // ["사과", "포도", "오렌지"]

6. slice() 메소드

// slice() 메소드는 배열의 일부분을 새로운 배열로 만듭니다.
let fruits = ["사과", "바나나", "오렌지"];

let slicedFruits = fruits.slice(1, 2);

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

7. forEach() 메소드

//  forEach() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행합니다.
let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

8. map() 메소드

// map() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.
let numbers = [1, 2, 3, 4, 5];

let squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers);   // [1, 4, 9, 16, 25]

9. filter() 메소드

// filter() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 
//그 결과가 true인 요소만 새로운 배열로 반환합니다.
let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers);   // [2, 4]

10. reduce() 메소드

/*배열의 모든 요소를 하나의 값으로 "축소"시키는 데 사용하는 메서드입니다. 
reduce 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 
그 결과를 누적하여 최종적으로 하나의 값을 반환합니다.*/
let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum);

11. find() 메소드

// find() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 
//그 결과가 true인 첫 번째 요소를 반환합니다.
let numbers = [1, 2, 3, 4, 5];

let foundNumber = numbers.find(function(number) {
  return number > 3;
});

console.log(foundNumber);   // 4

12. some() 메소드

// some() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 
//그 결과가 true인 요소가 하나라도 있는지 확인합니다.
let numbers = [1, 2, 3, 4, 5];

let hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});

console.log(hasEvenNumber);   // true

13. every() 메소드

// every() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 
//그 결과가 true인 요소가 모든 요소인지 확인합니다.
let numbers = [2, 4, 6, 8, 10];

let isAllEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0;
});

console.log(isAllEvenNumbers);   // true

14. sort() 메소드

// sort() 메소드는 배열의 요소를 정렬합니다.
let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];

numbers.sort(function(a, b) {
  return a - b;
});

console.log(numbers);   // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

15. reverse() 메소드

 // reverse() 메소드는 배열의 요소를 역순으로 정렬합니다.
let numbers = [1, 2, 3, 4, 5];

numbers.reverse();

console.log(numbers);   // [5, 4, 3, 2, 1]


​

1-5 형변환

자바스크립트에서 자료형들은 서로 형변환이 가능합니다.


◆  암시적 형 변환(implicit coercion)
자바스크립트에서 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생합니다.
▷ 문자열 변환

문자열과 다른 자료형이 연산자로 결합할 때 자료형을 문자열로 변환한 후 연산을 수행합니다. 

console.log(1 + "2");   // "12"
console.log("1" + true);   // "1true"
console.log("1" + {});   // "1[object Object]"
console.log("1" + null);   // "1null"
console.log("1" + undefined);   // "1undefined"


▷  숫자 변환

연산자를 사용할 때, 문자열을 숫자로 변환합니다. 이때, 빈 문자열("")이나 공백 문자열(" ")은 0으로 변환됩니다.

console.log(1 - "2");   // -1
console.log("2" * "3");   // 6
console.log(4 + +"5");   // 9


▷  불리언 변환 ( Boolean() 함수를 사용)

 0, 빈 문자열(""), null, undefined, NaN은 false로 변환됩니다. 그 외의 값은 true로 변환

console.log(Boolean(0));   // false
console.log(Boolean(""));   // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false
console.log(Boolean("false"));   // true
console.log(Boolean({}));   // true

 

◆  명시적 형 변환(explicit coercion)
개발자가 직접 자료형을 변환하는 것입니다.

▷ 문자열 변환
 String() 함수를 사용하여 다른 자료형을 문자열로 변환합니다.

console.log(String(123));       // "123"
console.log(String(true));      // "true"
console.log(String(false));     // "false"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String({}));        // "[object Object]"


▷ 숫자 변환

console.log(Number("123"));   // 123
console.log(Number(""));      // 0
console.log(Number("  "));    // 0
console.log(Number(true));    // 1
console.log(Number(false));   // 0

 

 

1-6 연산자

◆ 산술 연산자(arithmetic operators)
▷ 더하기 연산자(+)

숫자와 문자열을 함께 사용할 경우, 자동으로 문자열로 변환합니다.

console.log(2 + 3);       // 5
console.log("2" + "3");   // "23"
console.log("2" + 3);     // "23"
console.log(2 + "3");     // "23"


▷ 빼기 연산자(-)

숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

console.log(5 - 2);       // 3
console.log("5" - "2");   // 3
console.log("5" - 2);     // 3
console.log(5 - "2");     // 3
console.log("five" - 2);  // NaN


▷  곱하기 연산자(*)

숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

console.log(2 * 3);       // 6
console.log("2" * "3");   // 6
console.log("2" * 3);     // 6
console.log(2 * "3");     // 6
console.log("two" * 3);   // NaN

 

▷  나누기 연산자(/   몫)
숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

console.log(6 / 3);       // 2
console.log("6" / "3");   // 2
console.log("6" / 3);     // 2
console.log(6 / "3");     // 2
console.log("six" / 3);   // NaN


▷ 나누기 연산자(%  나머지)

숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

console.log(7 % 3);       // 1
console.log("7" % "3");   // 1
console.log("7" % 3);     // 1
console.log(7 % "3");     // 1
console.log("seven" % 3); // NaN


◆  할당 연산자(assignment operators)

=, +=, -=, *=,  /=, %=       우에서 좌로 할당

 

a  ☆ = b

a` = a ☆b

(☆  : 산술연산자, a` : 연산 후 a)

 

 

◆ 비교 연산자(comparison operators)

===, !==, <, >, <=, >=

▷ 일치(===), 불일치(!==) 연산자

숫자형, 자료형 비교 가능합니다.


▷   <, >, <=, >=

숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

console.log(2 < 3);   // true
console.log(2 > "3");   // false
console.log("2" < 3);   // true

 

◆ 논리 연산자(logical operators)
▷  논리곱(&&) 연산자
▷  논리합(||) 연산자
▷  논리부정(!) 연산자


◆ ★삼항 연산자(ternary operator)
      (조건) ? "true 값" : "false 값"

let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result);   // "크다"


​◆  타입 연산자(type operators)
  typeof 연산자를 사용하여 값의 자료형을 확인하기

원시 자료형 →  해당 자료형의 이름

객체나 함수의 → "object" or "function"

typeof null의 경우 "object"를 반환하는 버그가 있습니다.

 

console.log(typeof 123);   // "number"
console.log(typeof "123");   // "string"
console.log(typeof true);   // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);   // "object"
console.log(typeof {});   // "object"
console.log(typeof []);   // "object"
console.log(typeof function(){});   // "function"


​

1-7 함수

 

◆ 함수 선언문(function declaration)

function 함수명 (매개변수) {
  // 로직
}
console.log(함수명(매개변수));


▷  ​함수 표현식(function expression)

변수에 함수 할당

let 변수 = function(매개변수) {
  로직
}

console.log(변수(매개변수));

 

◆  함수 반환값

return을 해야 값이 함수 밖으로 나갑니다.

function add(x, y) {
  return x + y; 
}
let result = add(2, 3); // 함수에서 return한 값을 할당합니다.
console.log(result);   // 5

 

1-8 스코프 및 화살표함수

◆  함수 스코프 ( 영향을 끼칠 수 있는 범위)
▷ 전역 스코프(global scope)

전역 스코프에서 선언된 변수는 어디에서든지 참조할 수 있습니다.

let x = 10;
function printX() {
  console.log(x);
}
printX();   // 10


​▷ 지역 스코프(local scope)

지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조할 수 있습니다.

function printX() {
  let x = 10;
  console.log(x);
}
printX();   //


▷  블록 스코프(block scope)

if문 내에서 선언된 변수는 해당 블록 내에서만 참조할 수 있습니다.

if (true) {
  let x = 10;
  console.log(x);
}
console.log(x);   // ReferenceError: x is not defined


◆  화살표 함수

// 기본적인 화살표 함수
let add = (x, y) => {
  return x + y;
}
console.log(add(2, 3));   // 5

// 한 줄로 된 화살표 함수
//함수 내부에 return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략할 수 있습니다.
let add = (x, y) => x + y;
console.log(add(2, 3));   // 5
​
// 매개변수가 하나인 화살표 함수
let square = x => x * x;   // 매개변수가 하나일 경우에는 괄호를 생략할 수 있습니다.
console.log(square(3));   // 9

 

1-9 조건문

if, else if, else, switch
자바스크립트에서는 조건문을 사용하여 특정 조건을 만족하는 경우에만 코드를 실행할 수 있습니다.
◆ if문

if (조건) {참일때 수행할 로직}

 

▷ if-else문

if (조건) {
  참일 떄 수행할 로직;
} else {
  거짓일 때 수행할 로직;
}

 

▷  if-else if-else문

if (조건1) {
 조건1 O;
} else if (조건2) {
  조건1 X,   조건2 O;
} else {
  조건1 X,   조건2 X;
}


​
◆  switch문

switch문은 변수의 값에 따라 여러 개의 경우(case) 중 하나를 선택하여 해당하는 코드를 실행합니다. default는 모든 경우에 맞지 않는 경우에 실행되는 코드를 작성합니다.

let fruit = "사과";
switch (fruit) {
  case "사과":
    console.log("사과는 빨간색입니다.");
    break;
  case "바나나":
    console.log("바나나는 노란색입니다.");
    break;
  case "오렌지":
    console.log("오렌지는 주황색입니다.");
    break;
  default:
    console.log("해당하는 과일이 없습니다.");
    break;
}


◆  삼항 연산자(ternary operator)
      (조건) ? "true 값" : "false 값"

 

1-10 조건문 중첩

코드의 가독성이 떨어집니다. 지양하기


◆  조건문을 중첩해 사용할 수 있습니다.

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

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

 

◆  조건부 실행

&& 연산자를 사용하여 조건부 실행을 할 수 있습니다.

      (조건)&& 참일경우 실행할 로직;

let x = 10;
(x > 0) && console.log("x는 양수입니다."); // x가 양수 일 경우 "x는 양수입니다."출력

 

◆  ★삼항 연산자와 단축 평가

' ||' or조건을 사용합니다.

let 변수1 = 변수2  ||  값;

변수 2에 지정된 값이 없을 경우 변수 1에 값을 할당합니다.

let x;
let y = x || 10;

console.log(y);   // 10


◆  falsy한 값과 truthy한 값

falsy한 값 : 0, 빈 문자열, null, undefined, NaN, false
​외의 값들은 모두 truthy한 값으로, if문의 조건을 만족시킵니다.

if (0) {
  console.log("이 코드는 실행되지 않습니다.");
}

if ("") {
  console.log("이 코드는 실행되지 않습니다.");
}

if (null) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (undefined) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (NaN) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (false) {
  console.log("이 코드는 실행되지 않습니다.");
}


위의 예제에서는 falsy한 값들을 사용하여 if문의 조건을 만족시키지 못하도록 합니다. 는 falsy한 값으로, if문의 조건을 만족시키지 못합니다. 그 외의 값들은 모두 truthy한 값으로, if문의 조건을 만족시킵니다.

반복문

◆  for문
▷ 기본적인 for문

for문은 초기값, 조건식, 증감식을 사용하여 반복 횟수를 제어합니다.

/*
for (초깃값; 조건식; 증감식) {
  
}
*/
for (let i = 0; i < 10; i++) {
  console.log(i);
}


▷ 배열과 함께 사용하는 for문

// 배열의 요소 개수만큼 반복하여 실행합니다.
let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}


​
위의 예제에서는 배열 numbers와 함께 for문을 사용하여 배열의 요소를 출력합니다. 배열의 요소 개수만큼 반복하여 실행합니다.
▷ for...in문

// for...in문은 객체의 프로퍼티를 순서대로 접근할 수 있습니다.
let person = { name: "John", age: 30, gender: "male" };

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


◆  while문

/*
while (조건) {
  참인 경우만 실행
}
*/
let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}


◆ do...while문

// do...while문은 일단 한 번은 코드를 실행하고, 그 후에 조건식을 체크하여 반복 여부를 결정합니다.
let i = 0;

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

 

1-15 break continue

◆  break문

// break문은 반복문을 종료합니다.
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

 

◆ continue문

// continue문은 실행하지 않고 다음으로 넘어갑니다. 
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}

 

숙제 기초 문법 연습하기

문제1 :

대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 

/*
    1. 반복문으로  'p'의 개수와 'y'의 개수를 카운트
    2. 비교하기
    3. 
    */ 

    //let s = "PasdYasdg"
    function solution(s){
        var answer = true;
        let sp = 0;
        let sy = 0;
        for (let i = 0; i < s.length; i++) {
          if(s[i] === "p"|| s[i] === "P"){
            sp++
          }else if(s[i] === "y" || s[i] === "Y"){
            sy++
          }
        }
        if(sp===sy){
           return answer
        }else{
            answer = false
            return answer
        }
    }

    //console.log(solution(s));

 

문제2:

어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.

function solution(absolutes, signs) {
    var answer = 0;
    for (let i = 0; i < signs.length; i++) {
        if (signs[i]) {  
            answer += absolutes[i];
        } else {
            answer -= absolutes[i];
        }
    }
    return answer;
}

 

 

◆ AJAX (Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)) : 

https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능

2005년 등장 후 UX의 폭발적인 향상을 가져옴 -> js의 활용도와 인기가 상승

브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

 

◆  UX : user experience : 사용자가 얼마나 편하게 사용하는가

 

◆  터미널 비우기 : clear > enter

저작자표시

'내일배움 강의 > 완강-JS 문법 종합반' 카테고리의 다른 글

5주차 : DOM과 클래스, 클로저  (7) 2024.11.11
3주차 : 데이터 타입(심화), 실행 컨텍스트, this  (5) 2024.11.07
4주차 : 콜백 함수와 동기/비동기 처리  (0) 2024.11.05
2주차_es6, 일급객체로서의 함수, Map과 Set  (3) 2024.11.05

관련글

티스토리툴바