[TIL] 배열과 함수

TIL - JS

배열

const fruits = ["사과", "딸기", "배", "바나나"];
console.log(fruits[0]);

배열 속 배열

const arrayOfArr = [[1, 2, 3], [4, 5]];
console.log(arrayOfArr[0]);  // [1, 2, 3];

배열의 마지막 요소

const every = ["사과", "1", null, undefined, "a", NaN];
console.log(every[every.length-1])  // NaN;

배열의 맨 앞에 요소 추가

const arr = ["a", "b", "c", "d", "e"];
arr.unshift("1");
console.log(arr);  // ["1", "a", "b", "c", "d", "e"]

배열의 맨 앞에 요소 제거

arr.shift();
console.log(arr);  // ["a", "b", "c", "d", "e"]

배열의 맨 뒤에 요소 추가

arr.push("f");
console.log(arr);  // ["a", "b", "c", "d", "e", "f"]

배열의 맨 뒤에 요소 제거

arr.pop();
console.log(arr);  // ["a", "b", "c", "d", "e"]

배열에서 원하는 요소 제거

arr.splice(2, 1)  // 2번째 인덱스부터 1개를 제거
console.log(arr);  // ["a", "b", "d", "e"]
arr.splice(2)  // (숫자를 1개만 쓸 경우)2번째 인덱스부터 모두 제거
console.log(arr);  // ["a", "b"]

배열에서 원하는 요소 추가

arr.splice(2, 0, "c", "d")  // 2번째 인덱스 0개를 지우고, 앞에 "c", "d" 추가
console.log(arr);  // ["a", "b", "c", "d"]

const는 상수이지만 객체 내부는 바꿀 수 있음. 재할당은 불가

includes, indexOf, lastIndexOf

const target = ["가", "나", "다", "라", "마", "가"];
console.log(target.includes("가")) // true *includes는 boolean값을 반환
console.log(target.indexOf("가")) // 0 *indexOf는 몇번째 인덱스인지 앞에서부터 찾음
console.log(target.lastIndexOf("가")) // 5 *lastIndexOf는 몇번째 인덱스인지 뒤에서부터 찾음
console.log(target.indexOf("아")) // -1 *일치하는 것이 없을 경우 -1을 반환

Quiz : 다음 배열에서 '라'를 모두 제거하세요.

const str = ["가", "라", "다", "라", "마", "라"];
while (str.indexOf("라") > -1) {
	a.splice(str.indexOf("라"), 1);
}

이 때 중복되는 것을 변수로 저장한 후, 그대로 대입하면 에러가 난다

let index = str.indexOf("라");
while (index > -1) {
	str.splice(index, 1);
}
// 위 코드는 변수 index가 계속 1이므로 무한반복됨
// 따라서 while문 안에 index = str.indexOf("라");를 추가하면 잘 동작함
console.log(str);  // ["가", "다", "마"]

함수

function a() {}  // 함수선언식
const b = function() {};  // 함수표현식
const c = () => {};  // 화살표 함수

a();  // 함수 호출

함수의 return

function a() {
	return "반환값";
}
console.log(a());  // "반환값"

function b() {
	return [1, 5];
}
// 값을 여러 개 return하고 싶을 때는 배열로 만들어준다

매개변수와 인수

function a(parameter) {     // 선언 시 parameter(매개변수)
	console.log(parameter);
}
a("argument")  // 호출 시 argument(인수)

function a(w, x, y, z) {
	console.log(w, x, y, z);
    console.log(arguments)  // Arguments(3) ['hello', 'parameter', 'argument'
                            //*배열형식으로 객체 출력
}
a("hello", "js", "world");  // 인수를 여러 개 줄 수도, 갯수를 맞추지 않을 수도 있음

화살표 함수

const multi = (x, y, z) => {
	return x*y*z;
}
console.log(mulit(2, 3, 4));  // 24

화살표 함수는 중괄호와 return까지 생략해서 한 줄로 작성할 수 있다

const multi = (x, y, z) => return x*y*z;

객체 리터럴

const me = {
	name: "sy",
    year: "1996",
    month: "1",
    gender: "F",
};
console.log(me.year);  // 1996 

// delete를 사용해 특정 속성을 제거할 수도 있음
deletd me.name;  // *{year: 1996, month: 1, date: 2, gender: 'F'}

특정 속성명을 부여할 때는 배열 대신에 객체 리터럴을 사용
객체끼리는 모양이 같아도 비교를 하면 false가 나온다
변수로 지정해주어야 같음을 나타낼 수 있음