JS - Array

Taehee Kim·2022년 5월 3일

JavaScript

목록 보기

4/17

📌 객체자료형 = 참조자료형 특징

객체를 생성하여 값을 할당하고 그 값을 복제하면 “값 자체”를 복제하는 것이 아니라 그 값이 위치한 ‘주소’를 복사

✔ 원시자료형: 중간에 val이 바껴도 이미 복사(할당)된 경우 반영이 안됨, 다른 방을 씀
✔ 객체자료형: 같은 공간을 씀, 서로 변수가 바뀌면 공유하고 즉각 반영 =참조

📌 생성자 vs 리터럴 표현

✔ 생성자: new String = 'hello'
✔ 리터럴 'hello' (''만 써도 string임을 인식하는 것)

✔ 객체자료형

생성자: new Object =
리터럴: {}

📌 1. 함수란 무엇인가?

✔ 여러차례 반복해야하는 코드 뭉치를 묶어서 하나의 이름으로 표현한것!
function myFunc(파라미터){
return x+y;
};
myFunc(인수);

!파!선!아!실!

실행함수 주머니의 명칭: 인자, 인수, argument
선언함수 주머니의 명칭: 매개변수, parameter

function double(num){
    num * 2;
}
 double(5);

undefined가 나옴

function double(num){
    return num * 2;
}
double(5); 
var val = double(5);
val = 10;

return을 넣어줘야 10이 제대로 나옴

function double(num){
    myFunc();
    return;
}
function myFunc();

외부 함수를 넣을 때는, 단순 실행이라면 return 필수는 X
값을 꺼내고자 할 때는 return을 사용
return은 함수를 종료시키는 역할도 있기 때문에 return은 아래에 넣어야 함

📌 2. 조건문

if(조건식) {
    console.log('hello world');
}
if(true) {
    console.log('hello world');
}

투루시어야 값이 출력됨

트루시: 참으로 평가되는 값
폴시: 거짓으로 평가되는 값/ 0, ‘’, undefined, null, NaN, false

if(true) {
    console.log('hello world');
}else if{
    console.log('hello world2222');
}else if{
    console.log('hello world2222');
}else

else if는 여러개 사용 가능
마지막엔 무조건 else

📌 3. 배열이란?

데이터의 집합

✔ 객체 = {key: value, key:value}
✔ 배열 = [a,b,c,d]
-> 배열의 각 값은 원소(element) 혹은 요소 라고 부릅니다.

✔ 배열의 리터럴
var myArr = [a,b,c,d];

✔ 배열의 생성자 함수 (보통 사용하지 않음)
var myArr = new Array(5);
값을 1개: 개수가 5개인 배열이지만 아무 수는 없다
var myArr = new Array(5,4,6,2);
값이 2개 이상: 그대로 배열응ㄹ 보여줌

✔ 접근 방법
var MyArr = [a,b,c,d];
myArr[1] = b;

✔ 값 바꾸기

[배열 총 정리]

데이터의 집합. 여러개의 값을 하나의 이름으로 묶어 사용할 수 있게 도와줍니다.
배열의 각 값은 원소(element) 혹은 요소 라고 부릅니다.
배열의 크기는 length 프로퍼티를 통해 알 수 있습니다.
배열의 생성자 함수에 숫자를 한개만 넣으면 인스턴스의 길이를, 여러 숫자를 넣으면 배열의 원소를 뜻합니다.
배열에도 리터럴 표현이 있습니다.( [ ] )
각괄호 + 인덱스를 통해 각 원소에 접근 할 수 있으며, 원소에 값을 저장 할 수도 있습니다. 심지어 존재하지 않는 원소에도 접근이 가능합니다.
리터럴 생성과 동시에 원소에 접근 할 수도 있습니다. ([1,2,3,][0] === 1)

📌 4. 배열 주요 method

1. pop

반환도 한다
마지막 배열을 뺀다

어제 예시 활용하기

pop() : 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.
제거 한 요소를 보관하고 싶다면 변수에 담아 둘 수 있습니다.
빈 배열에 pop을 호출하면 undefined를 호출합니다.

2. push

배열의 마지막 요소로 인자로 추가
새로운 배열의 길이를 반환합니다.
var val = [];
val.push('hello');
val = ['hello'];

