JavaScript 중급 - 2

Array

arr.splice(n,m) : 특정요소 지움

n이 시작, m이 개수

let arr = [1,2,3,4,5];
arr.splice(1,2);

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

arr.splice(n,m,x) : 특성요소 지우고 추가

n이 시작, m이 개수를 지우고 x 추가

let arr = [1,2,3,4,5];
arr.splice(1,3,100,200);

console.log(arr); // [1,100,200,5]

두번째 인수에 0을 넣으면 아무것도 지우지않고 추가함.

arr.splice() : 삭제된 요소 반환

let arr = [1,2,3,4,5];
let result = arr.splice(1,3);

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

arr.slice(n,m) : n부터 m까지 반환

• m포함 X, 안쓰면 배열 끝까지
• 인자를 넣지 않으면 배열 자체가 복사됨.

let arr = [1,2,3,4,5];
arr.splice(1,4);

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

arr.concat(arr2, arr3 ..) : 합쳐서 새배열 반환

let arr = [1,2];

arr.concat([3,4]); // [1,2,3,4]

arr.concat([3,4], [5,6]); // [1,2,3,4,5,6]

arr.concat([3,4],5,6); // [1,2,3,4,5,6]

arr.forEach(fn) : 배열 반복

let users = ['Mike', 'Tom', 'Jane'];

users.forEach((item, index, arr) => {
  
});

arr.indexOf / arr.lastIndexOf

• 앞에서부터 찾기, 뒤에서부터 찾기

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

arr.indexOf(3); //2

arr.indexOf(3,3); // 7

arr.lastIndexOf(3); // 7

arr.includes() : 포함하는지 확인

배열에 해당 인자가 포함되면 true 포함되지 않으면 false

let arr = [1,2,3];

arr.includes(2); // true

arr.includes(8) // false

arr.find(fn) / arr.findIndex(fn)

• 짝수를 찾거나 성인을 찾는 등의 함수 전달 가능
• 첫번째 true 값만 반환하고 끝. 없으면 undefined를 반환
• 인덱스를 반환. 없으면 -1을 반환

arr.filter(fn)

• 조건을 만족하는 모든 요소를 반환

arr.reverse() : 역순으로 재정렬

let arr = [1,2,3,4,5];
arr.reverse(); // [5,4,3,2,1]

arr.map(fn)

함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

let userList = [ 
  { name: "Mike", age: 30},
  { name: "Jane", age: 27},
  { name: "Tom", age: 10}, ];

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, { id: index +1, isAdult: user.age > 19,});

});

console.log(newUserList); 
/*
  { name: 'Mike', age: 30, id: 1, isAdult: true },
  { name: 'Jane', age: 27, id: 2, isAdult: true },
  { name: 'Tom', age: 10, id: 3, isAdult: false }
]
*/
console.log(userList);
/*
[
  { name: 'Mike', age: 30 },
  { name: 'Jane', age: 27 },
  { name: 'Tom', age: 10 }
]
*/

arr.join()

배열의 내용을 문자열로 합치기

• 인자로 아무것도 넣지 않으면 " , "로 구분
• 인자로 넣어주면 넣어준 것으로 구분

let arr = ["안녕", "나는", "철수야"];

let result = arr.join();

console.log(result); // "안녕,나는,철수야"

arr.split()

문자열을 인자기준으로 잘라줌

let str = "Hello, My name is Mike.";
const result = str.split(",");

console.log(result); //[ 'Hello', ' My name is Mike.' ]

Array.isArray()

배열인지 아닌지 확인

let user =   { name: "Mike", age: 30};

let userList = ["Mike","Tom","Jane"];

console.log(typeof user); //object
console.log(typeof userList); //object

console.log(Array.isArray(user)); //false
console.log(Array.isArray(userList)); //true

arr.sort()

• 배열 재정렬
• 배열 자체가 변경됨(주의)
• 기본적으로 문자열기준으로 정렬함
• 제대로된 정렬이 필요하면 함수로 전달해야함

let arr = [27, 8, 5, 13];

arr.sort((a, b) => {
  console.log(a, b);
  /*
8 27
5 8
13 5
13 8
13 27
*/
  return a - b ;
});

console.log(arr);

• Lodash같은 라이브러리를 사용하면 편하게 솔팅 가능

arr.reduce()

인수를 함수로 받음

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

