Programming-[Frontend] (62) 썸네일형 리스트형 Javascript / Tips / MDN 문서에서 대괄호 [ ] (brackets)의 의미 MDN에 여러 Object의 method를 검색하다 보면, Syntax 부분에서 아래와 같은 문구들을 볼 수 있다. 여기서 소괄호 (parenthesis) 안의 대괄호 [ ] brackets 들은 어떤 의미를 갖는 걸까? 대괄호는 아래에 표현된 Optional 인자들을 의미한다. 위의 .map method를 활용하여 설명하자면, .map method에 들어가는 callback 함수에, 반드시 currentValue 인수는 입력이 필요하다. 그리고 그 다음 인수를 입력하면, index로 처리되는 것이다. 여기서, index의 대괄호 안에 array 인수의 대괄호가 있는 것을 볼 수 있는데, 이것은 인수들을 차례대로 입력할 때, 반드시 index 인수를 입력하고 나서야 array 인수를 입력할 수 있다는 것.. Javascript / 기초 / Inheritance, Object - oriented (상속, 객체지향) Inheritance(상속)의 개념에 대해서 살펴본다. 상속은 객체지향 프로그래밍을 위해 중요한 내용이다. 그러나 객체지향 프로그래밍 자체에 대한 이해나, execution context, this에 대한 이해가 없다면 정확한 이해가 어려울 수 있다. 우선 class와 instance 등 객체지향방식 프로그래밍에 대한 개념과 execution context, this에 대한 종합적 이해가 필요하므로, 아래 링크 글들을 정확히 이해해야 한다. - 객체지향 프로그래밍 - Javascript / Execution context, this - Javascript / 함수 / call, apply, bind 1. prototype과 상속의 개념 prototype은 '원형' 이라는 뜻으로, 어떤 함수의 속성 중 하.. Javascript / 배열, 객체 / 구조 분해 할당(destructing) 1. 구조분해할당(Destructing) 이란? Array 나 Object에 들어있는 값을 변수에 간편하게 지정할 수 있는 표현법이다. 2. 배열의 destructing 1. 배열의 각 값을 한 번에 선언하기! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 let arr = [1, 2, 3, 4, 5] //일반적인 방법 let a = 1 let b = 2 let c = 3 ... //destructing let [a, b, c, ...d] = arr a // 결과 : 1 b // 결과 : 2 c // 결과 : 3 d // 결과 : [4, 5] cs 2. 값의 교체, 무시하기(뛰어넘기) 1 2 3 4 5 6 7 8 9 10 let arr = [1, 2, 3, 4, 5] let [a, b].. Javascript / 객체 / Property shorthand Property Shorthand는 객체 안에 key와 value를 쓸 때, 이미 변수로 선언된 key에 대해서는 굳이 value를 정의해줄 필요가 없는 것을 의미한다. 또는, key와 value값이 같을 때 이미 정의된 변수 값으로 value값을 지정해준다. 1234567891011let a = "b"let c = "d"let e = "f" //key값만 쓰기let couple = {a, c, e}couple // 결과: {a: "b", c: "d", e: "f"} //key와 value를 같은 값으로 쓰기let couple2 = {a:a, c:c, e:e}couple2 // 결과: {a: "b", c: "d", e: "f"}cs Javscript / 함수 / 화살표 함수 화살표 함수(arrow function)는 ES6(javascript 2017)에 도입된 새로운 기능이다. 함수 표현식의 약식 형태라고 보면 된다. 다만, 여러가지 특징이 있으므로 예시를 통해서 차례대로 살펴보자. 1. 기본적인 문법 1 2 3 4 5 6 7 8 9 // 함수 선언식 let add = function(x, y) { return x + y } //화살표함수 방식 let add = function(x, y) => { return x + y } cs 2. 생략 가능 기호 파라미터가 1개일 때는 소괄호 ()의 생략이 가능하다. 화살표 함수의 유일한 문장이 return 일때는 return 을 생략할 수 있으며, 이 때는 중괄호 {}를 생략해주어야 한다. 1 2 3 4 5 6 7 8 9 10 11 .. CSS / Combinators (연결자 또는 결합자) CSS의 특정 tag들을 선택하기 보다 쉽게 위한 개념으로, Combinator라는 것이 있다. 이것은 태그들끼리 부모-자손(descendant), 자식(Child), 인접형제(Adjascent sibilings), 일반형제(General siblings)의 복잡한 관계를 가질 때, 태그의 선택을 훨씬 더 용이하게 만들어준다. 차례대로 살펴보자. 1. Descendant Selector 자손 선택자는 어떤 tag 하위에 있는 모든 일치하는 tag를 선택한다. 단순 띄어쓰기로 구분하여, 하위의 모든 tag들에 적용된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1 2-1 2-1-1 2-1-2 2-1-3 2-1-3-1 2-2 2-2-1 2-2-1-1 cs 1 2 3 div p {.. Javascript / 함수 / call, apply의 활용 ( .map.call(.filter.call), Math-apply) call, apply, bind의 기본 개념은 이전 글에서 확인할 수 있다. Javascript / 함수 / call, apply, bind Javascript / 함수 / call, apply, bind 1. call과 apply method 지난 this에 관한 글에서 일반적으로 this는 전역객체나 부모객체를 가리키는 반면, call, apply는 사용자가 정해주는 객체를 this로 취급한다는 것을 배웠다. (Javascript / Execution co.. whitepro.tistory.com 이번에는 call, apply를 적용하는 사례들을 알아보자. call, apply는 어떤 객체에 포함되어 있는 method를 간접적으로 활용하기 위해서도 사용된다. 아래 두 가지 예시를 보자. 1. Math.. Javascript / 기초 / 삼항연산자 삼항연산자 삼항연산자는 if-else 구문을 줄여서 표현할 수 있는 도구이다. 라면을 요리할 때, 물이 100℃가 넘었는지 검사하는 조건문을 작성한다고 가정해보자. 1 2 3 4 5 6 7 8 9 let temp = 90; if(temp >= 100) { console.log('Put the noodle') } else { console.log('Wait more') } cs 간단한 예제이므로 굳이 함수형태로 작성하지 않았지만, 만약 함수라면 temp = 90이라서 if문의 첫 번째 조건을 만족하지 않으므로, 'Wait more'이 출력될 것이다. 이것을 삼항연산자의 형태로 표현할 수 있다. 1 2 3 let temp = 90; temp >= 100 ? 'Put the noodle' : 'Wait mor.. 이전 1 2 3 4 5 6 7 8 다음 목록 더보기
