본문 바로가기

전체 글

DOM 다루기 (Document Object Model) DOM 접근 메서드 요소들을 이용하려면, 아래의 메서드를 통해 특정 태그에 접근해야합니다. 메서드 설명 document.getElementById(id); 주어진 ID와 일치하는 요소 하나를 반환 document.getElementsByClassName(className) 주어진 Class명을 가진 요소들을 HTMLCollection에 담아 반환 document.getElementsByTagName(tagName) 주어진 Tag명을 가진 요소들을 HTMLCollection에 담아 반환 document.querySelector(selectors) 주어진 선택자를 만족하는 요소 하나를 반환 document.querySelectorAll(selectors) 주어진 선택자를 만족하는 모든 요소를 NodeList.. 더보기
전역객체 Window와 BOM, DOM의 정의 Window 객체 Window 객체는 모든 객체가 포함된 최상위 객체이며, 브라우저의 창이나 프레임을 의미합니다. 다시말해서 Window 객체는 전역객체로, 전역변수와 전역스코프에서 선언된 함수는 Window 객체의 Property입니다. Window 객체는 식별자 'window'를 통해서 접근이 가능하며, 호출 시 생략도 가능합니다. 1 2 console.log('coding'); // coding window.console.log('coding'); // coding cs window 객체의 하위요소로 DOM, BOM, JavaScript가 있는데, DOM는 웹페이지의 문서를 제어하기 위한 객체모델이고, BOM은 웹브라우저의 창이나 프레임을 추상화해서 제어할 수 있도록 하는 객체모델입니다. BOM B.. 더보기
클로저(Closure) | 클로저의 유용한 활용 클로저(closure)는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 클로저를 정의해보면 다음과 같습니다. 외부 함수에 접근할 수 있는 내부 함수(이러한 원리)를 일컫는 용어로, 스코프 범위 개념에 따라 내부함수의 범위에서는 외부함수 범위에 있는 변수에 접근이 가능하지만, 그 반대는 실현이 불가능한 개념입니다. # 클로저의 유용한 활용 *커링 이용: 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게하는 방법 1 2 3 4 5 6 7 8 9 10 11 12 function add(a){ return function(b){ return a + b; } } let result = add(4)(6); console.log(result); // 10 let result100 .. 더보기
스코프 (Scope) | var과 let, const의 차이점 JavaScript에서 변수는 어떠한 환경 내에서만 사용 가능하며, 각각의 접근 규칙을 갖고 있습니다. 기본적으로 스코프는 변수와 그 값이, 어디서부터 어디까지 유효한지를 판단하는 범위입니다. 자바스크립트는 기본적으로 함수가 선언되는 동시에 자신만의 스코프를 가집니다. 이러한 스코프가 없다면, 프로그램 내부에서 같은 식별자 이름은 충돌을 일으키므로, 단 한개밖에 사용할 수 없습니다. 이러한 스코프를 이해하기 앞서 가장 먼저, JavaScript에서 변수 선언 방식인 let, const, var의 차이점을 먼저봅시다. 차이점을 크게 3가지로 나눌 수 있습니다. 1. 변수 재할당과 재선언 2. 호이스팅 3. 스코프 | 변수의 유효범위 let const var 유효 범위 Block Scope Block Sco.. 더보기
Array 메서드 | #2-2 Immutable (불변성) 메서드 [JavaScript] Array 메서드 | #2-1 Immutable (불변성) 메서드 ▼ 원본 배열이 변하는 메서드 [JavaScript] Array 메서드 | #1 원본 배열 자체를 수정하는 메서드 배열의 메서드를 사용하기 전에, 항상 배열의 요소 자체를 수정하는지, 그 사본을 반환하는 메서드인 opentogether.tistory.com #2-2 Immutable (불변성) 메서드 "원본 배열을 수정하지않고, CallBack이 존재하는 순회메서드" forEach() - 배열의 각각의 요소에 대해 콜백을 호출합니다. arr.forEach(callback(currentvalue, index, array), thisArg) ◾ callback: 각 요소에 대해 실행할 함수입니다. ◾ currentVal.. 더보기
Array 메서드 | #2-1 Immutable (불변성) 메서드 ▼ 원본 배열이 변하는 메서드 [JavaScript] Array 메서드 | #1 원본 배열 자체를 수정하는 메서드 배열의 메서드를 사용하기 전에, 항상 배열의 요소 자체를 수정하는지, 그 사본을 반환하는 메서드인지 주의해야합니다. #1 원본 배열 자체를 수정하는 메서드 자주 사용하는 push(), pop(), shift(), u opentogether.tistory.com #2-1 Immutable (불변성) 메서드 "원본 배열을 수정하지않고, 새로운 배열 또는 값을 반환하는 메서드" join() -모든 배열의 요소를 연결해 하나의 문자열로 변환 arr.join(separator) ◾ separator: 배열의 각 요소를 구분할 문자열을 지정합니다. [Optional] ◾ 반환값: 배열의 모든 요소들을 .. 더보기
Array 메서드 | #1 원본 배열 자체를 수정하는 메서드 배열의 메서드를 사용하기 전에, 항상 배열의 요소 자체를 수정하는지, 그 사본을 반환하는 메서드인지 주의해야합니다. #1 원본 배열 자체를 수정하는 메서드 자주 사용하는 push(), pop(), shift(), unshift()와 같이 함수 호출 시 원본 그자체를 변경하는 메서드를 뜻합니다. 항상 원본 배열 자체를 수정하는 메서드를 사용할때에는 원본 값이 변경되므로 주의해서 사용하거나, 미리 원본을 다른 변수에 넣어 놓아야 합니다. ▼push(), pop(), shift(), unshift() 설명 [JavaScript] 배열과 객체의 개념과 차이 (Array vs Object) #1 배열과 객체의 정의 배열의 선언방법 let arr = []; 1 2 3 let arr = []; // 빈 배열 선언 a.. 더보기
문자열(String) 주요 메서드 파악하기 1. 문자열 접근 str[index] 1 2 3 4 5 6 7 8 9 let str = "Cook"; console.log(str[0]); // "C" console.log(str[100]); // undefined console.log(str[str.length - 1]); // "k" /* Read-only로 해당 인덱스 값 쓰기 불가 */ str[0] = "B"; console.log(str); // "Cook" cs 2. 문자열 합치기 ( + ) str + str - '+' 연산자를 통해 문자열 합치기가 가능합니다. - 'string'타입과 다른 타입 사이에 '+'연산자를 사용하면, 합쳐진 타입은 'string'입니다. 1 2 3 4 5 6 7 8 9 10 let str1 = "Apple"; le.. 더보기
Object 생성자의 메서드와 Object 프로토타입 메서드 1. Object.assign() - 객체를 병합하는 메서드 Object.assign(target, ...sources) 해당 메서드는 하나 이상의 원본 객체들로부터 모든 속성들을 대상 객체로 복사합니다. 첫번째 인자는 타겟으로, 그 뒤 인자부터는 타겟오브젝트에 병합될 객체입니다. 1 2 3 4 5 6 7 let obj1 = { a: 1 }; let obj2 = { b: 2 }; let obj3 = { c: 3 }; var newObj = Object.assign(obj1, obj2, obj3); console.log(obj1); // --> { a: 1, b: 2, c: 3 } console.log(newObj); // --> { a: 1, b: 2, c: 3 } cs 위 예제에서는 obj1값 자체가 .. 더보기
[객체] 각 키의 값은 해당 문자가 주어진 문자열에서 몇번 나오는가? 문제설명 문자열이 주어졌을때, "countAllCharacters" 함수는 주어진 문자열의 각각의 문자를 키로 가지는 객체를 반환합니다. 각 키의 값은 해당 문자가 주어진 문자열에서 몇번 나오는지를 나타냅니다. 조건 만약 빈 문자열이 주어졌다면, "countAllCharacters" 함수는 빈 객체를 반환해야 합니다. 입출력예시 let output = countAllCharacters('banana'); console.log(output); // --> {b: 1, a: 3, n: 2} 문제 function countAllCharacters(str) { } *풀이 function countAllCharacters(str) { let obj = {}; for(let i = 0; i < str.length;.. 더보기
[객체] 객체 두개가 주어졌을때, 두번째 객체의 속성을 첫번째에 추가하라 문제 설명 객체 두개가 주어졌을때, "extend" 함수는 두번째 객체의 속성을 첫번째 객체에 추가해야 합니다. 조건 첫번째 객체에 없는 모든 키를 추가해야한다. 만약 첫번째 객체에 이미 있는 키라면, 값을 덮어쓰지말고 무시하라. 두번째 객체는 수정하면 안된다. 입출력 예시 let obj1 = { a: 1, b: 2 }; let obj2 = { b: 4, c: 3 }; extend(obj1, obj2); console.log(obj1); // --> {a: 1, b: 2, c: 3} console.log(obj2); // --> {b: 4, c: 3} 문제 function extend(obj1, obj2) { } *풀이1 1 2 3 4 5 6 function extend(obj1, obj2) { for(.. 더보기
[객체] 주어진 객체의 속성의 총 갯수는 몇개인가요? 문제 설명 객체가 주어졌을때, "countNumberOfKeys" 함수는 객체안에 있는 속성들의 갯수를 반환합니다. 입출력 예시 let obj = { a: 1, b: 2, c: 3 }; let output = countNumberOfKeys(obj); console.log(output); // --> 3 문제 function countNumberOfKeys(obj) { } *풀이1 1 2 3 4 5 6 7 function countNumberOfKeys(obj) { let count = 0; for(let key in obj){ count++; } return count; } cs *풀이2 1 2 3 function countNumberOfKeys(obj) { return Object.keys(obj)... 더보기

티스토리툴바