DevSSOM

배열 안의 값들을 하나씩 돌면서 전부 출력하고 싶을 때, for 반복문 const fruits = ["apple", "banana", "lemon"]; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } // "apple" // "banana" // "lemon" for of 반복문 const fruits = ["apple", "banana", "lemon"]; for (let fruit of fruits) { console.log(fruits[i]); } // "apple" // "banana" // "lemon" [ ].forEach arr.forEach(callback(currentvalue[, index[, array]])[, ..

arr.sort() 배열을 재정렬해주는 메소드. 배열 자체가 변경되니까 사용시 주의해야함. let arr = [1, 5, 4, 2, 3]; arr.sort(); console.log(arr); // [1, 2, 3, 4, 5] > 오름차순으로 정렬 잘됨. let arr = ["a", "c", "d", "e", "b"]; arr.sort(); console.log(arr); // ["a", "b", "c", "d", "e"] > 알파벳순으로 정렬 잘됨. let arr = [27, 8, 5, 13]; arr.sort(); console.log(arr); // [13, 27, 5, 8] > ?????왜 이렇게 되지????? 뭔가 이상함. 숫자를 정렬했는데 뒤죽박죽이 되어버림. 그 이유는 정렬할 때 요소를 문자..

문자열을 숫자로 변환 (string to number) "1234"처럼 숫자로 된 문자열만 변환 가능함. 숫자가 아닌 경우에는, NaN 값을 반환함. Number(문자열) Number 생성자 함수 사용하기 Number("1234"); // 11 Number("1234.5"); // 1234.5 Number("Hello"); // NaN +(문자열) 자바스크립트에서 문자열과 숫자열의 사칙연산은 숫자로 만들어주기 때문에, 문자열이 숫자열로 변환되는 효과를 가져옴. 문자열 앞에 + 연산자를 붙여주면, 숫자로 형변환이 됨. + ("1234") // 1234 + "1234.5" // 1234.5 + "-1234" // -1234 + "Hello" // NaN (문자열 * 1) 마찬가지로 문자열에 *연산을 해줘도 ..

숫자를 문자열로 변환 (number to string) String(숫자) String 생성자 함수를 활용하는 방법 String(1234) // "1234" String(NaN) // "NaN" String(Infinity) // "Infinity" 숫자 + "" 문자열 연결 연산자(+)를 활용하는 방법. 따옴표로 감싼 빈 문자열을 더해주면 형이 변환됨. 앞에서 더해주거나 뒤에서 더해주는 거 상관없이 "" + 숫자 형식, 숫자 + "" 의 결과는 동일. 1234 + "" // "1234" NaN + "" // "NaN" "" + Infinity // "Infinity" 참고로, NaN은 Not-A-Number로, 숫자가 아니라는 뜻. Infinity는 양의 무한대. 2021.07.24 - [JavaScr..

변수(variable) 변경될 수 있는 값을 말함. var 자바스크립트 초창기 변수선언 코드. 이제 쓰지 말자. 문제점이 많음(변수의 중복선언이 가능). let과 const로 대신하기. let 자바스크립트에서는 변수를 만들 때 let이라는 키워드를 이용. 이 let은 ES6에서 새로 추가됨. 변수를 중복선언(만들었던 변수를 또 만드는거야)하게 되면 에러메시지가 뜸. 그래서 서로 다른 개발자들이 똑같은 변수를 선언하는 일이 없어지니까 안전성 있게 됨. 변수의 데이터 값을 수정할 수 있는 mutable 타입. let name = "devSsom"; // name이라는 변수에 devSsom이라는 값을 할당 console.log(name); // devSsom name = "hello"; // name이라는 변..

객체(Object) 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인 것. 객체는 한꺼번에 여러 값을 담을 수 있는 통(container)와 같은 자료구조. 객체 안에는 이름-값 쌍(name-value pair)가 저장되는데, 이를 객체의 속성(property)라고 함. const person = { name : "devSsom", // 속성 이름 = 'name', 속성값 = devSsom age : 31 // 속성 이름 = 'age', 속성값 = 31 language : ["javaScript", "python"], // 속성 이름 = 'language', 속성값 = 배열 }; 위에서 person 변수에 할당된 객체에는 3개의 속성이 저장되었음. 객체 다루기 속성 접근자, delete 연산자, in 연..

.splice() splice 메소드는 배열의 기존 데이터를 다른 데이터로 교체하거나, 추가, 삭제해서 배열 데이터의 내용을 변경함. 배열.splice(시작인덱스[, 제거할 개수[, 추가할 요소1[, 추가할 요소2[, ... ]]]) 형태로 작성하고, 제거한 요소를 담은 배열을 반환함. 예를 들어, 하나의 요소만 제거한 경우, 길이가 1인 배열을 반환. 어떠한 값도 제거하지 않으면 빈 배열을 반환. ex. 제거는 안하고, 2번 인덱스에 "banana"를 추가할 경우 var fruit = ["apple", "watermelon", "orange", "strawberry"]; var removed = fruit.splice(2, 0, "banana"); // removed는 [] 아무것도 없는 빈 배열 //..

Class 이벤트 HTML 문서에서 특정 태그가 어떤 클래스를 가지고 있는지, 특정 클래스를 가지고 있다면 그 클래스를 제거하거나, 특정 클래스를 가지고 있지 않다면, 새로운 클래스를 붙이거나 할 때 다음의 제이쿼리 이벤트들을 활용함. $("h1").addClass(); // 대상에 괄호 안 클래스 추가 $("h1").removeClass(); // 대상에 괄호 안 클래스 제거 $("h1").toggleClass(); // addClass와 removeClass 둘 다 $("h1").hasClass(); // 대상에 괄호 안 클래스 있는지 확인 실습문제 Blue Font Red Font Add Class Remove Class Has Class css 파일엔 이미 blue와 important를 만들어뒀음..