const result = arr.reduce((prev, cur) => { //prev는 누적값
	return prev + cur;
}, 0);// 초기값은 옵셔널이라 안써도 됨. 안쓸 경우 첫번째 배열값이 들어감

console.log(result);

구조 분해 할당(Destructuring assignment)

구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

let users = ['Mike', 'Tom', 'Jane'];

let [user1, user2, user3] = users;
/*
아래와 동일
let user1 = users[0];
let user2 = users[1];
let user3 = users[2];
*/

let [a,b,c] = [1,2]; //c는 undefined, 에러 방지를 위해 기본값을 지정해주는 것이 좋음.

객체 구조 분해

• 객체로 받은 값이 undefined일 경우에만 기본값이 적용됨.

let user = {name: 'Mike', age: 30};

let {name, age} = user; // 인자 순서는 상관없음, 키값 변경가능
/*
아래와 같음
let name = user.name;
let name = user.age;
*/

나머지 매개변수(Rest parameters), 전개 구문(Spread syntax)

... 인수 전달

function showName(name) { // 인자에 개수 제한 없음
	console.log(name);  
}

showName('Mike'); // "Mike"
showName('Mike', 'Tom');; // "Mike"

showName(); // undefined

arguments

• 함수로 넘어 온 모든 인수에 접근
• 함수내에서 이용 가능한 지역 변수
• length / index
• Array 형태의 객체
• 배열의 내장 메서드 없음(forEach, map 등 사용 불가)

function showName(name) { // 인자에 개수 제한 없음
	console.log(arguments.length);  
  	console.log(arguments[0]);  
  	console.log(arguments[1]);  
}

showName('Mike'); // "Mike"

• 그래서 가급적 나머지 매개변수 사용을 권장

나머지 매개변수(Rest paramenters)

function showName(...names) {
	console.log(names);
}

showName('Mike'); // [ 'Mike' ]
showName('Mike', 'Tom');; // [ 'Mike', 'Tom' ]

showName(); // [  ]

• 나머지 매개변수는 항상 마지막에 있어야 함.

전개 구문(Spread syntax)

• 배열

let arr1 = [1,2,3];
let arr2 = [4,5,6];

let result = [0, ...arr1, ...arr2, 7, 8, 9]; // [  0, 1, 2, 3, 4,  5, 6, 7, 8, 9]

• 객체

let arr = [1,2,3];
let arr2 = [...arr]; // [1,2,3]

let user = {name:'Mike', age:30};
let user2 = {...user};

user2.name = "Tom";

console.log(user.name); // "Mike"
console.log(user2.name); // "Tom"

클로저(closure)

• 함수와 렉시컬 환경의 조합
• 함수가 생성될 당시의 외부 변수를 기억
• 생성 이후에도 계속 접근 가능

어휘적 환경(Lexical Envirionment)

let one;
one =1;

function addOne(num) {
 	console.log(one + num); 
  
}

addOne(5)

• 위 에서 전역 Lexical 환경에는 one:1, addOne:function이라고 되어있음.
• 내부 Lexical 환경은 num : 5 라고 되어 있음.
• 코드가 실행되었을 때 내부Lexical환경에서 해당하는 값들을 보고 없으면 전역으로 까지 살펴봐서 찾음. 찾으면 넣어서 실행.

function makeCounter() {
	let num = 0;
  
  return function()  {
    return num++;
  };
}

let counter = makeCounter();

console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

• 위의 코드에서 counter()의 숫자를 바꿀 수 없음. 은닉화에 성공한 것임.

setTimeout / setInterval

• 시간 부분 인수에 0이라고 적어도 실행순서는 뒤로 감

setTimeout

일정 시간이 지난 후 함수를 실행

function fn() {
 	console.log(3); 
}

setTimeout(fn, 3000);

// 위와 같음
setTimeout(function fn() {
 	console.log(3); 
}, 3000);

// 인수가 필요하다면 세번째 인수로 전달
function showName(name) {
 	console.log(name); 
}

setTimeout(showName, 3000, 'Mike'); //함수, 시간, 인수

clearTimeout(인수)

• 예정된 작업을 없앰

setInterval

일정 시간 간격으로 함수를 반복

// 인수가 필요하다면 세번째 인수로 전달
const tId = function showName(name) {
 	console.log(name); 
}

// 3초마다 실행
setInterval(showName, 3000, 'Mike'); //함수, 시간, 인수
// 중단하려면
clearInterval(tId);

출처: 유투버 코딩앙마 - 자바스크립트 중급강좌 7 ~ 12