자바스트립트 문법종합반 1주차 / 복습

역사

2005년 ajax

2008년 구글의 V8엔진.

2009년 node.js등장, 서버개발

2015년 ES6 출시

 

특징

객체지향 프로그래밍 지원.

동적 타이핑

함수형 프로그래밍 지원 ( 함수를 first-class object로 취급(일반 값처럼 변수할당, 반환 가능)함, 고차함수(함수를 인자로 받거나 반환하는 함수 지원)

비동기처리

클라이언트/서버 모두 사용 가능

 

--

변수와 상수

변수 : var, let -> 메모리에 저장, 읽어들여 재사용. var는 재선언시 경고 안함. let사용.

상수 : const -> 선언 후 변경 불가.

 

변수 이름 : 저장된 값의 고유 이름

변수 값: 변수에 저장된 값

변수 할당 : 변수에 값을 저장하는 것

변수 선언 : 변수를 사용하기 위해 컴퓨터에 알림

변수 참고 : 변수에 할당된 값을 읽어오는 것

 

 

데이터타입

숫자 :

정수, let num1 = 2

실수, let num2 = 2.2

지수, let num3 = 2.5e5(2.5의 5제곱(2.5^5)

NaN, let num4 = 'hello' / 2

Infinity, let num5 = 1 / 0

-Infinity, let num6 = -1 / 0

 

문자열:

let str1 = 'hello';
let str2 = "world";


//문자열 길이 확인 length
console.log(str1.length);//5

//문자열 결합 concat
let result = str1.concat(str2);
console.log(result);//"helloworld"

//문자열 자르기 substr, slice
let str = '안녕!세상아!';
console.log(str.substr(2, 2)); // !세
console.log(str.slice(2, 4)); // !세
//문자열 검색 search
console.log(str.search("세상")); // 3
//문자열 대체 replace
let result2 = str.replace("세상", "비둘기");
console.log(result2);//안녕!비둘기아!
//문자열 분할 -> 배열로 반환 split
let str3 = "다람쥐, 강아지, 고양이, 뱀";
let result3 = str3.split(", ");
console.log(result3);//[ '다람쥐', '강아지', '고양이', '뱀' ]

불리언:

true, false값을 가지는 데이터타입.

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

let b = false;

console.log(a && b);//false
console.log(a || b);//true
console.log(!a);//false

undefined, null:

undefined -> 선언만 하고 할당되지 않은 변수

null -> 값이 없는 변수( '없음'이 할당됨 )

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

let y = null;

객체(object):

key-value 페어

.으로 접근

let person = { name: 'Alice', age: 20 };
person.name // 'Alice'
person.age // 20

배열 (Array):

순서대로 저장됨. index로 접근 0부터 시작함.

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

 

형변환

암시적 형변환

+-가 다르기도 하고, 참고만 

//문자열
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"

//숫자
console.log(1 - "2");   // -1  1+"2"와 결과값 다름에 유의 (+제외하곤 대부분 숫자로 변환)
console.log("2" * "3");   // 6  
console.log(4 + +"5");   // 9 빈건 0으로 변환

//불리언
console.log(Boolean(0));   // false
console.log(Boolean(""));   // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false

//이렇게 5가지 제외 모두 true임.

console.log(Boolean("false"));   // true
console.log(Boolean({}));   // true

 

명시적 형변환

console.log(1 + "2");   // "12"
console.log(1 / "2");   // "12"
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(String({ name: "비둘기" }));     // "[object Object]"
console.log(JSON.stringify({ name: "비둘기" }));  //{"name":"비둘기"}
console.log(JSON.stringify({}));  // {}
console.log(String([]));        // 
console.log(String([1, 2, 3]));    // 1, 2, 3
console.log(String(/x/));    // /x/ (정규식)
console.log(String(new Date));    // Mon Jun 12 2023 12:28:20 GMT+0900 (대한민국 표준시)
console.log(String(function () { }));    //function () { }

object는 String으로 출력하면 type이 나와버림.  

근데 array, date, RegExp, Function다 string으로 보여주는데 왜 object만 type으로 반환하는 이유가 뭘까..

String과 toString의 차이점 더보기 클릭

https://velog.io/@kimkyeonghye/JS-String-%EA%B3%BC-.toString-%EC%B0%A8%EC%9D%B4%EC%A0%90

[JS] String() 과 .toString() 차이점

String() : 어떤 형태든 문자로 형변환

.toString() : null, undefined 형 변환시 오류, object type(배열, 객체 등등)은 모두 type 출력

->추가로 toString(괄호안)숫자는 입력한 진수로 변환해준다(2진수, 16진수 같은)

 

JSON.stringify에 관한 정보는 더보기 클릭

https://steemit.com/kr-dev/@cheonmr/json-stringify

JSON.stringify( )란 무엇인가? — Steemit

https://jihyundev.tistory.com/7

[JavaScript] 객체를 출력하는 방법

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

JSON.stringify() - JavaScript | MDN

https://wikidocs.net/22330#:~:text=JSON%EC%9D%80%20JavaScript%20Object%20Notation,%EC%82%AC%EC%9A%A9%EC%9D%B4%20%EC%9E%98%20%EB%90%98%EA%B3%A0%20%EC%9E%88%EB%8B%A4.

3.3.5. 왜 JSON일까? JSON이란?

https://kingofbackend.tistory.com/187

[Javascript] JSON과 JavaScript Object의 차이점

이건 좀 어렵다. 일단 참고용으로 링크를 걸어둠.

 

 

연산자

산술연산자

+-*/%

더하기는 문자열과 숫자를 지원하고, 숫자와 문자열이 만나면 문자열로 변환됨.

빼기, 곱하기, 나누기, 나머지는 숫자만 지원하며, 연산때 숫자와 문자열/ 문자열과 문자열이 만나면 숫자로 변환됨.

(숫자형태의 문자열에 한함)

 

할당연산자

 

=  등호연산자는 오른쪽값을 왼쪽에 할당함.

+= 이건 왼쪽값에 오른쪽값을 더하고, 그 결과값을 왼쪽에 할당함.

-=

*=

/=

%=

 

비교연산자

=== 일치연산자(자료형까지 일치하는지)

== 일치연산자(값만 비교)

!== 불일치 연산자(자료형까지)

!= 불일치 연산자(값만 비교)

<= 작거나 같음

>= 크거나 같음

> 큼

< 작음

 

논리연산자

&& 논리곱 연산자 (둘다 true 여야만 true)

|| 논리합 연산자 (둘다 false 여야만 false)

!true 논리부정 연산자 (true와 false를 바꿈)

 

삼항연산자

앞에 오는 조건식의 참/거짓에 따라 할당할 값을 단순하게 표현함.

result ? true일때 결과값 : false일때 결과값

 

함수

더보기 클릭

(4) 함수

자바스크립트에서는 함수를 정의하여 코드의 재사용성을 높일 수 있습니다. 이번에는 자바스크립트의 함수에 대해서 알아보겠습니다.

[1] 함수 정의하기

[1]-1**. 함수 선언문(function declaration)**

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

위의 예제에서는 function 키워드를 사용하여 add라는 함수를 선언하였습니다. 함수 선언문을 사용하면 함수를 미리 정의해두고, 필요할 때 호출할 수 있습니다.

[1]-2. 함수 표현식(function expression)

let add = function(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

위의 예제에서는 function 키워드를 사용하여 add라는 변수에 함수를 할당하였습니다. 함수 표현식을 사용하면 함수를 변수에 할당하여 익명 함수를 생성할 수 있습니다.

[2] 함수 호출하기

[2]-1. 함수 호출하기

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

위의 예제에서는 add라는 함수를 호출하여 결과값을 반환합니다. 함수를 호출할 때는 함수 이름 뒤에 괄호를 사용합니다.

[3] 함수 매개변수와 반환값

[3]-1. 함수 매개변수

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

위의 예제에서는 add라는 함수가 x와 y라는 두 개의 매개변수를 받아들입니다. 함수를 호출할 때는 매개변수에 값을 전달합니다.

[3]-2. 함수 반환값

function add(x, y) {
  return x + y;
}

let result = add(2, 3);
console.log(result);   // 5

위의 예제에서는 add라는 함수가 x와 y라는 두 개의 매개변수를 받아들이고, 이를 더한 값을 반환합니다. 함수를 호출한 결과값을 변수에 할당하여 사용할 수 있습니다.

[4] 함수 스코프

[4]-1. 전역 스코프(global scope)

let x = 10;

function printX() {
  console.log(x);
}

printX();   // 10

위의 예제에서는 전역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조합니다. 전역 스코프에서 선언된 변수는 어디에서든지 참조할 수 있습니다.

[4]-2. 지역 스코프(local scope)

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

printX();   //

 

위의 예제에서는 지역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조합니다. 지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조할 수 있습니다.

[4]-3. 블록 스코프(block scope)

if (true) {
  let x = 10;
  console.log(x);
}

console.log(x);   // ReferenceError: x is not defined

위의 예제에서는 if문 내에서 변수 x를 선언하고, 이를 출력합니다. if문 내에서 선언된 변수는 해당 블록 내에서만 참조할 수 있습니다.

[5] 화살표 함수

[5]-1. 기본적인 화살표 함수

let add = (x, y) => {
  return x + y;
}

console.log(add(2, 3));   // 5

위의 예제에서는 화살표 함수를 사용하여 add라는 함수를 선언하였습니다. 화살표 함수를 사용하면 함수의 선언이 간결해집니다.

[5]-2. 한 줄로 된 화살표 함수

let add = (x, y) => x + y;

console.log(add(2, 3));   // 5

위의 예제에서는 한 줄로 된 화살표 함수를 사용하여 add라는 함수를 선언하였습니다. 함수 내부에 return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략할 수 있습니다.

[5]-3. 매개변수가 하나인 화살표 함수

let square = x => x * x;

console.log(square(3));   // 9

위의 예제에서는 매개변수가 하나인 화살표 함수를 사용하여 square라는 함수를 선언하였습니다. 매개변수가 하나일 경우에는 괄호를 생략할 수 있습니다.

문

조건문

앞부분 더보기 클릭

1. if문

1-1. 기본적인 if문

let x = 10;

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

위의 예제에서는 변수 x가 양수인지를 판별하여, 양수인 경우 "x는 양수입니다."라는 메시지를 출력합니다. if문은 조건이 참인 경우에만 코드를 실행합니다.

1-2. if-else문

let x = -10;

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

위의 예제에서는 변수 x가 양수인지를 판별하여, 양수인 경우 "x는 양수입니다."라는 메시지를 출력하고, 그렇지 않은 경우 "x는 음수입니다."라는 메시지를 출력합니다. if-else문은 조건이 참인 경우와 거짓인 경우 각각 다른 코드를 실행합니다.

1-3. if-else if-else문

let x = 0;

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

위의 예제에서는 변수 x가 양수인지, 음수인지를 판별하여, 0인 경우를 포함해 각각 다른 메시지를 출력합니다. if-else if-else문은 여러 개의 조건을 순서대로 비교하여, 해당하는 조건에 맞는 코드를 실행합니다.

switch 문

해당 조건이 case와 일치하는 경우 : 다음 함수를 실행하며, 

break; 가 없으면 그 다음 조건을 비교함.

default:는 무조건 일치함.

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 message = (age >= 18) ? "성인입니다." : "미성년자입니다.";
console.log(message);   // "성인입니다."

조건문 중첩 가능

if 문 안에 if문 또 넣거나 하는 등 자유롭게 중첩 가능함. 

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

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

단축평가

&&는 좌항이 true일때 우항을 반환하고

||는 좌항이 false일때 우항을 반환함.

true || anything // true
false || anything // anything
true && anything // anything
false && anything // false

조건이 falsy, truthy할때 무언가를 해야한다면 단축평가로 대체 가능.

또한 객체의 변수, 함수 매개변수등의 typeError를 방지하고 기본값을 설정하는등 여러 유용한 기능이 있음.\

https://velog.io/@najiexx/JavaScript-%EB%8B%A8%EC%B6%95-%ED%8F%89%EA%B0%80

[JavaScript] 단축 평가

ES11부터는 옵셔널체이닝연산자(?.) null병합연산자(??)가 도입되어 단축평가로 임시로 쓰던 기능을 보완함.

내용은 위 링크 (단축평가)에 있으니 참고. 

 

 

 

반복문

더보기 클릭

1. for문

1-1. 기본적인 for문

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

위의 예제에서는 for문을 사용하여 0부터 9까지의 숫자를 출력합니다. for문은 초기값, 조건식, 증감식을 사용하여 반복 횟수를 제어합니다.

1-2. 배열과 함께 사용하는 for문

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

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

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

1-3. for...in문 

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

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

위의 예제에서는 for...in문을 사용하여 객체 person의 프로퍼티를 출력합니다. for...in문은 객체의 프로퍼티를 순서대로 접근할 수 있습니다. 배열에서는 index값이 key에 할당

ES6 for...of 문 -> 배열 순환땐 value값이 key에 할당.

2. while문

let i = 0;

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

위의 예제에서는 while문을 사용하여 0부터 9까지의 숫자를 출력합니다. while문은 조건식이 참인 경우에만 코드를 반복해서 실행합니다.

3. do...while문

let i = 0;

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

위의 예제에서는 do...while문을 사용하여 0부터 9까지의 숫자를 출력합니다. do...while문은 일단 한 번은 코드를 실행하고, 그 후에 조건식을 체크하여 반복 여부를 결정합니다.

4. break문과 continue문

4-1. break문

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

위의 예제에서는 for문과 함께 break문을 사용하여 0부터 4까지의 숫자만 출력합니다. break문은 반복문을 종료합니다.

4-2. continue문

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

위의 예제에서는 for문과 함께 continue문을 사용하여 5를 제외한 0부터 9까지의 숫자를 출력합니다.

for...in 문과 for...of 문의 차이점

->for...of는 배열 값을 순환함. (객체 사용 불가)

->for...in은 객체 key값이나 배열의 index값을 순환.

https://velog.io/@eomttt/for-...in-for-...of-%EC%B0%A8%EC%9D%B4

for ...in, for ...of 차이

 

 

이후 내용은 아래 링크참고..

https://kthdev.tistory.com/57

JS 문법종합반 2일차

4. 배열, 객체 기초

객체와 객체 메소드

자바스크립트에서는 객체(Object)를 사용하여 여러 개의 값을 하나의 변수에 담고 관리할 수 있습니다. 이번에는 자바스크립트의 객체와 객체 메소드에 대해서 알아보겠습니다.

1. 객체 생성

1-1. 기본적인 객체 생성

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

위의 예제에서는 객체 person을 생성합니다. 객체를 만들 때는 중괄호({})를 사용하며, 속성과 값을 콜론(:)으로 구분하여 작성합니다. 각 속성과 값은 쉼표(,)로 구분합니다.

1-2. 생성자 함수를 사용한 객체 생성

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

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

위의 예제에서는 생성자 함수 Person()을 사용하여 객체 person1과 person2를 생성합니다. 생성자 함수를 사용하면 객체를 일괄적으로 생성할 수 있습니다.

2. 객체 속성 접근

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

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

위의 예제에서는 객체 person의 속성에 접근하여 값을 출력합니다. 객체의 속성에 접근할 때는 점(.)을 사용하여 속성 이름을 입력합니다.

3. 객체 메소드

3-1. Object.keys() 메소드

  //오브젝트의 속성 이름(key)을 배열로 return  

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

let keys = Object.keys(person);

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

위의 예제에서는 Object.keys() 메소드를 사용하여 객체 person의 속성 이름을 배열로 반환합니다. Object.keys() 메소드는 객체의 속성 이름을 배열로 반환합니다.

3-2. Object.values() 메소드

 // 객체의 속성값(value)를 배열로 return

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

let values = Object.values(person);

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

위의 예제에서는 Object.values() 메소드를 사용하여 객체 person의 속성 값들을 배열로 반환합니다. Object.values() 메소드는 객체의 속성 값들을 배열로 반환합니다.

3-3. Object.entries() 메소드

 // key와 value를 2차원 배열로 return

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

let entries = Object.entries(person);

console.log(entries);

위의 예제에서는 Object.entries() 메소드를 사용하여 객체 person의 속성 이름과 속성 값들을 2차원 배열로 반환합니다. Object.entries() 메소드는 객체의 속성 이름과 속성 값들을 2차원 배열로 반환합니다.

3-4. Object.assign() 메소드

Object.assign(복사받는객체, 복사해오는객체)//  객체 복사, 일부 값 변경하며 복사

const copy = Object.assign({}, object); 이런식으로 써서 1단계 깊은 복사 가능.

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

let person2 = {};
Object.assign(person2, person);    // 뒤에껄 앞쪽으로 복사할래.
console.log(person2); // { name: "홍길동", age: 30, gender: "남자" }

let person3 = {};
Object.assign(person3, person, {age:31});  // 근데 age는 31로 바꾸면서 복사할래.
console.log(person3) //{ name: "홍길동", age: 31, gender: "남자" }



//이렇게 간단하게 합칠수도 있음. 그러면 person4대신에 {}이 들어감.
let Person4 = Object.assign({}, person, { age: 35 });
console.log(Person4);   
// { name: "홍길동", age: 35, gender: "남자" }

위의 예제에서는 Object.assign() 메소드를 사용하여 새로운 객체 newPerson을 만듭니다. Object.assign() 메소드는 기존 객체를 복사하여 새로운 객체를 만듭니다.

3-5. 객체 비교

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

객체의 값이 같더라도, 서로 다른 메모리에 할당이 되고, 그 메모리 주소값을 저장하므로,

===연산자로는 비교하면 주소값이 달라서 false임. 

JSON.stringify 메소드를 사용하면 문자열화해서 비교 가능함.

 

3-6. 객체 병합

... : spread operator  => 중괄호나 대괄호 한겹 없애줌.

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

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

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

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

위의 예제에서는 객체 병합을 합니다. 객체 병합을 할 때는 전개 연산자(...)를 사용합니다.

배열과 배열 메소드

자바스크립트에서는 배열(Array)을 사용하여 여러 개의 값을 저장하고 관리할 수 있습니다. 이번에는 자바스크립트의 배열과 배열 메소드에 대해서 알아보겠습니다.

1. 배열 생성

1-1. 기본적인 배열 생성

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

위의 예제에서는 배열 fruits를 생성합니다. 배열을 만들 때는 대괄호([])를 사용하며, 각 요소는 쉼표(,)로 구분합니다.

1-2. 배열의 크기 지정

let 배열명 = new Array(크기)

let numbers = new Array(5);

위의 예제에서는 크기가 5인 배열 numbers를 생성합니다. new Array()를 사용하여 배열의 크기를 지정할 수 있습니다.

2. 배열 요소 접근

배열명[인덱스]

인덱스를 변수로 자주 사용함.(for문 의 i)

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

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

위의 예제에서는 배열 fruits의 첫 번째 요소부터 세 번째 요소까지 출력합니다. 배열의 요소에 접근할 때는 대괄호([]) 안에 인덱스 값을 넣습니다.

3. 배열 메소드

3-0. indexOf() 메소드

요소의 인덱스 출력

   const answer = emergency.map( function (x) {
        return sorted.indexOf(x)+1})
    return answer;
    }  // 이런식으로 알고리즘등에서 사용할 수도 있음
    
    let fruits = ['사과', '오렌지'];
    console.log(fruits.indexOf('오렌지'); // 1

3-1. push() 메소드

배열 끝에 추가

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

fruits.push("오렌지");

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

위의 예제에서는 push() 메소드를 사용하여 배열 fruits의 끝에 "오렌지"를 추가합니다. push() 메소드는 배열의 끝에 요소를 추가합니다.

3-2. pop() 메소드

마지막 요소 삭제

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

fruits.pop();

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

위의 예제에서는 pop() 메소드를 사용하여 배열 fruits의 마지막 요소를 삭제합니다. pop() 메소드는 배열의 마지막 요소를 삭제합니다.

3-3. shift() 메소드

첫번째 요소 삭제

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

fruits.shift();

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

위의 예제에서는 shift() 메소드를 사용하여 배열 fruits의 첫 번째 요소를 삭제합니다. shift() 메소드는 배열의 첫 번째 요소를 삭제합니다.

3-4. unshift() 메소드

첫번째 요소 추가

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

fruits.unshift("사과");

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

위의 예제에서는 unshift() 메소드를 사용하여 배열 fruits의 맨 앞에 "사과"를 추가합니다. unshift() 메소드는 배열의 맨 앞에 요소를 추가합니다.

3-5. splice() 메소드

 // ~부터 시작해서 ~개 를 삭제하고 ~를 넣어줘

(시작위치번호, 삭제갯수, 넣는값)

[원본변경]

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

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

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

위의 예제에서는 splice() 메소드를 사용하여 배열 fruits의 두 번째 요소를 삭제하고, 그 자리에 "포도"를 추가합니다. splice() 메소드는 배열의 요소를 삭제하거나, 새로운 요소를 추가할 수 있습니다.

3-6. slice() 메소드

  // ~부터 ~까지 새로운 배열로 반환

slice() 빈 괄호로 실행하면 배열을 복사해줌!! (1단계 배열의 깊은 복사. )

(여기서부터, 여기까지) 새로운 배열로 반환해줌.

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

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

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

위의 예제에서는 slice() 메소드를 사용하여 배열 fruits의 두 번째 요소부터 세 번째 요소까지 새로운 배열로 만듭니다. slice() 메소드는 배열의 일부분을 새로운 배열로 만듭니다.

3-7. forEach() 메소드

  //  요소 하나씩 사용해서 콜백함수 실행함.

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

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

위의 예제에서는 forEach() 메소드를 사용하여 배열 numbers의 모든 요소를 출력합니다. forEach() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행합니다.

3-8. map() 메소드

 //  요소로 콜백함수를 실행한 뒤, 결과값으로 새로운 배열 생성.

반드시 return 을 가져야 함  ( 새로운 배열이 튀어나옴! )

항상 원본 배열의 길이만큼 return이 됨!

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

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

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

위의 예제에서는 map() 메소드를 사용하여 배열 numbers의 모든 요소를 제곱한 새로운 배열을 만듭니다. map() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.

3-9. filter() 메소드

  // 조건문 통과한 요소의 배열 반환

조건문(콜백함수)을 무사히 통과한 (true) 요소만 가져와서 새로운 배열 return

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

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

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

위의 예제에서는 filter() 메소드를 사용하여 배열 numbers에서 짝수만 추출한 새로운 배열을 만듭니다. filter() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소만 새로운 배열로 반환합니다.

3-10. reduce() 메소드

.reduce(function(accumulator, currentvalue){return 조건문}, 초깃값 );  메소드   //누적계산

초깃값에 각 요소를 순차적으로 돌면서 누적해서 계산을 해서 하나의 값을 반환함.

첫번째 요소에 두번째 요소를 계산하고, 거기에 세번째 요소를 계산하고..

여기서 초깃값을 0으로 설정은 해주지 않으면, current index:1부터 계산하며, 빈 배열시 오류 발생함.

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

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

console.log(sum);

3-11. find() 메소드

  //  조건문 통과한 첫번째 요소 반환

조건문(콜백함수)를 통과한 첫번째 요소를 return

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

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

console.log(foundNumber);   // 4

위의 예제에서는 find() 메소드를 사용하여 배열 numbers에서 3보다 큰 첫 번째 요소를 찾습니다. find() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번째 요소를 반환합니다.

3-12. some() 메소드

 //    조건에 맞는게 하나라도 있으면 true

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

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

console.log(hasEvenNumber);   // true

위의 예제에서는 some() 메소드를 사용하여 배열 numbers에서 짝수가 있는지 확인합니다. some() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인합니다.

3-13. every() 메소드

 // 조건메 모든 요소가 싹다 true이면 true

let numbers = [2, 4, 6, 8, 10];

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

console.log(isAllEvenNumbers);   // true

위의 예제에서는 every() 메소드를 사용하여 배열 numbers의 모든 요소가 짝수인지 확인합니다. every() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 모든 요소인지 확인합니다.

 

3-14. 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]

위의 예제에서는 sort() 메소드를 사용하여 배열 numbers를 오름차순으로 정렬합니다. sort() 메소드는 배열의 요소를 정렬합니다.

배열조건문의 값이 음수이면 a를 b 앞에 정렬

배열 조건문의 값이 양수이면 a를 b 뒤에 정렬

배열 조건문이 0 이면 그냥 놔둠

3-15. reverse() 메소드 

  // 배열 역순 정렬 [원본변경]

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

numbers.reverse();

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

위의 예제에서는 reverse() 메소드를 사용하여 배열 numbers의 순서를 뒤집습니다. reverse() 메소드는 배열의 요소를 역순으로 정렬합니다.

 

3-16. join() 메소드

function solution(my_string, n) {
    let array = my_string.split('');
    let result = [];
    for(letter of array){
        for(let i = 0; i < n; i++){
            result.push(letter);
        }
    }
    return result.join('');
}//	"hhheeellllllooo"

배열을 문자열로 출력해줌. 괄호안에는 구분자를 넣으며, ""빈 문자열을 넣으면 모두붙여서 출력해줌.