개발/JavaScript (25) 썸네일형 리스트형 [Javascript] Strict mode Strict mode 란? 기존에는 무시되는 에러들을 엄격히 표출하고 싶을때 사용한다. 간단한 예시로 v = "A strict mode script"; console.log(v) // A strict mode script 결과값이 잘 나오지만 "use strict"; v = "A strict mode script"; console.log(v) // Uncaught ReferenceError: v is not defined strict mode를 사용하면 에러가 발생된다. 적용 방법 "use strict"; 또는 'use strict'; 'use strict'; 작성시 엄격모드로 사용 할 수 있다. 전체 스크립트, 함수, 모듈에서 가능하다. 1. 스크립트에 strict mode 사용 "use strict".. [Javascript] Observer Pattern 옵저버 패턴 옵저버 패턴(Observer pattern)이란? 한 객체의 상태가 바뀌면 그 객체에 의존하는 다른 객체들한테 연락이 가고 자동으로 내용이 갱신되는 일대다(one to many) 의존성을 갖는 패턴을 의미한다. 주로 출판사와 구독자에 비유를 한다. 출판사 = 주제(Subject), 구독자 = 옵저버(Observer)에 비유를 하며, 구독자는 출판사에게 구독 신청, 구독 취소를 하고 구독중엔 변경된 내용을 전달 받는다. - 옵저버는 주제에 의존한다. - 주제(Subject)객체의 데이터가 달라지면 옵저버한테 2가 전달된다. - 옵저버 객체들은 주제 객체를 구독하고 있으며(등록하고 있으며) 주제의 데이터가 바뀌면 갱신 내용을 전달받는다. 옵저버의 특징 - 느슨한 결합(Loose coupling)이다. 느슨한.. [Javascript] null VS undefined undefined null 공통점 '없음'을 나타냄 차이점 값이 대입되지 않은 변수나 속성을 사용하려고 할때 객체가 없을 때 typeof undefined object undefined 변수 선언만 되어있고 값이 할당되어 있지 않은 상태 let a; console.log(a) // 할당되지 않은 변수는 undefined const obj = {}; console.log(obj.prop) // 할당되지 않은 객체의 값은 undefined console.log(typeof undefined); // undefined의 type은 undefined null 값이 있긴 한데 의도적으로 비어있는 값인 상태 const x = null; console.log(x) 가급적 null을 사용하기 undefined는 코드 .. [JS] 전개구문(Spread Syntax) - ...(three dots) 전개구문(Spread Syntax) JavaScript ES6에 새로 추가된 문법 배열이나 객체를 개별요소로 확장(펼친다) 문법 // 객체 {...obj} // 배열 [...arr] 간단히 ...으로 표현한다. 객체나 배열을 합치거나 복사하거나 매개변수의 나머지를 표현할 때 사용한다. 객체 const obj1 = {x: 'a', y: 1}; const obj2 = {i: 'b', j: 2}; // 복사 const clonedObj = {...obj1}; console.log(obj1 === clonedObj) // false 깊은 복사 console.log(JSON.stringify(clonedObj)) // {"x":"a","y":1} // 합치기 - 1 const mergedObj = {...obj1.. Javascript로 작성하는 선언적 프로그래밍(Declarative Programming) 선언적 프로그래밍 이라는 개념을 Dev Matching의 해설을 보며 처음 접했다. 장점이 많은 프로그래밍 패러다임이여서 그것에 대해 알아보고 코드에 어떻게 적용시킬지 알아보자. 선언적 프로그래밍(declarative programming) What- What to do 무엇을 하는지에 초점을 맞추는 것 명령형 프로그래밍(imperative programming) How 어떻게 할건지를 순서대로 나열한 것 추상적인 예 집에 가는 경우 선언적 방식 : 서울특별시 왕십리역입니다. 명령형 방식 : 주차장 북쪽 출구를 나와 왼쪽으로 가세요. 12번가 출구에 도착할 때까지 15번 북쪽 도로를 타세요. 이케아를 끼고 우회전하세요. 직진하여 첫 번째 신호등에서 우회전 하세요. 다음 신호등을 지나 좌회전을 하세요. 선.. JS, CSS, HTML로 만든 슬라이드 Javascript, CSS, HTML을 이용해서 슬라이드를 만들었다. 기본적으로 슬라이드의 원리는 img1, img2, img3, img4 가 있다면 > 버튼을 눌렀을 때 img4가 화면에 보여질 시, img1을 그 다음에 오게끔 처리를 해주어야 한다. 반대로 < 버튼을 눌렀을 때 img1이 슬라이드에 보여진다면, img4를(거꾸로) 보여줘야 한다. 그 원리를 이용해서 만들어보았다. CSS * {box-sizing:border-box} .slideshow-container { width: 50%; position: relative; } #small_container { width: 50%; position: relative; display: flex; align-items: center; } .mySl.. [ES6] 구조 분해 할당 (let {} 사용방법) 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 쉽게 말하면, 객체 속성들을 할당할 때 구조를 분해하여 개별 변수에 담을 수 있도록 하는 표현식이다. 배열 - 변수 할당 후 선언하기 기존 문법 var foo = ["one", "two", "three"]; var red = foo[0] var yellow = foo[1] var green = foo[2] console.log(red); // "one" console.log(yellow) // "two" console.log(green) // "three" 결과값 one two three 기존에는 배열 하나씩 일일이 할당해 줬어야 했다. 새로운 문법 var foo = ["on.. [Javascript] 변수(const, var, let)와 전역공간 선언과 할당 1. var (중복선언 가능) var a = 10; console.log(a); // 10 var a = 20; console.log(a); // 20 var a = 30; console.log(a); // 30 변수 선언 여러번 가능 2. let (중복선언 불가능, 재할당 가능) // let 중복 선언 let a = 10; let a = 20; // SyntaxError: Identifier 'a' has already been declared // 재할당 let a = 10; console.log(a); // 10 a = 20; console.log(a); // 20 a = 30; console.log(a); // 30 중복 선언은 불가능하나 재할당은 가능 3. const (중복선언 불가.. 이전 1 2 3 4 다음
