[JavaScript] 코딩 테스트에 출제되는 기본 개념들

1. Array
2. 문자열
3. 객체와 프로퍼티
4. 이벤트핸들러
5. DOM
6. 비동기 프로그래밍
7. 클로저와 스코프

1. Array

배열을 조작하고 다루는 메소드 중 map(), filter(), reduce(), forEach() 에 대해 간략하게 정리해보자~~~

// map()  >  배열의 요소에 주어진 함수를 호출한 결과로 새로운 배열 생성
let nums = [1, 2, 3];
let doubled = nums.map(function(num) {
	return num * 2;
});

// filter()  >  함수에서 참값을 반환하는 요소들로 새로운 배열 생성
const evenNums = nums.filter(function(num){
	return num % 2 === 0;
});

// reduce()  >  배열의 각 요소에 대해 주어진 리듀서 함수를 실행해서 단일값으로 줄임
const sum = nums.reduce(function(acc, curr){
	return acc + curr;
}, 0);

// forEach()  >  배열의 각 요소에 주어진 함수 실행
nums.forEach(function(num) {
	console.log(num);
});

---

2. 문자열에 관련된 메소드

지정된 문자열을 변경시킬 수 있는 메소드는 split(), join(), slice(), substring() 이 있다.

let str = "Hello, world!";

// split()  >  지정된 구분자를 기준으로 분할 후 배열로 반환
let part = str.split(", ");  // ["Hello", "world!"]

// join()  >  배열의 모든 요소를 문자열로 결합해서 반환
let join = part.join(" | ");  // "Hello | world!"

// slice()  >  문자열의 인덱스를 기준으로 일부를 추출해서 새로운 문자열 반환
let substring = str.slice(7);  // "world!"

// substring()  >  문자열의 일부를 추출해서 새로운 문자열 반환
let sub = str.substring(0, 5);  // "Hello"

---

3. 객체와 프로퍼티

객체와 프로퍼티에서는 객체를 선언하고 프로퍼티를 읽거나 수정할 수 있어야한다.

// 객체 생성
const person = {
	name: "John",
  	age: 25,
  	city: "Seoul"
};

// 프로퍼티 호출
console.log(person.name);  // "John"

// 프로퍼티 수정, 추가, 삭제
person.age = 28;
person.job = "Front-end Developer";
delete person.city;

---

4. 이벤트핸들러

이벤트 핸들러에는 다양한 요소가 있다. 마우스와 키보드를 이용해서 동적인 요소를 만들 수 있도록 예시 코드를 작성해보자.

document.getElementById("btn").addEventListener("click", function(event) {
	console.log("clicked"); // 누를 때 마다 "clicked" 반환
});

---

5. DOM

DOM을 조작하는 것은 HTML의 요소를 선택자로 호출하거나 추가, 생성, 삭제 등을 할 수 있다.

// 요소 생성
let newEl = document.createElement("div");
newEl.textContent = "new div box!";

// 요소 추가
document.body.appendChild(newEl);

// 요소 선택, 삭제
let delEl = document.getElementById("sqBox");
delEl.parentNode.removeChild(delEl);

---

6. 비동기 프로그래밍

자바스크립트는 싱글스레드로 구성되어 있지만 비동기적 작동을 위해 Promise 함수나 async/await 를 사용한다.

// Promise 예제
var promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("Promise resolved!");
    }, 1000);
});

promise.then(function(result) {
    console.log(result); // "Promise resolved!"
});

// async/await 예제
async function fetchData() {
    var result = await fetch("https://api.example.com/data");
    var data = await result.json();
    console.log(data);
}

---

7. 클로저, 스코프

클로저는 함수가 자신이 생성된 렉시컬 스코프( lexical scope ) 밖에서 호출되더라도 자신이 생성될 때의 환경에 접근할 수 있는 기능을 말한다.

function outerFunc(){
	let outerTxt = "outer content";
  	
  	function innerFunc(){
    	console.log(outerTxt);
    }
  
  	return innerFunc;
}

let inner = outerFunc(); // "outer content"

^ 위 예제코드 에서 outerFunc는 외부, innerFunc는 내부 함수이며 innerFunc가 외부로 반환 된 후에도, 내부 함수는 외부 함수의 변수를 참조하므로 클로저가 형성 된다.

스코프 체인은 자바스크립트 사용시 변수의 범위 지정에 대한 개념으로 함수 호출 시 스코프 체인이 형성된다.

let globalVar = "global!";

function testFunc(){
	let localVar = "local!";
  	
  	console.log(globalVar, localVar); // global! , local!
}
testFunc();

^ 위 코드를 통해 전역 변수와 지역 변수는 어디까지 접근 가능한지 확인해보자.
함수 내부에서 내부 스코프와 외부 스코프의 변수 모두에 접근할 수 있음을 알 수 있다.