문제
철수가 심부름을 받았습니다! 어머니께서 마늘, 양파, 배추를 사오라고 하는군요. 집에 왔더니 오늘 필요한 재료는 배추라고 합니다! 어머니에게 배추를 주세요!!

3. splice

기존의 요소를 삭제하거나, 교체하거나, 새 요소를 추가
인덱스, 카운트, 아이템 순서로 인자를 전달합니다.

1) 삭제하기- splice(시작 위치, 삭제 개수);
✔ splice(1); : 첫 단어 빼고 다 삭제
✔ 시작위치를 음수로 작성할 경우, 역순으로 사용할 수 있다.

(2) 추가 splice(시작 위치,0,데이터);
(3) 교체 splice(시작,교체될 데이터 위치,새로운 데이터)

[문제]
var fish = ['정어리', '고등어', '돌고래', '참치', '고래상어', '코끼리'];
1. splice 를 이용해 코끼리를 제거해보세요
2. 참치 다음에 다금바리를 추가해보세요
3. 돌고래를 제거하고 옥돔과 갈치를 추가해보세요

4. slice(시작위치, 지정숫자 -1까지)

✔ 원본배열 유지!!! 이게 핵심
✔ 두 개의 인자를 전달하여 배열안에 있는 요소를 새로운 배열로 반환
✔ 특히 두 번째 인자에 해당하는 인덱스의 아이템은 포함하지 X
ex) slice(1,4): 2번째 배열부터 3번째 배열까지 잘라냄
ex) slice(2,-1): 3번째 배열부터 뒤에서 2번째 배열까지 잘라냄
✔slice()에 숫자 하나는 , 해당 시작점부터 뒤까지 다 잘라내기
ex) slice(1): 2번째 배열부터 끝까지 잘라냄

[문제]
var fish = ['정어리', '고등어', '돌고래', '참치', '고래상어', '코끼리'];
다음 배열에서 물고기가 아닌것을 slice로 선택해 콘솔로 출력해 보세요.

5. sort() ⭐⭐⭐

배열의 요소를 정렬한 후 그 배열을 반환합니다.

✔ 숫자의 경우
일단 문자열로 바꾼다음,유니코드포인트 순서대로 반환
-->앞글자가 먼저 기준이 됨(마치 사전처럼)

✔ 해결방안
비교함수(compareFunction)

숫자형 데이터 정렬의 단점을 해결
함수의 이름은 필요가 없다(익명함수)

👉 오름차순

✔ 양수면 b가 앞으로, 음수면 a가 앞으로

해석)
var arrNum2 = [13, 9, 10, 2];
오름차순으로 정렬할 경우 (a - b)
13 - 9 == 4 --> 양수임으로 b인 9를 앞으로
13 - 10 == 3 --> 양수임으로 b인 10을 앞으로
9 - 10 == -1 --> 음수 임으로 a인 9를 앞으로 [9, 10, 13, 2]
13 - 2 == 11 --> 양수임으로 b인 2를 앞으로 [9, 10, 2, 13]
10 - 2 == 8 --> 양수임으로 b인 2를 앞으로 [9, 2, 10, 13]
9 - 2 == 7 --> 양수임으로 b인 2를 앞으로 [2, 9, 10, 13]

✔ if문으로 변환

해석)
-1, 1은 각각 음수, 양수임을 나타내는 숫자이기 때문에 어떤 숫자가 들어가도 상관 없다.

정리하자면,
a – b를 if 구문으로 정리했다고 생각하면 된다.
B가 더 크면 음수가 나와서 a가 앞으로 나가고,
만약 a가 더 크면 양수여서 b가 앞으로 나가게 된다는 해석과 동일하다.

👉 내림차순

✔ 양수면 b가 앞으로, 음수면 a가 앞으로

해석)
var arrNum2 = [13, 9, 10, 2];
내림차순으로 정렬할 경우 (b - a)
9 - 13 == -4 --> 음수임으로 a인 13을 앞으로
10 - 9 == 1 --> 양수임으로 b인 10을 앞으로
10 - 13 == -2 --> 음수임으로 a인 13을 앞으로
2 - 9 == -7 --> 음수임으로 a인 9를 앞으로

✔ if문으로 변환